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

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce Visual Hook Guide: Archive / Shop / Cat Pages
    I’ve created a visual HTML hook guide for the WooCommerce Archive Page (which is the same page for the Shop, Category, Tag pages). This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can […]
  • WooCommerce: Add Second Description @ Product Category Pages
    In terms of SEO, if you’re trying to rank your product category pages, you really need to make the most of the default WooCommerce product category “description” and “thumbnail”. Most themes, if compatible with WooCommerce, will show this content right below the product category name and above products. Nothing new so far. But what if […]
  • WooCommerce: Hide Prices on the Shop & Category Pages
    Interesting WooCommerce customization here. A client of mine asked me to hide/remove prices from the shop page and category pages as she wanted to drive more customers to the single product pages (i.e. increasing the click-through rate). As usual, a simple PHP snippet does the trick. I never recommend to use CSS to “hide” prices, […]

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. Follow @rmelogli

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

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

    1. Hello Vanusa! Just replace “product_cat” with the attribute slug maybe?

  2. Hi Rodolfo, thanks so much for sharing this code. It works perfectly.

    Is there a way to reduce the font size of the category?

    1. You’re welcome! Yes, you could use some simple CSS to achieve that, but it depends on your theme

      1. Is there a snippet you could share please?

        1. No, sorry, CSS code relies on your theme and store setup, so can’t do much I’m afraid

  3. 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>';
  4. 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!

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

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

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

  8. 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 ๐Ÿ™‚

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

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

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

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

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

  14. 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 ๐Ÿ™

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

  16. 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 ๐Ÿ™‚

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

  18. 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? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. 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 the Business Bloomer Club to get quick WooCommerce support. Thank you!

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