Custom results page with Elementor Pro
Using a custom page as the results page via the Elementor Posts or Products widgets
Prerequesites
Elementor Pro is required, as unfortunately the free version does not contain the Posts widget.
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.
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.
Last updated
