Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Add custom css class for the search page filter – Woocommerce

I’m trying to add a custom CSS class for the search page that uses WooCommerce Product Search.

Search pages path is like:

domain.com/shop/ixwpss=3&title=0&excerpt=0&content=0&categories=0&attributes=0&tags=1&sku=0&v=a3420e5a4c03

When I search for the number 3 that represents the tag for products.

I managed to add the class for the whole shop, with the following function but I want to add only for the search page. Can someone help me?

add_filter( 'body_class', 'add_body_classes' );

function add_body_classes( $classes ) {

   global $post;

     if ( is_shop() ) 

     $classes[] = 'search'; 
   
   return $classes;

}
Tags:

2

Answers


  1. 0

    Please update the code like below

    add_filter( 'body_class', function( $classes ) { 
 if ( is_shop() ) {return array_merge( $classes, array( 'class-name' ) );}
}
    Login or Signup to reply.
  2. 0

    Assuming that the search page is using the archive-product.php

    If you are using a WooCommerce compatible theme then you have to go in your themes folder -> woocommerce and find the archive-product.php. If the override file does not exists then go to wp-content/plugins/woocommerce/templates/archive-product.php

    And a if statement to check if is search or not like below:

    if ( is_search() ) {
    <body class="your-class">
} else {
    <body class="regular-class">
    // the content that is already in that file (archive-product.php)
}

    *if the part (body class in your case) is not there you have to locate it and do the same (probably it’s in your header.php)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search