# Demo setup: WooCommerce Shop Search and Filter

{% hint style="info" %}
This tutorial explains how to replicate the [shop search demo](https://ajaxsearchpro.com/shop-search/) setup exactly.
{% endhint %}

{% embed url="<https://youtu.be/EXWnm171I7g>" %}
WooCommerce shop page live search
{% endembed %}

## Search Setup

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

<figure><img src="/files/sDcUBpq0qjaFGQgKVKqS" alt="" width="375"><figcaption></figcaption></figure>

### General Options

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

<figure><img src="/files/UN5b11dkzZT6ZkaNZIYi" alt="" width="375"><figcaption></figcaption></figure>

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.<br>

<figure><img src="/files/zHJBYXtO1Hh69x1vSWr7" alt="" width="375"><figcaption></figcaption></figure>

### 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.

<figure><img src="/files/IWQxH6UTpMUja3AdwpyB" alt="" width="375"><figcaption></figcaption></figure>

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.&#x20;

{% hint style="info" %}
To learn more about filters, please check the [search filters](https://documentation.ajaxsearchpro.com/frontend-search-settings) documentation
{% endhint %}

#### 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.

<figure><img src="/files/7ssiAwIL5Bq7zcJ58yVD" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/PSaUFCvDpBmjbCpRvg9v" alt="" width="375"><figcaption></figcaption></figure>

That's it for the taxonomy filters :smile:

#### 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

<figure><img src="/files/eJRgg3DFE5RjFmAfwWYH" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/BvSY9NXrMLI3tyIMfcrU" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="/files/YgZH6LXU25Fmv0NNC5Xk" alt="" width="375"><figcaption></figcaption></figure>

### 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.

<figure><img src="/files/FseVprDz9ZIb7IHvusZs" alt="" width="375"><figcaption></figcaption></figure>

* 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://knowledgebase.ajaxsearchpro.com/miscellaneous/tutorials/demo-setup-woocommerce-shop-search-and-filter.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.