Ajax Search Pro Documentation
Get Ajax Search Pro!Get SupportKnowledge BaseDevelopment
  • Ajax Search Pro Documentation
  • GDPR and Cookie policy
  • Video Guides
  • Plugin Updates
    • Automatic Updates
      • Activation on Development and Staging environments
      • Managing purchase codes
      • Purchase Code (license key)
    • Manual Updates
    • Safe Update Guide
    • Plugin update issues or errors
    • Disabling update check
  • Installation instructions
    • Uninstallation & Reset
  • Getting started
    • Importing from the Lite version
    • Editor Blocks
    • Search Shortcodes
    • Search Widget
    • Gutenberg and Other Page Editors
    • Replacing the default theme search bar
    • Placing the search shortcode in theme files
    • Search as menu item
    • Custom result box position
    • Custom filters box position
    • Shortcode generator
  • Search Sources
    • Search Engine
    • Post, Page, Product and other Post Type Search
    • Searching Titles, Content, Excerpt
    • Search in custom fields
      • Search By Product SKU
    • Search by categories, tags or other terms
    • Search in Attachments
      • Mime types table
    • Search in File contents (pdf, word, excel etc..)
    • Search in Users
      • User meta fields
    • Limits (number of results)
    • Categories and terms as results
    • Image options
    • Result ordering
    • Peepso Groups & Group activities search
    • Grouping title duplicates
  • Behavior
    • Return/Enter key and Magnifier icon click actions
    • Search logic (primary and secondary)
      • Exact Matches vs Fuzzy Matches
      • Search logics explained
    • Live search triggering events
    • Results page override
    • Results, Archive Page and Shop Live Search and Filter
  • Elementor Integration
    • Elementor Pro Posts Widget Live Filter
    • Elementor Loop Grid Integration
    • Elementor Pro Product Widget Live Filter
    • Custom results page with Elementor Pro
    • Elementor custom search page archive override and live filter
  • Other Integration
    • Jet Engine Listing Grid Integration
  • Multisite Settings
  • Frontend Search Settings & Search Filters
    • Settings layout, position and visibility
    • Generic Selectors
    • Content Type filters
    • Date filters
    • Category and Taxponomy term filters
    • Post type Filters
    • Custom field filters - selectors
    • Search button
    • Reset button
  • Layout Settings
    • Result Layout Types
    • Results information box
    • Results position & snap
    • Content, author, date and description in results
    • More results loader and infinite scroll feature
    • Results behavior
    • Results text keyword highlighter
    • Compact search box layout
    • Auto Populate - Automatic search results on initial page load
  • Autocomplete and Keyword suggestions
    • Autocomplete
    • Results and Keyword suggestions
    • "Try these" - suggested phrases
  • Theme Options - Visual changes to the search bar
    • Theme chooser
    • Preview
    • Search box and input field layout
    • Settings and Magnifier icon
    • Settings dropdown
    • Typography
  • Index Table
    • Generating the index table
    • Enabling index table engine
    • File Content Search Addon
    • Index table FAQ
    • Synonyms
  • Relevance Options
  • Advanced Options and Uses
    • Using the Results shortcode as a custom results page
    • Shortcodes in results content
    • HTML tags in results
    • Primary and Secondary title and description fields
    • Advanced title and Content fields
      • User Search - Advanced Title and Content fields
    • Excluding & Including results
      • Exclude by category or terms
      • Exclude or Include by authors (users)
      • Exclude or Include by date
      • Exclude by Item or ID
      • Include by ID
      • Include by categories or terms (restrict to category)
      • Exclude or Include by custom field values
    • Grouping results
    • Keyword Exception & Exclusions
  • Result priority settings
    • Individual Priorities
    • Priorities by Rules (priority groups)
  • Performance Tuning
    • Fine tuning the search configuration
    • Cache
    • Visual performance
    • Ajax performance tracker
  • Compatibility Settings
    • Javascript Compatibility
  • Google Analytics Integration (GA4)
    • Tracking with Google Site Tag (gtag.js)
    • Tracking with Google Tag Manager
    • Site Search Tracking
  • Troubleshooting
    • Styling issues
    • The response data is missing from the ajax request error message
  • Translating components
    • Translating with WPML
    • Translating with Polylang
  • Pre-Purchase FAQ
  • Plugin API
    • Actions list and usage
    • Filters list and usage
    • asp_query_args filter
    • Theme functions
    • Front-end filters API
    • Javascript API
  • Other Useful Things
    • Additional search keywords for post types
    • Negative keywords
    • Meta box on post editor screen
Powered by GitBook
On this page
  • Prerequesites
  • The custom results page
  • Making a WordPress page first
  • Elementor widget configuration
  • Search bar configuration
  • Live search Triggers
  1. Elementor Integration

Custom results page with Elementor Pro

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

PreviousElementor Pro Product Widget Live FilterNextElementor custom search page archive override and live filter

Last updated 1 month ago

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

Pros

Cons

Easy to use

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

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.

This works the very similarly the or . In fact, the pages from those tutorials can be used as results pages.

There is no "No results" text available for these widgets currently in Elementor. You can join the

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

Elementor
Elementor Pro
Posts
Products widget live filters
Getting Started
request thread here
Elementor Loop Grid as Results Page tutorial
Create a new page
Edit with elementor for the next step