WooCommerce: Display Product Category as “Body” Class

A Business Bloomer fan asked me an interesting question this week: how to apply CSS on the single product page based on the product category? Well, the answer is pretty simple: if we’re able to add the category name to the HTML “body”, this can then be targeted in your custom CSS. So, let’s see how this is done!

WooCommerce: Add Product Category Name to Body CSS Classes

PHP Snippet: Add WooCommerce Product Category as Body CSS Class

Thankfully, there was already some literature available on GitHub, and despite being 5 years old it still works like a charm. So, many thanksΒ Michael Krapf πŸ™‚


/**
* @snippet Product Category > Body CSS Class | WooCommerce
* @how-to Watch tutorial @ https://businessbloomer.com/?p=19055
* @sourcecode https://businessbloomer.com/?p=21507
* @author Rodolfo Melogli
* @testedwith WooCommerce 3.4
*/

add_filter( 'body_class', 'bbloomer_wc_product_cats_css_body_class' );

function bbloomer_wc_product_cats_css_body_class( $classes ){
  if( is_singular( 'product' ) )
  {
    $custom_terms = get_the_terms(0, 'product_cat');
    if ($custom_terms) {
      foreach ($custom_terms as $custom_term) {
        $classes[] = 'product_cat_' . $custom_term->slug;
      }
    }
  }
  return $classes;
}

Where to add this snippet?

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

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 Customization?

Check out these free video tutorials!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a 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.

12 thoughts on “WooCommerce: Display Product Category as “Body” Class

  1. Still working, thank you for the help.

    1. Cheers!

  2. Nice one! I would be interested how that that works with woocommerce product tags instead of categories. Any hints are welcome πŸ™‚

    1. Rainer, 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. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  3. Works like a charm πŸ˜‰ Thanks!

    1. Nice πŸ™‚

  4. Absolutely fantastic! Works beautifully πŸ™‚

    1. Awesome πŸ™‚

  5. Fine.
    My problem is to add a small CSS code to be used only in category page.
    The theme I use has a problem and don’t give to me this opportunity, so I wish to use functions.php

    This is my code:
    .shop-page-title { height:300px !important; max-height:300px !important; }

    1. Hey Giancarlo, you can definitely target the “archive” pages via CSS only πŸ™‚

  6. Hi,
    Thank you so much for your helpful blogs and videos. I wish to change the colour & logo image in my menu navigation on my product category page and single products in that category. How can I edit this to include the product category page also?

    Thank you πŸ™‚

    1. Hey Rachael thanks so much for your comment! Once the category is in the class, you can do whatever you like with CSS on that specific page – as you said this only works on the single product page. In fact, the category page already has a body class with the name of the category – so there is no need for us to add it; if you target that in your CSS you’ll be able to achieve what you like. Let me know!

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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.