Demo Setup: WooCommerce Search
WooCommerce search example explained
Last updated
WooCommerce search example explained
Last updated
This tutorial shows how to recreate the WooCommerce search example page.
Under the Theme & Styling -> Overall box Layout panel choose the Simple Blue Horizontal theme.
Go to the Frontend Search Settings -> General panel and change the Search Settings Position option to Block or Custom, and also make it visible by default.
Now let's create the filters. First switch to the Taxonom Terms filters panel and choose the terms you want to display. In your case we choose "all" from product_cat, pa_color and pa_size
Now to change how the filters appear, click on the blue Display Mode button. For every selected taxonomy box you can choose the filter types and the related options.
That's it, now you will have taxonomy term filters available.
In this example we have a simple price filter. To make that, switch to the Custom Fields panel, and make a filter on the _price field, choose Range Slider as the type. Leave empty the Slider Range so the min/max price is parsed from the database.
You can change the order of the filter group fields on the Advanced panel. If you want to display results where the price is not specified then make sure that the Allow results with missing custom fields, when using custom field selectors? option is also enabled.
In the results we want to display some taxonomy terms as well as the price. For that we are using the Advanced Title and Content field features. That allows displaying categories, custom fields etc.. within the result contents.
Go to the Advanced Options -> Content & Fields panel, and change the Advanced Description field accordingly. In the example we used:
This displays the price, the product categories, the product sizes and product colors in the result contents.
In the example we are using the Gutenber editor, but you can use any page builder or even the classic editor if you want to - all you need is the search and results shortcodes, which look like this:
..and:
We simply added the search shorcode into a column, and the results shortcode into shortcode below the column row like this:
That's it!
