Step 1: Configure General Settings
Navigate to WordPress Dashboard > Smart Filters > Settings.
In the General Settings tab, activate toggles for all widgets you plan to use with filters.
Step 2: Create Filters
Go to Smart Filters in your WordPress Dashboard.
Create the necessary filters according to your requirements.
Step 3: Set Up Widgets for Filtering
Open the page in Elementor/Bricks or Blocs editor and follow the instructions for each widget type.
Listing Grid
Add the Listing Grid widget to the page and select your listing template.
In the Content settings of each filter, select the filter you just created and specify the filter’s target, such as JetEngine.
Elementor Loop Grid
In the Select Filter field, choose the filter you created. In the This filter for field, choose Elementor Pro Loop Grid. Set additional settings as needed.
Enable the "Is Filterable" toggle in the Loop Grid widget settings.
Bricks Query Loop
To filter items in the Query Loop, enable the "Is Filterable" toggle.
In the This filter for field, select Bricks Query Loop.
Step 4: Assign Each Filter to Specific Widgets
To ensure each filter interacts only with its designated widget:
Click on the Listing Grid widget and go to Advanced settings.
In the CSS ID field, add a unique identifier (e.g.,
grid-1).
Copy this ID.
Return to the filter widget you want to assign to this Listing Grid and paste the ID into the Query ID field.
Repeat this process for any additional filters and widgets.
Note: If you have different widgets, such as Listing Grid and Map Listing, you can still assign the same filter by giving each listing and map a unique ID and then adding those IDs to your filter, for example:
Step 5: Test and Finalize
Once all settings are configured, check the page to ensure each filter operates correctly with its designated widget.
Now, your filters are fully customized, and your page is ready for a streamlined user experience!