Help Center

Active Filters Overview

Active Filters Overview

This guide teaches you how to use the JetSmartFilters plugin's Active Filters feature to allow visitors to see what filters are applied and disable unnecessary ones.

Active Filters Widget in Elementor

The Active Filters widget can be placed on the page/post/template in the Elementor editor.

active filters widget in elementor

The Content settings tab contains such options:

active filters widget settings
  • Show active filters for — a drop-down menu with a filter provider list. Filters on the page are applied to one or more provider widgets (e.g., the Listing Grid widget), and the Active Filters widget should be applied to these providers, too. The main provider can be selected from this drop-down menu; if there are more filter provider widgets on the page, they can be set in the Additional Providers List option described below;
  • Apply type — a field to choose a way the widget will work. When one turns off a filter from the filter list, “AJAX” displays new results without reloading the page, and “Page Reload” reloads a page;
  • Label — an input field to set the label for the filter list;
  • Query ID — a field that can be used if several widgets of the same type are 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 and Active Filters widget;
  • Additional Providers Enabled — a toggle to be enabled if several provider widgets should be filtered. Read more about this option in the Additional Providers List Option Overview. You can also check the How to Apply Filters to Several Widgets on a Page tutorial.

The Style settings tab provides various adjustments for customizing the Active Filters widget. The widget’s title, filters, and items can be styled here.

Active Filters widget style settings

The changes can be saved by clicking the “Publish/Update” button.

Active Filters Block in Gutenberg

The Active Filters block can be placed on the page/post/template in the WordPress block editor.

active filters block in gutenberg

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

active filters block settings

The Block Style settings are available with the free JetStyleManager plugin.

active filters block style settings

The changes can be saved by clicking the “Publish/Update” button.

Active Filters Element in Bricks

The Active Filters element can be placed on the page/post/template in the Bricks editor.

active filters element in bricks

This element also repeats the settings used in Elementor.

active filters element settings

The Style settings are presented in the LIST, ITEMS, and LABEL tabs.

active filters element style settings

The changes can be saved by clicking the “Save” button.

Results

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

When filters are not applied, the Active Filters widget, block, or element is hidden.

hidden active filters

If some filters are applied, the Active Filters widget/block/element appears with the filter labels and chosen options from them.

active filters on the front end

To disable filters, the “cross” icon should be clicked near the active filter.

disabling filters with the active filters feature

That’s all. Now you know how to display active filters and allow visitors to disable them using 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.