# Elementor custom search page archive override and live filter

This tutorial shows how to override the default results page elements with Ajax Search Pro, when you have the search [results archive page template enabled with Elementor](https://docs.elementor.com/article/357-customize-the-search-results-archive).

If you wish to display the search results outside the search results archive page, then please check the [Custom results page with Elementor Pro](/elementor-integration/custom-results-page-with-elementor-pro.md) documentation.

## Simple override of the results

For this, only the [results page override](/behavior/results-page-override.md) needs to be enabled. Also make sure, that either the magnifier or the search button (or both) events [redirect to the results page](/behavior/return-key-and-magnifier-icon-click-actions.md).

![](/files/-M1k6NejSmT7AxQ8lw4M)

That's it, the plugin will now redirect to the results page, and override the items with it's own.

## Override with Live Loader

If you are planning to add the search bar to the results page (or already have it there), you can use the live loader feature as well.

### Elementor archive page

Open up the search results archive with the Elementor editor. In our case it was named "Search".

![](/files/-M1k95C6YN9s1wJCtCaC)

Click the archives widget, and navigate to the **Advanced** panel. Under the **CSS Classes** option enter the following:

```
asp_es_archive
```

..then save the page.

![](/files/-M1k9R9YZ-x9JMH845mK)

Great, it is almost done, only one search configuration remains.

### Search instance configuration

Go back to the search plugin back-end, to the search instance options. Under the **General Options -> Logic & Behavior** panel, scroll down to the **Results Page Live Loader** section. Turn on the Live Loader option, and to the selector field, enter the following:

```
.asp_es_archive
```

Notice the dot (.) before the text, it is required!

![](/files/-M1kAqITvbaomcVEvml7)

That's it! The plugin will now act as a results page live loader as well.

![](/files/-M1kC5-0Lb5BxJbpwoar)


---

# 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/elementor-integration/elementor-custom-search-page-archive-override-and-live-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.