I have managed to get Owl Carousel working perfectly on my Magento home page using div's of images.
My aim is to get it wortking with products but I am struggling.
I want to display the products from a particular category and show them on the home page using the Owl Carousel but I usually call products on to the home page using a cms block with code such as:
{{block type="catalog/product_list" category_id="112" column_count="4" template="catalog/product/list.phtml"}}
This obvioulsy is not working - the products show but they have their own layout I think due to the template.
Does anyone have any ideas on what php or cms block I can use to call produts from a cateogry so it works with owl carousel.
Thanks in advance.
Start off with the assumption that you don't intend to load a massive amount of products into the Owl Carousel and that you're perfectly fine with creating a category just to store the products intended to be in the slider.
<div class="owl-carousel">
<?php
$categoryId = 15; // this is the category holding your products
$products = Mage::getSingleton('catalog/category')->load($categoryId) // load the category
->getProductCollection() // and the products
->addAttributeToSelect('image'); // tell Magento which attributes to get
foreach ($products as $product) { // iterate through the entire collection
echo '<div class="item"><img src='.$product->getImageUrl().'></div>'; // print the image url inside of the required Owl markup
}
?>
</div>
The above should be organized properly, as well, with the variables you'll be calling appearing at the top of your block and the foreach only appearing within the Owl portion of the block.
The foreach should go within the Owl Carousel markup, as in addition to the Magento attribute we are also printing the Owl markup.
phtml file and with the help of list.phtml file and display your product and give your own css classes. before that create a small extension and create one list.php file with in block folder of your extension and call your own block and phtml file in your cms page or static block that you have written right now
Related
I need to place something right after this element exactly:
<ol class="flex-control-nav flex-control-thumbs"></ol>
It's standard Woocommerce product gallery carousel on single product page, under main thumbnail. I was trying to find this is product-image.php and product-thumbnails.php but it's not there, I tried in different places. I need to add custom action under it.
I am a c# developer but I have a website for my family business that has been developed using PHP, woocommerce and wordpress about 5 years ago by a developer that I can't connect with him anymore. the problem is as following:- I did an update to the woocomerce plugin so I can use quick books when I did that the update the category page (which I know for a fact that he did custom build it ) lost the text under the images, I did inspect the elements in the browser, the text is their but there is a lot of space that why it is hidden , i don't know why this happened after the update but anyways, when I checked the page tab in the wordpress I did find this line of code
<pre class="brush: php; gutter: false">[product_categories per_page="12" columns="3" orderby="date" order="asc"]</pre>
As I said I don't know much of PHP but I expect "product_categories" is a function located in some file
also when I checked the inspect tab in the browser I found that the text and the image of the category is inheriting form class "product-category" "product" "first"
this is the line of the html of one of the categories just to have a better idea
<li class="product-category product first">
<a href="https://www.WebsiteName.ca/product-category/backdrops/">
<img src="https://www.WebsiteName.ca/wp-content/uploads/2017/02/backdrops- 300x300.jpg" alt="Backdrops" srcset="https://www.mosaiceventrentals.ca/wp- content/uploads/2017/02/backdrops-300x300.jpg 300w, https://www.WebsiteName.ca /wp-content/uploads/2017/02/backdrops-150x150.jpg 150w, https://www.WebsiteName.ca/wp-content/uploads/2017/02/backdrops-180x180.jpg 180w" sizes="(max-width: 300px) 100vw, 300px" width="300" height="300">
<h2 class="woocommerce-loop-category__title">
Backdrops
<mark class="count">(10)</mark>
</h2>
</a></li>
-I did try to download all the files from the server and search in each file for this function but no luck
I checked the bootstrap file for for the function "product-category" "product" "first" but I didn't find these classes
Basically I want to remove all extra space so the title can appear under the image but I want to know how to locate the file it is coded in
so after searching for a while I started to think out side of the box and discovered that the their was a line spacing error in the paragraph before the category list that was affecting the appearance of category titles. one other thing I found is that the new update for the woocommerce have a function to create a category list that link to the list of products under each category and the styling is much better than the custom made one.
just a reference to do that is as following:-
1- Dashboard --> Products --> Categories and you can add, edit and delete categories
2- in order to view the shop page as categories NOT the products you go to Dashboard --> Appearance --> customize --> woocommerce --> Product Catalog --> then select Show categories
3- then in order to add the welcome paragraph just go to Dashboard-->Pages--> All Pages select the shop page and click edit and just write the welcome paragraph.
thanks everyone for your help and suppourt
I've read through around 30 or 40 different articles today on how to achieve this and none give a really good simple answer.
Long story short, we have circa 40 categories and simply want to add a block of text with a link within it at the foot of every category page.
So looking to edit the category page template. We have our woocommerce folder setup in child theme and have other files overriding the default plugin. So we understand that it is probably the content-product.php file that is to be edited? But where and what code is applied? Tried adding in near the bottom but it gets caught up in the loop and adds it to the page for the number of products in that category as looped with product title, image etc.
Should we look at adding custom php in our child theme's functions.php file?
Any help greatly appreciated. Thanks.
There are a few different ways you can approach this but for the most part you're going to need to write some PHP.
To place something at the bottom of a category page you need to check how WooCommerce displays categories. Visiting the taxonomy-product_cat.php WC template will reveal that categories use archive-product.php. The next step would be to review that template file.
You want something to be shown at the bottom of the category page, it's only going to be displayed once so it doesn't belong inside the main products loop.
If you override the archive-product.php template and manually insert a link, it's going to appear not just on the categories but also the shop and tag pages. That tells you that you need a conditional to limit the display of the link.
Using the hooks WooCommerce provides means you won't have to override the template at all. There are 2 hooks in the file which may be suitable:
woocommerce_after_shop_loop - executed after the loop when there are products
woocommerce_after_main_content - executed at the bottom of the page whether or not there are products.
Write a function to output your link using one of those hooks:
function wpse_wc_category_footer_link() {
// woocommerce_after_main_content is a generic hook; check we're on a category page.
if ( ! is_product_category() ) {
return;
} ?>
<!-- Your markup for category pages belongs here... -->
My Link
<?php
}
add_action( 'woocommerce_after_main_content', 'wpse_wc_category_footer_link', 5 );
I need to redirect the user to a specific page by placing a hyperlink just before a closing </ul> tag (which is within a WordPress sidebar widget).
An example of what I am trying to achieve can be found below, using the WooCommerce Products widget which has been slightly modified to include an additional Specials hyperlink:
I am using the WooCommerce 2.9.1 plugin, and believe that the file I need to modify is the
class-widgets-products.php file. This file is made up with the following code - http://pastebin.com/vgpSqa6X.
On line 178 I have placed the following, which will display a hyperlink taking the user to a Specials page on the website:
echo '» Specials';
However, with this particular widget, it creates three separate instances and this will apply the hyperlink to All Products, Featured Products and On-sale Products.
How can I create separate hyperlinks that will apply to the widget, depending on which option has been selected in the admin menu?
For example, if the Featured Products option has been selected, it will output a Featured Products hyperlink at the bottom, and if the On-sale option has been selected, it will output a Specials hyperlink at the bottom.
Thank you.
The answer seems to lie in :
$this->settings->show->options
or :
$this->settings['show']['options']
...as the code you have pasted suggests.
Just evaluate this value with if's (or switches, whatever you feel comfortable with) :
if ($this->settings['show']['options'] == "this_particular_kind")
{
$link_at_the_bottom = '» This Particular Kind';
}
...
I have the following setup:
A cms page, the contents of which are showing on the product page. (by calling the cms block in the template phtml file)
I do not want to touch the product page phtml file, so that I can keep my template upgrade safe (I bought the template)
I want to show the product sku number inside the product page in addition to the sku appearing in the section with the other attributes, which is the default.
Since the template already provides the cms block to have content appear near the product pricing, (which is where i want the sku to appear) I figured I'll try to get the sku within a cms block by calling a phtml file inside the cms block.
I have created a phtml file as follows:
app/design/frontend/default/mytheme/template/page/getSku.phtml
And I have placed the following code therein (this supposedly gets the product sku):
<?php
//get product sku
echo $_product->getAttributeText('sku');
?>
And I have placed the following in the cms block (calls the phtml file):
{{block type="core/template" template="page/getSuk.phtml"}}
Error:
My page is not showing completely, (it seems the page doesn't get fully rendered.)
Thank you.
I found the answer here:
Calling an attribute in a CMS block in magento
It involved getting the product model on the phtml page first by using the following:
<?php
$_prodID = Mage::registry('current_product')->getId();
$_product = Mage::getModel('catalog/product')->load($_prodID );
?>
Only then can you access the attributes as follows:
echo $_product->getData('sku')