How to Use Search and Filter Plugin in Elementor

Last modified: April 5, 2023

Elementor

Search and filter options can help audiences on your website get the content they need or find the products they want. There are numerous search plugins as well as other filter plugins. You might also want to use one that combines the two functions. However, that isn’t the only option that is available to you. There are options within the Elementor plugin, for instance, the search and filter extension can be easily integrated into your website.

With the extension, Search & Filter will allow you to integrate the following widgets into your website.

Loop Grid
Posts
Archive Posts
Products
Archive Products
Portfolio

There are different setup instructions for each of these elements.

* This button will show the rest of the post and open up an offer from a vendor

The Loop Grid Widget

The loop grid is a great option that has been added later to the Elementor widget family. To get it going, you need to either be using Elementor 4. To enable it when using Elementor 3.9 or lower, then you need to go to your dashboard, then head to Elementor, Settings, Experiments, and then Activate Flex Box + Loop.

To add the Search and Filtering to Loop Grid. You can access the page that you want to add it to. Then In Query choose Source and then choose the Search & Filter Query. Then you can choose the Search & Filter Query you would like to connect with.

Then you need to add your ‘Nothing Found’ message, and then in the Search Form, you can then set the display method to Elementor Loop Grid Widget. And you also need to ensure that you set the results URL to the page with the widget. And you will also need to enable Ajax.

Infinite Scroll

To enable infinite scroll with the Loop Grid widget, you need to ensure that you’ve set pagination to none in the widget settings. For this, you should enable infinite scroll in the search form settings. And that is all you need to do.

Posts, Portfolio & Product Widgets

For this, you need to add the desired Elementor Widget to the page and then go to Query and then Source, and choose the option for Search & Filter Query. You then need to choose the Search & Query you would like to connect with. You should also add a ‘Nothing Found’ message to your settings.

In the Search Form, you need to make sure the display method is set to Elementor Post/Product/Portfolio/Loop Grid Widget. And you will need to set the results URL to your page with the widget and enable Ajax.

Final Word: How to Use Search and Filter Plugin in Elementor

There are many uses for Search and Filter plugin in Elementor. Adding these to your site allows you to have the best experience for your users and can help them find the information that they need. And therefore, you can build a more successful brand that can attract the sales and revenues that you need to be a success across the world. If you have any other tips for how to use the Search and Filter plugin in Elementor, then comment below.

Recap: