Help Center
How to Apply Filters to Elementor Pro Loop Grid

How to Apply Filters to Elementor Pro Loop Grid

This tutorial shows how to enable the Elementor Pro Loop Grid provider for the JetSmartFilters plugin. Learn how to create a Loop Grid with Elementor builder and apply filters to the Loop Grid widget.

Before you start, check the tutorial requirements:

Before you start, navigate to WordPress Dashboard > Smart Filters > Settings and activate the Elementor Pro Loop Grid toggle in the General Settings tab.

elementor pro loop grid toggle

The “Elementor Pro Loop Grid” option is now available for filters on the Elementor editing page.

Create a Filter

Follow the WordPress Dashboard > Smart Filters > Add New path. Create any filter to use further with the Loop Grid. To learn about all filter types creation processes, proceed to the JetSmartFilters page, scroll down to the Types of Filters chapter, and select the desired step-by-step tutorial.

For example, we created the Search Filter, where the “Default WordPress search” Search by option was selected.

When you finish setting the filter, press the “Update” button.

filter settings

Create a Page With a Loop Grid and Filter

Move to the WordPress Dashboard > Pages > Add New tab. Add a title for the page and push the “Edit with Elementor” button.

Drop the Loop Grid widget on the page. For instance, we have displayed the Post Title and Featured Image in the template.

Warning

Make sure to enable the Is Filterable toggle in the Loop Grid widget settings.

To learn more about Loop Grid creation, proceed to the Build a Loop Grid tutorial.

loop grid settings

Place a filter widget on the editing page – for example, the Search Filter widget – to display the search filter. 

In the Select Filter field, pick the created filter, and choose the “Elementor Pro Loop Grid” in the This filter for field. Set other settings according to your needs.

search filter widget settings

When you finish, hit the “Publish/Update button.

Filter and Loop Grid on the Front End

Open the page with the filter and Loop Grid on the front end.

search and loop grid

Check how the filter works by typing the needed search query.

working search

That’s all. Now you know how to apply filters created with the JetSmartFilters plugin to the Loop Grid widget from the Elementor Pro plugin.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.