Elementor Pro

The Elementor Pro Posts Widget allows you to display your posts in a grid format, or masonry layout.

To integrate with this widget is fairly straight forward

Basic Setup

  • Add the Posts Grid to your page
  • Before the Posts Widget, tell S&F that it needs to filter the grid by adding a Text Area (don’t use a HTML element, shortcodes won’t work properly) and adding our filter_next_query shortcode:
    [searchandfilter id="123456" action="filter_next_query"]

    Replace “123456” with the ID of your search form

  • Add the Search & Filter form to your page using the shortcode or by adding a widget – [searchandfilter id="123456"]
  • In your search form, under Display Results tab, choose Custom Display Method, and enter the Full URL of the page with the Elementor Posts widget
  • Don’t worry about the Query Settings in the Elementor Posts Widget, Search & Filter replaces these

That’s it you’re good to go!

Using Ajax

In your Search Form, under Display Results, use the following settings:

  • Enable Load Results Using Ajax
  • Set Ajax Container .elementor-widget-posts
  • Set  Pagination  Selector to .elementor-pagination a

Masonry & Ajax

When results get loaded in via Ajax, masonry is not usually applied.  To enable masonry with Ajax, add this JS code to your theme

(function ( $ ) {
	"use strict";
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){


In some environments there seems to be one snag.  The Elementor Pro Posts widget was never designed to deal with a “no results” scenario.  This can cause a JavaScript warning (tied in with the Elementor UI), however it does not seem to break any operation.  This does not apply to all cases, so it’s best to check your JS console in your setup.

If you are getting this JS error, our recommendation is to carefully craft your filters to avoid “no results” scenarios.

This can be guaranteed by enabling our setting in your search form – Auto Count  – and avoiding the use of the following fields:

  • Search Field
  • Post Meta Ranges
  • Date Ranges

Then in each individual field, where applicable, enable the Hide Empty option.

Following the above, no matter what your user’s select, you should always return results, and avoid this JS error.

WooCommerce Shop

To integrate Search & Filter Pro, WooCommerce and Elementor Pro, all you need to do is:

  1. In wp admin, head to Templates -> Theme Builder -> Add New-> Product Archive (check the Elementor Docs for more info) and create your custom layout / design.
  2. In Search & Filter Settings, set Display Results Method to WooCommerce Shop


AnyWhere Elementor Post Block

As of writing, Search & Filter works with AnyWhere Elementor Post Blocks, with one difference:

  1. Set Ajax Container to .ae-post-layout-grid