Elementor Pro Product Widget Live Filter

Prerequesites

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

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.

General Options
Front #1
Front #2
Front #3
General Options
Front #1
Front #2
Front #3

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.