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.

If you wish to display the search results outside the search results archive page, then please check the Custom results page with Elementor Pro documentation.

Simple override of the results

For this, only the results page override needs to be enabled. Also make sure, that either the magnifier or the search button (or both) events redirect to the results page.

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

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.

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!

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