A client of mine has a category called “Brand”. Each product is assigned to a specific Brand subcategory e.g. Nike, Adidas, etc. The goal of this task was to show the “Brand” subcategories in the shop/category/loop pages as a way to help the user identify the brand name.
The same can be applied to showing ALL categories, so the user knows exactly to what section of the shop the product belong to. Great, let’s see how it’s done!
PHP Snippet 1: Show Category Name/s @ WooCommerce Shop Items
/**
* @snippet WooCommerce Show Product Categories
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 5.1
* @community https://businessbloomer.com/club/
*/
add_action( 'woocommerce_after_shop_loop_item_title', 'bbloomer_show_all_subcats', 2 );
function bbloomer_show_all_subcats() {
global $product;
$cats = get_the_terms( $product->get_id(), 'product_cat' );
if ( empty( $cats ) ) return;
echo join( ', ', wp_list_pluck( $cats, 'name' ) );
}
PHP Snippet 2: Show Subcategory Name/s @ WooCommerce Shop Items
/**
* @snippet WooCommerce Show Product Subcategories
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 5.1
* @community https://businessbloomer.com/club/
*/
add_action( 'woocommerce_after_shop_loop_item_title', 'bbloomer_show_all_subcats', 2 );
function bbloomer_show_all_subcats() {
global $product;
$cats = get_the_terms( $product->get_id(), 'product_cat' );
if ( empty( $cats ) ) return;
foreach ( $cats as $term ) {
// If parent cat ID = 116 echo subcat name...
if ( $term->parent == 116 ) {
echo $term->name;
}
}
}
Hi Rodolfo! I created a product attribute called “Brand” in my Woocommerce store, and that’s how I set up the archive pages for each brand. Is there a code to show attributes for each product on the shop page, rather than the categories? Thank you!
Hello Vanusa! Just replace “product_cat” with the attribute slug maybe?
Hi Rodolfo, thanks so much for sharing this code. It works perfectly.
Is there a way to reduce the font size of the category?
You’re welcome! Yes, you could use some simple CSS to achieve that, but it depends on your theme
Is there a snippet you could share please?
No, sorry, CSS code relies on your theme and store setup, so can’t do much I’m afraid
Hello Rodolfo,
Thanks, this is what we really need. Your content is so helpful. But I have a question, how to customize some CSS to this PHP Code? I need to customize the position and thickness of the text (Category that adding). What is the class or selector to target the text?
Thankyou
I only need to know the class or selector to target the text. I can handle the CSS custom.
Thank you for the help.
Hey Fauzi thanks for your comment! You can echo your own HTML, which means you can add your own class, and use that as a CSS selector afterwards e.g.:
Hi,
I’ve been trying to hide the category names in the shop page. I Use weird category names here and there and just want to display the thumbnail images without the category names under it. :). Tried css like .woocommerce-loop-category__title {
display:none;
}, and it works temporarily on the browser while adding this in the inspect element. But if I use this css in the customizer/additional css, nothing happens. Can you help? Thanks a lot in advance.
Hi Joice, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Rodolfo,
what do I need to do, if I only want to show the Parent Category title not the sub/all categories?
Hope to hear back soon.
Hi Gagan, try with https://wordpress.stackexchange.com/questions/366690/get-the-terms-only-top-level
You are a saviour and a saint. Thank you a lot.
I only have one question. Could I be possible make the category itself a link (or maybe it’s just a quirk of the theme I’m using)?
Already found a solution in the comments below. Sorry for the spam but unfortunatelly I cannot delete my comments.
No problem at all! Glad you found a solution
How do I show the subcategory as a badge
Hi Patrick, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Rodolfo,
I’m trying to put the first snippet but it gives me this error: Trying to get property of non-object. On the line where it is written “$cats = get_the_terms( $post->ID, ‘product_cat’ );”. Is it possible that i have to add “global $post;” before this line?
Thank you so much
Absolutely correct Carlos! Snippet has now been revised 🙂
Hi, neither of these snippets are working for me. I am running the Divi theme on WooCommerce version 3.4.3. Could this snippet be outdated? Here’s the code in my child theme’s functions.php:
/** * @snippet WooCommerce Show Product Subcategories * @how-to Get CustomizeWoo.com FREE * @sourcecode https://businessbloomer.com/?p=17525 * @author Rodolfo Melogli * @compatible WooCommerce 3.4 */ add_action( 'woocommerce_after_shop_loop_item_title','bbloomer_show_all_subcats', 2 ); function bbloomer_show_all_subcats() { // Create array with product categories that belong to current product $cats = get_the_terms( $post->ID, 'product_cat' ); if ( ! empty( $cats ) ) { // Loop through the product categories... foreach ( $cats as $term ) { // If parent cat ID = 116 echo subcat name... if( $term->parent == 45 ) { echo $term->name; } } } }Hey Brianna, thanks for your comment! It could be Divi, and the function might therefore need to be customized 🙁 Try switching to another theme temporarily – does it work?
Thanks very much for this – tired many other sites code and this was the only one that worked!
Excellent 🙂
Hello Rodolfo,
I am new with woocommerce and I have been learning with your tutotials.
I have a question…if I want to build a category page do I have to use wordpress “add new page” and then place the category short code inside ? [product_category]
Am I correct by doing this?
What i want is to display a large image in that category page, some text and call all the products related to that category
I’ve had read that is a woocommerce page template but I don’t understand about that. My theme is a wp theme with woo plugin so my home page is not a home page shop , the shop is displayed in a separate page
If you have a guide or tutorial on this matter It will be excellent for me!
Hey Victor, thanks for your comment! Yes, the shortcode is the correct strategy 🙂 Here you can find out more: https://docs.woocommerce.com/document/woocommerce-shortcodes/
Hello again,
I finally got the code to work for me, however I have some questions.
1) How can I add css to this snippet code?
I want to change the size and color of the category name so that customers do not get confused with the product title.
2) How do I get it to appear only on the global “SHOP” page and on the home page? At the moment the name of the category is coming out also in the archive of each particular category and that in my opinion is a nonsense.
For what it is necessary that in the archive of the category “dogs” appears on the title of each product “Dogs”?
I do not know if I explain myself correctly …
3) I have some products that fall into two main categories. How do I get the category names to appear under one another, not next to each other?
Thank you very much
Nerea, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
Hello,
I love your tutorials, thanks to you I am learning a lot.
I copied the second snippet of code (SNIPPET 2) to display the category on the store page.
I’ve pasted it into my child theme functions.php file.
However, this is not working.
What can be the reason?
Thank you very much
Hello i am trying to display categories with image and above the subcategories without image.
Can you plz help me ?
Thanasisi, thanks for your comment! I’m afraid I can’t help you, this is custom work 🙁
i want to display category inside subcategory,and subcategory inside product.
please help
Hey Avdhesh, thanks so much for your comment! I’m not sure I fully understand your request, could you attach a screenshot/mockup of what you mean? Besides, this looks to me like custom work and not sure I can provide it free of charge. Let me know!
Hi!
Thanks so much for this! I’ve been trying to get the subcategory show for so long. No i finally got it. Though, I really need them to link to the actual subcategory page. I can see your response but I don’t get how to use it?
This is what my code looks like:
if ( ! empty( $cats ) && ! is_wp_error( $cats ) ) { // Loop through the product categories... foreach ( $cats as $term ) { if( $term->parent == 34 ) { echo $term->name; } if( $term->parent == 36 ) { echo $term->name; } if( $term->parent == 40 ) { echo $term->name; } if( $term->parent == 47 ) { echo $term->name; } } }How do I make sure they link too?
Thanks!
/Kristina
Hey Kristina, thanks for your comment!
Instead of:
Try with:
Let me know 🙂
This is slick! What if you wanted to include the URL as well?
Thanks Bayou! Yes, if you want to add the URL as well, you’ll need to “build” it by using $term->slug. Something along the line of:
Hope this helps!
Hi Rodolfo,
I tried both the options above. I used the code in my functions.php but nothing seems to be happening. Am I missing something?
Hey Nick, thanks for your comment! Can you paste your snippet here and maybe link to a screenshot, this is very strange 🙂 I tested it on my dev site and it works as long as I know!