Help Center

Knowledge base Plugins JetSmartFilters How to Apply Filters to Elementor Pro Loop Grid via Addon

How to Apply Filters to Elementor Pro Loop Grid via Addon

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

Before you start check tutorial requirements:

Warning

Before you start, navigate to the Elementor > Settings > Features tab and ensure that the Loop feature is "Active." If not – set the "Default" or "Active" option and click the Save Changes button.

elementor loop feature

How to Enable the Elementor Pro Loop Grid Provider

Download the addon from the GitHub page. Proceed to the Plugins > Add New tab on the WordPress Dashboard and hit the “Upload Plugin” button. Install and activate the addon as a usual WordPress plugin.

Elementor Pro Loop Grid addon installed and activated

As you can see, the “Elementor Pro Loop Grid” option is now available for filters on the Elementor editing page.

elementor pro loop grid provider

Create a Filter

Follow the 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, I created the Search Filter, where I selected the “Default WordPress search” Search by option.

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

search filter for loop grid

Create a Page with Loop Grid and Filter

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

I drag-n-dropped the Loop Grid widget and displayed the Post Title and Featured Image in the template.

Warning

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

To learn more about Loop Grid creation, proceed to the How do I build a Loop Grid? tutorial.

Place a filter widget on the editing page; for example, I used 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 settings

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

Filter and Loop Grid on the Front End

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

filter and loop grid on the front end

Check how the filter works.

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.