Help Center
How to Set Query Builder Switcher Data Source in Select and Radio Filters

How to Set Query Builder Switcher Data Source in Select and Radio Filters

Find out how to set Query Builder Data Source in Select and Radio filters from JetSmartFilters.

Before you start, check the tutorial requirements:

  • Elementor (Free version) or Block editor (Gutenberg)

  • JetSmartFilters plugin installed and activated

  • JetEngine plugin installed and activated with two or more queries of the same Query Type built

The “Query Builder Switcher” is one of the Data Sources available for the JetSmartFilters’ “Select” and “Radio” Filter Types if the JetEngine plugin is installed on the WordPress website.

This source allows switching between the Query Builder options on the front end. One “Query Builder Switcher” source-based filter and one Listing Grid can display different queries, avoiding the need for several Listing Grid widgets.

Create Filter

Go to WordPress Dashboard > Smart Filters > Add New to create a new filter. 

Complete the Filter Name and head to the Filter Settings section.

Pick either “Radio” or “Select” Filter Type.

Now, we choose the “Select” option.

select filter type

Choose the “JetEngine Query Builder Switcher” Data Source and pick the needed query options in the Select Query field.

For instance, we use “All Books,” “Paper books,” “E-books,” and “Audio books” queries.

select query field in the filter settings

Change the Placeholder if needed and leave the Is Checkbox Meta Field (Jet Engine) toggle unactivated.

Proceed to the Query Variable field. Press the “Dynamic Tags” button to see the presented ready-to-go options. Сhoose the “Switch JetEngine query” option.

query variable field options

Leave the “Equals (=)” option in the Comparison operator field and head to the Filter Labels section.

Fill in the Filter Label and Active Filter Label fields to finish the setup.

Click the “Update” button to save the result.

filter labels
Things to know

The same settings should be used if the “Radio” Filter Type was selected.

There are two more toggles in the “Radio” Filter Type settings: Add all option and Ability to deselect radio buttons. They are optional.

radio filter settings

Adjust Content

Navigate to the WordPress Dashboard > Pages directory and press the “Add New” button or open the page you have built beforehand.

The page can be edited in Elementor, Block Editor, or Bricks Builder.  

Place the filter widget (Select Filter or Radio Filter) and the Listing Grid widget on the page. Select the needed Listing for the Listing Grid widget.

listing grid widget in elementor

In the filter settings, complete the Select Filter field with the newly created filter’s name.

Pick the “JetEngine” option as a filter provider in the This filter for field.

Complete the Query ID with a value set in the query in advance.

select filter settings

If you haven’t set Query ID, you can do it in the General Settings section of the WordPress Dashboard > JetEngine > Query Builder directory.

Warning

All queries used for filter options must have identical Query IDs.

query id field

The same ID should be attached to the Listing Grid widget. Head to the Edit Listing Grid > Advanced > Layout section and paste the needed value in the CSS ID field.

listing grid css id field

Go to the Content tab and open the Custom Query section. Here, activate the Custom Query toggle and choose the item used by default in the filter. In our case, it is “All Books.”

listing grid custom query toggle

Optionally, complete the rest of the settings and hit the “Publish/Update” button.

Things to know

For the Radio Filter widget, the settings should be adjusted the same way as for the Select Filter widget.

radio filter settings in elementor

Check Result

Go to the front end of the edited page. If we adjusted the settings correctly, the “Select” filter options should represent the set queries.

option picked in the select filter

Or, if the “Radio” Filter Type was created, options will be displayed in the form of radio correspondingly.

option picked in the radio filter

That’s all about the “Query Builder Switcher” Data Source available as a part of the JetSmartFilters and JetEngine plugin functionality.

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.