How to style WooCommerce Search Results Page

sgertsos
6 Posts
sgertsos posted this 2 weeks ago

Hello

I would like to know how can I style the products search result page in woocommerce.

Thank you

Hello I would like to know how can I style the products search result page in woocommerce. Thank you
Vote to pay developers attention to this features or issue.
1 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 2 weeks ago

Hi,

There is a way to crate a new products template for products search result but this solution requires two conditions:

  1. woocommerce 3+
  2. you can only use Woocommerce Product Search widget. It does not work for Themler Search control. In case of Woocommerce Products search widget theme will use Themler Products template for search results.

To create alternative products template for search results please use the following solution:

  1. add new Products template in Themler and customize it:

    products-customize.png

  2. save theme >> open theme folder >> find /templates folder. You should see two files products_#.php files. You need the one created recently. Usually it has higher number. Remember this number.

  3. open Themler >> Settings >> CMS Code and add the following code:
    function template_chooser($template) {
    global $wp_query;
    $post_type = get_query_var('post_type');
    if ($wp_query->is_search && $post_type == 'product') {
    $template = locate_template('templates/products_10.php');
    }
    return $template;
    }
    add_filter('template_include', 'template_chooser');

    here products_10.php is the name of the file you searched in the /templates folder. Change the name to the name of the file from your theme.

Now if you serach for products from woocommerce search widget the search results page will use this new Products template which you can customize in the way you want.

Thank you,
Olivia

Hi, There is a way to crate a new products template for products search result but this solution requires two conditions: 1. woocommerce 3+ 2. you can only use Woocommerce Product Search widget. It does not work for Themler Search control. In case of Woocommerce Products search widget theme will use Themler Products template for search results. To create alternative products template for search results please use the following solution: 1. add new Products template in Themler and customize it: !products-customize.png! 2. save theme >> open theme folder >> find `/templates` folder. You should see two files products_#.php files. You need the one created recently. Usually it has higher number. Remember this number. 3. open Themler >> Settings >> CMS Code and add the following code: `function template_chooser($template) { global $wp_query; $post_type = get_query_var('post_type'); if ($wp_query->is_search && $post_type == 'product') { $template = locate_template('templates/products_10.php'); } return $template; } add_filter('template_include', 'template_chooser');` here `products_10.php` is the name of the file you searched in the `/templates` folder. Change the name to the name of the file from your theme. Now if you serach for products from woocommerce search widget the search results page will use this new Products template which you can customize in the way you want. Thank you, Olivia
You must log in or register to leave comments