Custom results page with Elementor Pro

Using a custom page as the results page via the Elementor Posts or Products widgets

Elementor Loop Grid as Results Page tutorial

Prerequesites

Elementor Pro is required, as unfortunately the free version does not contain the Posts widget.

• Elementor

• Elementor Pro

This tutorial is to make a custom single page and redirect the results from Ajax Search Pro to that page - not for customizing the existing results page.

To customize the actual results archive page, you can either use Elementor if your theme supports it, or using a theme editor or custom coding.

The custom results page

This works the very similarly the Posts or Products widget live filters. In fact, the pages from those tutorials can be used as results pages.

Pros	Cons
Easy to use	There is no "No results" text available for these widgets currently in Elementor. You can join the request thread here
Highly customizable	Images only show up if the items have featured images
Has a working pagination

Making a WordPress page first

Under the Pages submenu, create a new page for this, which is going to be used as the host for the elementor widgets - and will act as the results page.

After creating the new page, open it with Elementor, and open your site admin panel on a new browser tab for convenience.

Create a new page

Edit with elementor for the next step

Theoretically any post type should work, but for the maximum compatibility, we recommend using pages for this

Elementor widget configuration

If you don't have a search bar yet, make sure to create one, you can check the basics under the Getting Started section.

Before starting a small text is needed - open up the search instance options, and click on the "Toggle Shortcodes for ..." text.

...then copy or take note of the "Elementor Posts Widget Live Filter" input text, we will need that in a moment..

Now, go back to your Elementor editor and simply put the "Posts" or the "Products" widget to a page of your choice.

The Products widget is only capable of displaying products, nothing else - use it only if you want to display products as results.

Open up the Posts Widget options, and navigate to the Advanced Options panel. Enter the code that was copied/noted from step 1. It should look like this: as_es_1

Save the page, and that is it.

Search bar configuration

On your WordPress back-end open up the search instance options, and navigate to the General Options -> Logic & Behavior panel.

Scroll down until you find them Magnifier and Return button events. Then set both to "Elementor results page".

Then under the "Select a page with an Elementor Pro posts widget" option, search for the previously configured page, and select it.

After the selection, the configuration should look like this.

Save the search options, and it is ready for use. Placing the search shortcode to any page will automatically redirect to the results page.

Live search Triggers

After redirection, if the plugin shortcode is present on the results page, the alternative search triggers are automatically activated - these override some redirection/live search behaviours.

These override triggers can be configured on the same options panel, General Options -> Logic & Behavior

Please read each option hint for its exact purpose.