Elementor Pro Product Widget Live Filter
Prerequesites
Elementor Pro is required, as unfortunately the free version does not contain the Posts widget.
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
Creating the search
You can create a new search instance, but use an existing one, if you have one. If you are new to the plugin, please check the Getting Started section first.
Elementor Product Widget is meant to display Products and nothing else - so no other post type or content type works, even if the search is configured to search them.
In this tutorial we are using the following configuration.
Elementor Pro Products widget page
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..
Once the text is copied/noted, create or open an existing page within the Elementor page editor. We are using a two-column page layout. To the left column goes the posts widget, and to the right goes the search shortcode.
Look for "products" within the widget finder, and drag the "Products" widget to the desired position (to the left column in our case)
Make sure to use the Products widget and not the Archive Products - it does not work on single pages.
Open up the Posts Widget options, and navigate to the Advanced Options panel.
When done, look for the "shortcode" widget and drag it to position (to the right column in our case)
To the shortcode widget, enter the search shortcode, that you want to use. You can find the search shortcode under the "Ajax Search Pro" menu.
Copy and Paste the shortcode into the shortcode widget, hit "Apply" and save the page.
That's it! Open up the page, clear the cache, and the plugin should now actively filter the products widget!
Live search Triggers
If the plugin shortcode is present on the same page as the widget, 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
