Help Center

Checkboxes Filter Overview

Checkboxes Filter Overview

From this tutorial, you’ll get detailed information on how to create a new filter and apply it to different publication types using the JetSmartFilters plugin.

Checkboxes Filter is a feature that lets users select several options to filter the content on a page; it can be used on any Block Editor/Elementor/Bricks edited pages.
The filter can be built by proceeding to the WordPress Dashboard > Smart Filters > Add New page.

Filter Settings

The starting point is completing the following fields:

checkboxes list filter type
  • Filter Name — a name that will identify a current filter;
  • Filter Type — a list of options that contains different kinds of filters. Now the “Checkboxes list” option should be selected.

Data source

The only field appearing after the Filter Type selection is Data Source. The option picked in this selector defines the settings available next.

The Data Source defines where the data to filter the content will be pulled. Among the options are: “Taxonomies,” “Manual Input,” “Posts,” “Custom Fields,” “JetEngine Custom Content Types,” “JetEngine Glossary,” and “JetEngine Query Builder.”

data source list

Filter Labels

Filter labels can be adjusted in the corresponding part of the settings:

filter labels
  • Filter Label — a label that can be displayed next to the filter;
  • Active Filter Label — a label shown if the filter is active.

Checkboxes Filter Widget in Elementor

The Checkboxes Filter widget is available in the Elementor Page Builder. The widget contains the following settings:

Content

checkboxes filter content settings
  • Select filter — a bar where the name of the filter should be put so it appears on the page;
  • This filter for — a provider list to pick the widget to which the filter will be attached;
  • Apply type — a field to choose a way the filter will work. Presented options: “AJAX,” “Page Reload,” and “Mixed.” “AJAX” displays results without reloading the page, “Page Reload” reloads a page, and “Mixed” doesn’t reload a page but transforms the page URL;
  • Apply on — a field to pick when the filter is applied: once the value change or by clicking the “Apply” button;
  • Show apply button — a switcher to be activated if the “Click on apply button” option is selected in the previous Apply on selector;
  • Show filter label — a toggle that shows a filter label above the filter;
  • Query ID — a field that can be used if there are several widgets of the same type on the same page, and one is supposed to be used as a provider. For instance, if there are two Listing Grids on the page and only one should be filtered, the Listing Grid settings (Advanced tab) should be opened, and its unique name should be set in the CSS ID field and then put here, in the Query ID field of the filter;
  • Additional Providers Enabled — a toggle to be enabled if several widgets should be filtered.

If the Additional Providers Enabled toggle is switched on, more settings are displayed:

additional providers enabled feature
  • Additional Provider — a drop-down list to select an extra provider;
  • Additional Query ID — an ID to be set if several identical widgets are on the page. Works as the Query ID field described earlier.

Additional settings

Search enabled

search enabled feature
  • Search Enabled — a toggle that activates search above the filter;
    • Search Placeholder — a text displayed in the search bar that can be changed.

More/less enabled

more or less enabled feature
  • More/Less Enabled — a switcher that shows the “More/Less” labels below the filter to hide/show items. If activated, the following fields appear:
    • Less Items Count — a field where the number of items displayed by default should be specified;
    • More Text — a text on the “More” button;
    • Less Text — a text on the “Less” button.
dropdown enabled feature
  • Dropdown Enabled — a feature that hides options in a dropdown list. Once activated, the following features appear:
    • Placeholder — a text displayed in the dropdown;
    • N Selected — a feature that hides options labels and shows a number of selected options after the N-item:
N selected
n selected feature
  • Number of Named Items — a field where the number of shown labels can be specified. For instance, if “3” is set, after three labels, there will be a text “and 1/2/3… others” shown;
  • Generic text — a text displayed after labels. Mind that a {number} macro should be used in the text to generate value afterward.
scroll enabled feature
  • Scroll Enabled — a feature that adds scroll next to Checkbox;
  • Scroll Height(px) — a field to complete the height of the scroll in pixels.

Checkboxes Filter Block in Gutenberg

In the Block Editor, the same settings as in Elementor are presented.

checkboxes block in gutenberg

One more settings tab available in Block Editor is Indexer Options.

checkbox indexer options settings in gutenberg
  • Apply Indexer — a switcher that activates indexer, a feature that shows how many items match a filtering option; 
  • Show Counter — a toggle that enables a counter next to the option;
  • Counter Prefix — a prefix before the counter;
  • Counter Suffix — a suffix after the counter;
  • If Item Empty — a selector to pick whether the item will be shown, hidden, or disabled once it has no items attached;
  • Change Counters — a dropdown field where the counter behavior can be altered: whether they always be altered, never, or once other filters are changed.

The following Advanced tab includes one field:

checkboxes advanced settings in gutenberg
  • Additional CSS Class(es) — a field for CSS class(es) to alter the appearance of the block. Multiple classes can be separated with spaces.

Checkboxes Filter Element in Bricks

Checkboxes Filter element available in Bricks also repeats the settings used in Elementor. There is a General tab with the main settings:

checkboxes filter in bricks general settings

And also Additional Settings are presented. Here, except for the already known features described earlier, one more field is displayed:

checkboxes filter in bricks additional settings
  • Show Checkbox — a toggle that hides checkboxes next to the options if deactivated.

Result

The result can be seen on the front end after one of the pages built with the preferred editor is published.

checkbox on the front end

Checkbox Filter can now be tested in action:

checkbox enabled

That’s it; now you know how to use the Checkboxes Filter available with the JetSmartFilters plugin on your WordPress website.

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.