I am trying to change the style of products in localhost/shop and other categories, I found that I have to change the archive-product.php, but here we have woocommerce_product_loop_start() and woocommerce_product_loop_end(), and I am not sure where I should add my style.
for example I have a function for showing the price per unit and also stars for rating I want add them to the <li> .
As you see in the archive-product.php there is the following line and in fact the content in content-product.php loads on the archive page.
wc_get_template_part( 'content', 'product' );
by going to content-product.php you see <li> tag. by editing this file you can edit the style of products in WooCommerce.
Related
I have seen this question and answer. That does not work.
Setup
I am running:
WordPress 5.4.1
WooCommerce 4.1.1
I have a custom theme that overrides some of the WooCommerce templates by placing my own templates in: themes/my_theme/woocommerce/template-name.php
I have established that the shop page (homepage) uses the template archive-product.php. I have copied the this from plugins/woocommerce/templates/archive-product.php into my theme and made some minor HTML changes which work perfectly. There are no functional changes in my theme's copy, just some HTML.
The problem
I want the homepage to only show the store categories, as thumbnails. There is an option to set the shop page to show categories instead of products:
Appearance > Customize > WooCommerce > Catalogue
Shop page display has been set to Show Categories
However the shop homepage seems to ignore this setting entirely, and it still shows the products. It seems surprising that WooCommerce's own template does not honour this setting!
How do I find this setting in the template and then show the categories (as thumbnails) on the shop homepage?
Is there an equivalent to woocommerce_product_loop() for looping categories?
As a side note, the Storefront theme does honour the setting but Storefront does not have the template archive-product.php. Storefront seems to be highly abstracted and after much debugging of it / trying to take it apart I have so far not worked out which template file it is using for the shop page.
My theme is already in production and I just want to make an update so that the homepage shows the categories instead of going directly into the products list.
I found a workable solution. The WooCommerce default templates don't support the setting to show categories on the Shop page.
However using a shortcode with do_shortcode(), and a condition this can be achieved as follows:
if (is_shop()) {
echo do_shortcode('[product_categories hide_empty="0"]');
} else {
woocommerce_product_loop_start();
if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) {
the_post();
/**
* Hook: woocommerce_shop_loop.
*/
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' );
}
}
woocommerce_product_loop_end();
}
Still:
I would like to know how to pick up the 'show categories' customisation setting shown in the question, so my theme responds to that.
Is there a better way than using do_shortcode(), this feels like a bit of a hack
I am using this shortcode [products limit="4"] to show the products on a different page called Theme.
Now I want to change the layout style of this Theme page by overriding woocommerce template file.
1) Which template file woocommerce is calling for this shortcode?
2) Can you give me a full reference where I can find which template file is responsive for which shortcode?
Regards.
Every shortcode related to product listing is calling template named content-product.php via follows -
// Render product template.
wc_get_template_part( 'content', 'product' );
You can find it here
I'm using the Avano theme (no support) and the category pages are not showing the category title. Instead, it shows the title from the first product in that category.
You can see an example in their own demo: http://ninethemes.net/avano/wordpress/1/product-category/music/
As you can see the category title is: Woo Album 1. This is not the category title (Music) but the first product in the category.
Really can't figure this out. Doe anyone know how to fix this?
This is a bug in Avano theme, They have not created a header-shop.php file in the root of the theme directory. I have fixed this issue in my own way.
Activate the child theme
Make a header-shop.php file in the child theme directory
Copy and paste the content of the header.php file of the parent theme ( Avano )
Replace the h1 tage like the following
Use the following code
<h1 id="title-page">
<?php single_term_title(); ?>
</h1>
Instead of the code below
<h1 id="title-page">
<?php the_title( ); ?> // Its a wrong code - Don't use
</h1>
I would like to modify the products sorting on the shop page to product categories filter where the user can select the browse the products of categories from there.
I am a rookie in programming. I checked the WooCommerce directory to find the .php file I should work on. I got some clue it is in archive-product.php but I don't see the code which display the sorting dropdown.
Can anyone give me some clue to achieve this ? Or is there any workaround ? Thanks.
I added this in functions.php :
// remove default sorting dropdown
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
// now add the new dropdown
add_action( 'woocommerce_before_shop_loop', 'add_product_category_dropdown' );
function add_product_category_dropdown(){
print '<span class="woocommerce-ordering">'; // So it takes the same position as the default dropdown
the_widget( 'WC_Widget_Product_Categories', 'dropdown=1' );
print '</span>';
}
The reason you wouldn't see the code is that majority of what is generated by Woocommerce is handled by actions and hooks. In easier terms this means Woocommerce creates functions that spits out content and assigns them to different areas of the website.(For more information on Woocommerce actions and hooks, read here - https://docs.woothemes.com/document/introduction-to-hooks-actions-and-filters/ )
I'd recommend using the plugin below. It does exactly what you seem to be asking for and you can avoid having to play in parts you might not be comfortable with yet.
https://wordpress.org/plugins/yith-woocommerce-ajax-navigation/
Most awesome thing is that it's not one of those plugins that force you to get premium to actually get the desired effect.
I just found the solution few days ago. I use the function of WooCommerce product categories widget on the shop page.
This line of code will output the dropdown of product categories:
<?php the_widget( 'WC_Widget_Product_Categories', 'dropdown=1' ); ?>
I'm using WooCommerce 2.3.8 and WordPress 4.2.1. Is there a way to remove the product title from an individual product? I used to be able to just put a blank space and the product title would be blank, but now it doesn't let me, it just keeps putting the original product title back in when I update the product. This is only for one category of products. I would like to have a category page of products that have no titles, just the featured images in a grid.
Thank you!
1. Dirty Solution
Use CSS:
All of your list items for a product on a category have css classes named after the categories' name e.g. product_cat-mycatgegory.
You can find the product's title within an <h3> element.
Therefore the following CSS Code would prevent displaying the product's title on the category page.
.product_cat-mycatgegory h3{
display:none;
}
Note that the product title is be still readable via the browser's inspector.
2. Cleaner Solution
You could edit the content-product.php template. Check if a current category is chosen and decide whether to show the title or not. Please check woocommerce's documentation about template structure and overriding.
Pseudocode
<?php
$cat_obj = $wp_query->get_queried_object();
$category_ID = $cat_obj->term_id;
if(!($category_ID == category_ID_without_titles)) :?>
<h3><?php the_title(); ?></h3>
<?php endif;?>