Add css to product categories

Hello @mariodts!

To add css only on product categories and subcategories, you will need to add a piece of code to your theme’s functions.php file.

// add taxonomy term to body_class
function woo_custom_taxonomy_in_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;
}
add_filter( 'body_class', 'woo_custom_taxonomy_in_body_class' );

The CSS class to target would be product_cat_SLUG, where SLUG is changed with the category slug.The slug can be found by viewing the categories under Products > Categories, they are lower case with spaces replaced with dashes.

Image link: https://cld.wthms.co/obYueF

Hopefully you will find that helpful. ??

All the best,

Hi and thanks for your reply.

With class .post-type-archive-product i can edit shop page.
I want to know if it is possible to apply at product categories and subcategories instant css rules. Not to tag one by one product categories because i have over 200 product categories.

Hi @mariodts,

Are you saying you want to be able to add the same CSS to all product categories? If that’s the case, this class should be added to the body tag which can be used as a styling hook for any product category.

tax-product_cat

If you have something else in mind, let us know.

Cheers

Hi @mariodts,

Since we haven’t heard from you in a while, we’re hoping that means you were able to get this resolved. I’m going to close this thread out now.

If you’re still having trouble, please open up a new topic and we’ll be happy to help out.

Stay safe!