Demo setup: WooCommerce Shop Search and Filter
Placing Ajax Search Pro search and filters to the WooCommerce shop page
Last updated
Placing Ajax Search Pro search and filters to the WooCommerce shop page
Last updated
This tutorial explains how to replicate the shop search demo setup exactly.
First off, create a new search instance and open it's settings. (click on the image to magnify)
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.
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
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
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!
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.
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
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
That's it for the taxonomy filters
