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.
If using a custom query, ensure you configure the Query Builder to include the correct data source and assign the same Query ID across the query, filters, and grid.
4. Ensure that Query IDs are unique and consistent wherever they are used to avoid interference between different filters or grids on the same page. This is particularly vital in multi-grid scenarios.
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.
When assigning a Query ID, use consistent and descriptive names to ensure the filters interact with the intended widget. Avoid special characters like symbols and hashtags to prevent conflicts.
Troubleshooting Filters and Widgets
Verify ID Matching: Ensure the Filter ID, Query ID, and widget settings have identical IDs for proper functionality. Double-check for typos, spaces, or uppercase letters.
Prevent Overlap: Use unique IDs unless sharing functionality across filters and widgets is intentional.
Test Scenarios: Assign unique IDs to each widget and associated query in multi-grid or complex widget setups. If the filter isn't working, revisit the ID assignments for conflicts or reuse issues.
Common Errors: Avoid using spaces, special characters, or uppercase letters in IDs, which can lead to conflicts.
By addressing these areas, you ensure precise control with JetSmartFilters even in multi-grid setups.
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!