Demo Setup: WooCommerce Search

WooCommerce search example explained

This tutorial shows how to recreate the WooCommerce search example page.

Search Configuration

Theme

Under the Theme & Styling -> Overall box Layout panel choose the Simple Blue Horizontal theme.

Taxonomy term Filters

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.

Custom field filters

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.

Organize and Advanced

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.

Result Fields

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:

<p>{_price_html}</p>
[<p><strong>Category: </strong>{__tax_product_cat}</p>]
[<p><strong>Size: </strong>{__tax_pa_size}</p>]
[<p><strong>Color: </strong>{__tax_pa_color}</p>]

This displays the price, the product categories, the product sizes and product colors in the result contents.

Adding the Search and Results to the page

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:

[wd_asp id=1]

..and:

[wpdreams_ajaxsearchpro_results id=1]

We simply added the search shorcode into a column, and the results shortcode into shortcode below the column row like this:

That's it!