Back to contents

JetSmartFilters: How to Use the Checkboxes Filter


This tutorial will help you to learn how to create a Checkboxes list filter using JetSmartFilters plugin functionality.

JetSmartFilters plugin includes a set of really useful sorting tools. If you master all the widgets it can offer, you will be able to create a convenient filtering block that is going to make the user experience more pleasant for the visitors of your website. And this tutorial will help you to get along with the Checkboxes list. So, how to create a Checkboxes filter?

1 Step — Add new filter

First of all, open your WordPress Dashboard, and navigate to the Smart Filters tab. Click the “Add New” button to open the creation window. Type in the Name of the filter, Filter Label, and Active Filter Label.

filter settings

2 Step — Define the Checkboxes filter’s settings

In the Filter Type dropdown select the “Checkboxes list” option. The next thing you have to define is Data Source. There are four options there:

  • Manual Input. In this case, you choose to input all the data manually. The options that will become the checkboxes list won’t be taken automatically from some source but typed in by you. After clicking the “New Option” button you will have to insert the options Label and Value. You can add as many options as you need and they all will be displayed as list further;
  • Taxonomies. If you choose this option, then the taxonomy you created will be used to form a list of options. You will be asked to pick, actually, the Taxonomy and define the Relational Operator. The other setting toggles give you an opportunity to decide how the parent and child taxonomies will be shown in the list;
  • Posts. This field type is the best if you have a custom post type and would like to show the posts, created for it as a list of options. After choosing this type you will just have to pick what Post Type you want to display and that’s all;
  • Custom Fields. This filter type uses the list of options you have already created in the meta field. It will be automatically used as a sorting options list. Type in the name of the field to the Custom Field Key bar and turn the Get Choices From Field Data toggle on.

When you are done – click on the “Publish” button to proceed.

3 Step — Add the Checkboxes Filter widget to the page

Open the needed page in Elementor page builder and drag-n-drop some Listing Grid to the section. Afterward, drop the Checkboxes Filter to the section.

checkboxes filter widget

Go to the Content settings block and in the Select filter drop-down list choose the filter you’ve created before. Select the “JetEngine” option in the This filter for feature, define the Apply type and Apply on. If you want the filter to be applied to a specific widget, then type in its CSS ID to the Query ID bar. The CSS ID could be set in the Advanced settings tab of the targeted widget.

smart filters content tab

Open the Additional Settings tab where you can enable Search, More/Less, Dropdown and Scroll options.

Search Enabled. This option allows you to search inside the filter easily.

More/Less Enabled. Specify the number of filter items that will be displayed on the page load. The rest of the filter items will be seen after you click on More button. These labels can be changed in More Text and Less Text fields.

Dropdown Enabled. Make your filters look compact with the help of this option. That’s the easiest way to make the Checkboxes filter items list expandable.

Scroll Enabled. Use this option to add a scrollbar to the filter items list with the ability to specify the scroll height in pixels.

Additional Settings available only for Checkboxes, Radio, Check Range and Visual filter types.

When you’re done with the customization click on the “Publish” or “Update” button and preview the result.

checkbox filter meta gif

Try creating other Checkboxes filters using the JetSmartFilters plugin.