# Results, Archive Page and Shop Live Search and Filter

### Video tutorials

{% embed url="<https://youtu.be/nBiSPyG1T6o>" %}
Archive page live search and filter
{% endembed %}

{% embed url="<https://youtu.be/EXWnm171I7g>" %}
WooCommerce shop page Live Search and Filter
{% endembed %}

## Tutorial

`Search Behavior -> Search Results | Archive | Shop page Live Results`

![](/files/-L9k8_OTJ80FNY0cQyV3)

{% hint style="warning" %}
**Disclaimer:** Live loading items to a page causes the script event handlers to detach on the affected elements - if there are interactive elements (pop-up buttons etc..) controlled by a script within the results, they will probably stop working after a live load. \
This cannot be prevented from this plugins perspective.

There is **no guarantee** that this feature will work with any theme/website out there. It very highly depends on the actual website structure as well as the overall configuration.
{% endhint %}

### How to Enable the Live Loader

![](/files/ayuoaxaqmzKyIeoyqUxB)![](/files/pSAm7hb7ugFmN2V301ny)

Under the **Search Behavior -> Search | Archive | Elementor | Shop page Live Results** panel, you can choose to enable the live loader for:

* The search results page
* The taxonomy archives
* The WooCommerce shop page
* As well as an [Elementor Posts/Products widget](/elementor-integration/elementor-pro-posts-widget-live-filter.md) class selector

Aside from having these enabled, the proper DOM selector has to be used. Please read the documentation below on how to do that.

### Results container DOM element selector

![](/files/wL3QcmNmVYJTSNIQRHFP)

Default value: **#main**

This is the selector that the script tries to match, when the new results page is loaded via AJAX. The script then replaces the old content within this selector with the new ones.

{% hint style="warning" %}
&#x20;If you don't know what this means, then leave this options as it is by default
{% endhint %}

#### How can I find this selector for my theme?

If you are not a developer, your best bet is to ask the author of your current theme, he might know how to get the selector to target the results page container.

You can also contact us [via support](https://wp-dreams.com/go/?to=support), we might be able to help - but please note that we cannot guarantee this feature to work correctly in every case.

The only possible way is using the browser developer console or via the page source. Unfortunately there is no guide we could provide for this, as it would exceed the contents of this documentation.


---

# 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://documentation.ajaxsearchpro.com/behavior/results_page_live_loader.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.