Demo setup: WooCommerce Shop Search and Filter

Placing Ajax Search Pro search and filters to the WooCommerce shop page

This tutorial explains how to replicate the shop search demo setup exactly.

WooCommerce shop page live search

Search Setup

First off, create a new search instance and open it's settings. (click on the image to magnify)

General Options

On the Search Sources -> Post Type Search panel choose the Products post type.

Next, go to the Search Behavior -> Search | Elementor | Archive | Shop page Live Results panel and turn On the live loader for the WooCommerce Shop page.

Search Filters

On the Frontend Search Settings -> General panel let's set the search settings to Visible and to a Block layout. This will make sure the Search Filters are visible at all time.

Next, let's quickly create the search filters. On the demo we are using the default WooCommerce demo data - which has 3 taxonomies as well as a custom field for a price.

To learn more about filters, please check the search filters documentation

Taxonomy Term Filters

Let's now switch to the Categories & Taxonomy Terms subpanel and select the taxonomies we want to be displayed on the filters.

In our case we will select Product Categories, Product Color and Product Size. For each one we drag the Use all from ... option value to the right side. This will create a filter box for each taxonomy.

Next, click on the blue Change Display Mode button. This allows changing the filter properties. We set the following properties:

  • Product categories - Display as Multiselect

  • Product Color - Display as Checkboxes & Display the "Select All" option

  • Product Size - Display as Radio & Display the "Choose one/Any" option

That's it for the taxonomy filters 😄

Price Slider Filter

Price in WooCommerce is stored in the "_price" custom field, so it's super easy to use in filters.

Switch to the Custom Fields subpanel and create a new filter with the following details:

  • Title Label: Price

  • Custom field: _price

  • Type: Range Slider

  • Slider Range: Make sure it's empty, the plugin will fetch the min/max values

  • Prefix: $ and Suffix: ,-

  • Track 1 & Track 2 defaults: Leave empty

That's it, the filters are done!

Placing the search filter on the Shop Page

This step highly depends on the theme or your exact setup.

In our case, we are using a theme with a Shop Sidebar widget support. Most modern Block themes support that.

Using a Block Widget

Go to the Appearance -> Widgets panel:

  • Open up the Shop Sidebar and Search for Ajax Search Pro block

  • Chose the search bar we just created (WooCommerce Shop Search)

  • Save the page

Using a Page Builder or Shortcode Block

Page builder often time offer a customizable shop page. In those cases either the Search Block (if supported) or the Search Shortcode can be used in a shortcode block.

The search shortcode can be found on the Ajax Search Pro menu page.

  • In your page builder open up the Shop page editor

  • Use the search shortcode in a shortcode block anywhere you prefer the search to be displayed

Last updated