How to Use Search and Filter Plugin in Elementor

The Loop Grid is Elementor’s flexible repeating layout widget. It’s available natively in Elementor 4.0 and higher. If you’re on Elementor 3.9 or earlier, enable it first by going to your WordPress dashboard, then Elementor, Settings, Experiments, and activating Flex Box + Loop.

To connect Search & Filter to the Loop Grid widget:

1. Open the page in Elementor and add or select the Loop Grid widget.
2. In the widget settings, go to Query, click Source, and choose Search & Filter Query.
3. Select the Search & Filter search form you want to connect from the dropdown that appears.
4. Add a Nothing Found message to the widget settings so users see feedback when no results match.
5. Save the page, then open your Search & Filter Pro dashboard. Go to the connected search form, find the Display Results settings, and set the display method to Elementor Loop Grid Widget.
6. Set the Results URL to the exact URL of the page where the Loop Grid widget lives.
7. Enable Ajax in the search form settings so results update without a page reload.

Save the form and test the filter on the frontend.

Infinite scroll with Search & Filter automatically loads additional results as the user scrolls down, without pagination links or page reloads. To set it up with the Loop Grid widget:

1. In the Loop Grid widget settings, go to Pagination and set it to None. Do not use the built-in Elementor pagination alongside the Search & Filter infinite scroll, as they conflict.
2. In your Search & Filter Pro dashboard, open the search form connected to this Loop Grid widget.
3. Go to Results Options and enable Infinite Scroll.
4. Save the form and test on the frontend by scrolling past the initial set of results.

If infinite scroll is not loading additional results, check these common causes: the results URL in the search form does not exactly match the page URL where the widget is placed (including or excluding trailing slashes matters); Ajax is not enabled in the search form settings; or a caching plugin is serving a static version of the page. Clear all caches after any change to the search form settings.

The connection process for Posts, Archive Posts, Products, Archive Products, and Portfolio widgets follows the same pattern as the Loop Grid:

1. Add the desired Elementor widget to the page and open its settings.
2. Go to Query, click Source, and choose Search & Filter Query.
3. Select the search form you want to connect from the dropdown.
4. Add a Nothing Found message to the widget settings.
5. In the Search & Filter Pro search form settings, set the display method to match the widget type: Elementor Post Widget, Elementor Product Widget, Elementor Portfolio Widget, or Elementor Loop Grid Widget as appropriate.
6. Set the Results URL to the URL of the page containing the widget and enable Ajax.

Save the form and test filtering on the frontend. If the Ajax filter updates the URL but does not change the displayed results, the most common cause is a mismatch between the display method selected in the search form and the actual widget type on the page.