The Default Value setting of the JetSmartFilters plugin’s Checkboxes List, Select, Range, Check Range Filter, Date Range, Date Period, Radio, Rating, Alphabet, Search, and Visual filters allows predefined values to be set as the default ones and displays the predefined data on the front end via the appropriate widgets, blocks, and elements.

The tutorial considers the metafield data usage for single-select filters and taxonomies usage for multichoice filters.

This tutorial section covers the Radio Field, Select Range, Date Range, Date Period, Search, and Rating filters.

Here, we consider the case of first displaying the items with the predefined values in the meta field (the scenario of displaying the hot deals first). 

In the given case, the “Hot Deal” Radio meta field contains data on whether or not the proposition is included as a hot deal. The ID of this meta field is “_hot-deals,” and the meta field can include two values 一 “Yes” or “No.”

Here, we created a listing item in Elementor and displayed the necessary meta field data with the Dynamic Widgets. To display the hot deals, we placed the Dynamic Field widget, set the “Meta Data” Source, and picked the needed Meta Field. As the Field Icon, we set the “fire” icon. 

Then, we updated the listing item.

The tutorial details How to Create Listing Template for Post Types.

Create a Radio filter

Navigate to the WordPress Dashboard > Smart Filters > All Filters tab and press the “Add New” button to create a filter. 

In the Filter Name field, type the filter name.

Choose the “Radio” Filter Type.

Navigate to the Data Source field and select the “Custom Fields” option from the drop-down list.

In the Custom Field Key, type the ID of the meta field (here, “_hot-deals”).

Move the Get Choices From Field data toggle and select the needed plugin (here, the “JetEngine” option) from the Field Source Plugin drop-down menu.

Scroll down the filter’s settings tab and type the ID of the meta field (here, “_hot-deals”) in the  Query Variable field.

Select the “Equals (=)” option from the Comparison operator drop-down menu. Then, move the Default Filter Value toggle and type the needed value of the meta field (here, the “Yes” text).

Fill in the Filter Label and Active Filter Label fields (optionally).

Press the “Update” button to save the filter.

Create Pages in Elementor/Block Editor/Bricks

To apply the filters, we created posts for filtering and a Listing Template for these posts (as we described earlier), then created a page in Elementor/Block Editor/Bricks and divided it into columns.

We recommend adding the filter widgets/blocks/elements to the first column and the Listing Grid with posts to the second column.

Add the Radio Filter widget in Elementor

Find the Radio Filter widget and drag and drop it to the first column. 

Unroll the Content settings and select the built Radio Filter for the Select filter field. Pick the “JetEngine” option in the This filter for drop-down menu.

Press the “Publish/Update” button and navigate to the front end to see the filter in action.

On the front end, the Radio Filter widget displays only posts with the prespecified values. 

Add the Radio Filter block in the Block Editor

Find the Select block and drag and drop it to the first column. Unroll the General settings block and choose the built Radio Filter for the SELECT FILTER setting field. Pick the “Listing Grid” option in the THIS FILTER FOR drop-down menu.

Press the “Publish/Update” button and navigate to the front end to see the filter in action. The Radio Filter block displays only posts with the prespecified values. 

Add the Radio Filter element in Bricks

Find the Radio Filter element and drag and drop it to the first column. The Radio Filter element in Bricks has the same settings as in Elementor: unroll the GENERAL settings block of the CONTENT tab and choose the built filter for the Select filter setting field. In the This filter for drop-down menu, pick the “JetEngine” option.

Press the “Save” button and navigate to the front end to see the filter in action. It displays only posts with the prespecified values.