Variable product class name

  • Resolved mnahmed

    (@mnahmed)


    1 year, 11 months ago

    Hello. How to target only product pages that have variations with CSS? .single-product doesn’t seem to work. I need to change styling of something that should be applied only on variable products pages. Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Kaushik S. a11n

    (@kaushiksomaiya)

    1 year, 11 months ago

    Hi there!

    Thanks for contacting us!

    I understand you would like to style variable product pages with CSS.

    If you are looking to style elements within the product information area – you could use the CSS class – product-type-variable

    If you’d like to style any element on the variable product page – You can try adding the snippet below in your theme’s functions.php file.

    
add_filter( 'body_class', function ( $classes ) {
if ( ! is_admin() && is_product() ) {
global $post;
$product = wc_get_product( $post->ID );
$cssclass = 'my_class_'.$product->get_type();
	return array_merge( $classes, array( $cssclass ) );
}
else{
	return $classes;
}
});

    This would add a CSS class called my_class_variable to <body> element of variable products. The code also works for any other product type.

    I hope this helps! 🙂

    Thread Starter mnahmed

    (@mnahmed)

    1 year, 11 months ago

    I went with the snippet and it worked. Thanks so much

    Luminus Alabi a11n

    (@luminus)

    Automattic Happiness Engineer

    1 year, 11 months ago

    Hey @mnahmed,

    I’m happy to hear that you’ve got this sorted now.

    I’ll go ahead and mark this thread as resolved.

    Take care and have an amazing weekend ahead.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Variable product class name’ is closed to new replies.