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:
Elementor Pro plugin installed and activated
JetSmartFilters plugin installed and activated
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.
As you can see, the “Elementor Pro Loop Grid” option is now available for filters on the Elementor editing page.
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.
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.
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.
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.
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.