Elementor

The Search & Filter – Elementor Extension allows for seamless integration between Elementor and Search & Filter.

With this extension, Search & Filter will now be able to directly integrate and filter the following Elementor widgets:

  • Loop Grid
  • Loop Carousel
  • Posts
  • Archive Posts
  • Products
  • Archive Products
  • Portfolio

Install + activate the extension

To get started first we need to enable the integration in our integrations screen.

Ensure you have Elementor enabled.

Then from the Integrations screen, click install extension.

The extension plugin will be automatically downloaded in the background and then enabled.

Create a query

Head to Queries in the main navigation, then press Add New to create a new query.

Ensure that location is set to dynamic and then choose Elementor Widget from the query dropdown:

Give your query a name, hit save and your query is good to go.

Create a field

After saving your query, you’ll find your connected fields below. There won’t be any initially – press Add New to create one.

From here you can create as many fields as you need and connect them to the same query.

Adding fields to your site

Once you’ve created some fields, you can add them to your Elementor site using the Search & Filter Field widget.

Once you’ve added the widget to your page you can choose the field you created earlier from the dropdown:

  • Head to the Query panel
  • Choose Search & Filter as the source
  • Then choose your query from the dropdown

Once connected Search & Filter is now ready to work with your grid + carousel.

Filtering Archives

Search & Filter will automatically integrate with archives built with Elementor.

Usually for an Archive template you’ll want to use an archive widget:

  • Archive Posts
  • Archive Products

Or you can use one of the following widgets:

  • Loop Grid
  • Loop Carousel
  • Posts
  • Products

For these widgets, it’s recommended to set to set the Query Source to use the Current Query:

When setting up an archive using the Current Query or using the Archive Posts or Archive Products widgets, the Search & Filter query must also be configured to use the archive query: