Add a CSS class to WooCommerce Shop Page

Using the filter body_class with the is_shop conditional you can target the main WooCommerce shop page by adding a CSS class.

add_filter( 'body_class', 'woo_shop_class' );
// Add WooCommerce Shop Page CSS Class
function woo_shop_class( $classes ) {
  if ( is_shop() )  // Set conditional
    $classes[] = 'woo-shop'; // Add Class
return $classes;
}


The above code snippet is added to your WordPress theme’s functions.php – it will add the ‘woo-shop’ CSS class to the body tag

4 Comments

  1. Unkillhank on March 18, 2022 at 7:38 pm

    Thanks for writing this “add_filter”; it totally saved my ars!

  2. Edi Silva on March 14, 2021 at 1:12 pm

    Hello. Can this code be added to the functions.php file or should it be in some WooCommerce file?

    • Neil Gowran on March 14, 2021 at 11:46 pm

      It says in the post.

    • Unkillhank on March 18, 2022 at 7:37 pm

      Add it to functions.php or use the Code Snippet plug-in. I use the plug and works just fine.

Leave all Comment