Posted on

WooCommerce: Show Product Subcategories @ Shop Page

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.

WooCommerce Show Product SubCategories
WooCommerce Show Product SubCategories

Show Product Subcategories on the WooCommerce Loop Pages


/**
 * @snippet       WooCommerce Show Product Subcategories
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=17525
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.4.5
 */

add_action( 'woocommerce_after_shop_loop_item_title', 'bbloomer_show_all_subcats', 2 );
 
function bbloomer_show_all_subcats() {
 
global $post;
 
$cats = get_the_terms( $post->ID, 'product_cat' );
 
if ( ! empty( $cats ) ) {
	
        foreach ( $cats as $term ) {
 
	// If parent cat ID = 116 echo subcat name...
        if( $term->parent == 116 ) { 
		echo $term->name;
	}
 
        }
 
}
 
}

Snippet 2: Display Specific Category on the WooCommerce Shop Page


/**
 * @snippet       Display Specific Category ID Under Each Product Title @ Woo Shop
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=17525
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.4.5
 */

add_action( 'woocommerce_after_shop_loop_item_title','bbloomer_show_cat_id', 2 );

function bbloomer_show_cat_id() {
global $post;
$cats = get_the_terms( $post->ID, 'product_cat' );
if ( count($cats) > 1 ) {
	foreach ( $cats as $term ) {
		if( $term->term_id == 35 ) { echo $term->name; }
	}
}
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

21 thoughts on “WooCommerce: Show Product Subcategories @ Shop Page

  1. 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

    1. Absolutely correct Carlos! Snippet has now been revised ๐Ÿ™‚

  2. 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        Watch tutorial @ https://businessbloomer.com/?p=19055
     * @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; }
     
            }
     
            }
     
    }
    
    1. 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?

  3. Thanks very much for this – tired many other sites code and this was the only one that worked!

    1. Excellent ๐Ÿ™‚

  4. 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!

    1. 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/

  5. 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

    1. 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

  6. 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

  7. Hello i am trying to display categories with image and above the subcategories without image.
    Can you plz help me ?

    1. Thanasisi, thanks for your comment! I’m afraid I can’t help you, this is custom work ๐Ÿ™

  8. i want to display category inside subcategory,and subcategory inside product.
    please help

    1. 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!

  9. 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

    1. Hey Kristina, thanks for your comment!

      Instead of:

      echo $term->name;
      

      Try with:

      echo '<a href="' . site_url() . '/product-category/' . $term->slug . '">' . $term->name . '</a>';
      

      Let me know ๐Ÿ™‚

  10. This is slick! What if you wanted to include the URL as well?

    1. 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:

      ...
      echo site_url() . "/product-category/" . $term->slug
      ...
      

      Hope this helps!

  11. 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?

    1. 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!

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.