Adding a custom CSS class to WooCommerce product pages makes it easier to apply page-specific styling without affecting the rest of your website.
Steps
- Open your theme’s
functions.phpfile. - Add the code below.
- Save the file.
- Open any WooCommerce product page and inspect the
<body>tag.
Done — the class single-product-custom will be added to WooCommerce single product pages.
function add_custom_product_body_class( $classes ) {
if ( is_product() ) {
$classes[] = 'single-product-custom';
}
return $classes;
}
add_filter(
'body_class',
'add_custom_product_body_class'
);
