WooCommerce: Show Category For Each Product @ 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.

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!

WooCommerce Show Product SubCategories
WooCommerce Show Product SubCategories

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
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

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
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

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;
      }
   }
}

Where to add this snippet?

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

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

If you think this code saved you time & money, feel free to join 14,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

34 thoughts on “WooCommerce: Show Category For Each Product @ Shop Page

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

    1. I only need to know the class or selector to target the text. I can handle the CSS custom.
      Thank you for the help.

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

        echo '<p class="whatever">' . $term->name . '</p>';
  2. 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.

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

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

  4. You are a saviour and a saint. Thank you a lot.

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

      1. Already found a solution in the comments below. Sorry for the spam but unfortunatelly I cannot delete my comments.

        1. No problem at all! Glad you found a solution

  5. How do I show the subcategory as a badge

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

  6. 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 πŸ™‚

  7. 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; }
     
            }
     
            }
     
    }
    
    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?

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

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

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

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

  12. 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 πŸ™

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

  14. 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 ) &amp;&amp; ! is_wp_error( $cats ) ) {
     
    // Loop through the product categories...
     
            foreach ( $cats as $term ) {
                if( $term-&gt;parent == 34 ) { echo $term-&gt;name; }
                if( $term-&gt;parent == 36 ) { echo $term-&gt;name; }
                if( $term-&gt;parent == 40 ) { echo $term-&gt;name; }
                if( $term-&gt;parent == 47 ) { echo $term-&gt;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 πŸ™‚

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

  16. 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 are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

Your email address will not be published.