How to Add the Product Category as a Body Class on the WooCommerce Product Page

You can add the product category as a body class on the WooCommerce product page using the core body_class filter to append each of a product’s category slugs to the page’s <body> tag, giving you a CSS hook to style single product pages differently per category without touching PHP templates for styling changes.

Why Add Category Classes to the Body Tag

• Apply category-specific CSS (colors, layout tweaks) purely through your stylesheet
• Avoid conditional template logic for styling-only differences between categories
• Target multiple categories a product belongs to, all in one place

Step 1: Add the Body Class Snippet

/** Add each product category slug as a body class on the single product page */
add_filter( 'body_class', 'append_product_category_body_classes' );

function append_product_category_body_classes( $classes ) {

    if ( is_singular( 'product' ) ) {
        $current_product = wc_get_product();
        $categories = get_the_terms( $current_product->get_id(), 'product_cat' );

        if ( $categories ) {
            foreach ( $categories as $category ) {
                $classes[] = 'cat-' . $category->slug;
            }
        }
    }

    return $classes;
}

Step 2: Target the Class in CSS

/* Style single product pages in the "outdoor-gear" category differently */
.cat-outdoor-gear .single_add_to_cart_button {
    background-color: #2f6f3e;
}

Troubleshooting

Class Doesn’t Appear in the Rendered HTML

Confirm the product actually has a category assigned — products without any product_cat terms simply won’t add any category class.

Class Names Have Unexpected Characters

Category slugs with special characters or non-Latin scripts can produce unusual class names — consider sanitizing or mapping slugs to a safe class name if your category names aren’t simple ASCII.

Styling Doesn’t Apply Despite the Class Being Present

Check CSS specificity — theme styles targeting the same elements with a more specific selector can override your category-based rule; increase specificity or use a more targeted selector.

Frequently Asked Questions

Conclusion

Adding the product category as a body class on the WooCommerce product page is a simple body_class filter that opens up CSS-only styling per category, with no template overrides required.

See also How to Apply CSS to a Single Product Page in WooCommerce. Then read How to Hide Category and Tag on the Single Product Page.

Prefer no code? All-in-One Utilities Woo Add-on adds over 50 WooCommerce features, so you can switch them on without code.