Back to contents

JetSmartFilters: Visual Filter Overview

In this overview, you will find out about the Visual Filter from the JetSmartFilters plugin and its general settings.

Global Settings

Give a title to the filter and proceed to the following editing steps.

visual filter primary settings

Filter Labels

Filter Label

The value typed in here will be defined as the filter title. It can be used as the label displayed next to the filter.

Active Filter Label

A label that is displayed in the Active Filters and Active Tags blocks for Gutenberg or widgets for Elementor.

Visual Filter Settings

Filter Settings

filter type dropdown menu

Filter Type

A drop-down menu that lets you pick the desired type from the various options. Select the Visual filter.

Data Source

visual filter data source

A list that allows selecting from where the data will be pulled. Select the most suitable variant to filter the needed options from a particular data source.

Manual Input

Define all the values by setting them up manually. The options will not be pulled automatically. The manual input source opens the possibility to enter your own values. As an example, it can be color options or images set by you as meta field values.

Taxonomies

Once chosen, this option will take the data from the selected taxonomy. For instance, it can be categories, tags, or product taxonomies if you work with an online shop.

Posts

This option refers to the post types. Select the default WordPress post type or custom post type created manually to filter it with the built filter.

NOTE
There are two other options shown for selection — JetEngine Custom Content Types and JetEngine Glossary. However, their adjustment is not available yet. These features will be implemented with future updates.

Once Data Source is picked, the further settings are shown. They can differ depending on the chosen data source.

Type

type dropdown menu

This field refers to the appearance of the filter. Select whether to display filter options as Color or Image. The Color filter will represent values in colors chosen in the color picker or by code, while the Image filter will depict images as options.

Behavior

behavior dropdown menu

A field that represents two options, Checkbox and Radio. Set Checkbox to let the users pick several options among all the given, and Radio to enable them to select just one option.

Is Checkbox Meta Field (JetEngine)

visual filter is checkbox meta field toggle

The Is Checkbox Meta Field (JetEngine) toggle filters data from Checkbox meta fields type if activated.

NOTE
This feature appears only if the JetEngine plugin is installed and activated.

Query Settings

query variable

The Query Variable field is required for completion as it is responsible for the correct display of the filtering parameters. Add the meta field name by which the data will be filtered.

NOTE
For Taxonomy Data Source, Query Variable is set automatically.

After adjusting all the settings, click on the “Publish” button to save the changes.

Visual Filter Widget in Elementor

Proceed to the Elementor editor to place a Visual Filter widget. Customize the first, Content tab.

visual filter settings in elementor

Content

  • Select Filter — choose the filter you want to display;
  • This filter for — define the filter provider to attach the filter; 
  • Apply type — set how the filter results will be shown, with page reloading (Page Reload) or without (AJAX);
  • Apply on — select the action that will apply the filter;
  • Show apply button — activate to add an apply button;
  • Show filter label — display the filter label above the filter;
  • Query ID — paste an ID in case you have more than one widget of the same provider on the page;
  • Additional Providers Enabled — toggle to apply the filter to several providers.
elementor filter options

Filter Options

  • Show items label — display the color labels;
  • Image Size — set the image quality if you are working on the Image Filter.

To change the image or color size, proceed to the Style tab. Open the Color/Image tab and set the size by moving the switcher or typing the needed value in the field.

color or image size

Now proceed to the Additional Settings tab to work on the further settings.

elementor additional settings
  • Search Enabled — add the search bar for quicker filter navigation;
  • Search Placeholder — change the default “Search” value in the search bar if needed;
  • More/Less Enabled — enable More and Less buttons to hide some filter options;
  • Less Items Count — set the number of displayed options if the option mentioned above is activated;
  • More Text — change the default More text on the button;
  • Less Text — type the new Less button text;
  • Dropdown Enabled — activate the drop-down list to place filter options in it;
  • Placeholder — change the default drop-down menu placeholder;
  • Scroll Enabled — toggle to activate the filter options scroll;
  • Scroll Height(px) — define the scroll height.
elementor indexer options

Indexer Options

  • Apply Indexer — switch on to index the filter;
  • Show Counter — enable the counter that will show the number of available options;
  • If Item Empty — set the action for the empty options;
  • Change Counters — define whether to change counters when filters are applied.

Click on the “Publish” or “Update” button if the page was already published.

Visual Filter Block in Gutenberg

Head to the Gutenberg-edited page and add the Visual Filter block to it. The block settings are the same as the Elementor widget ones described above.

gutenberg visual filter settings

Advanced  

This tab is responsible for the filter appearance. Paste the CSS class in the Additional CSS class(es) field. Or, use the JetStyleManager plugin to implement the style changes right in Gutenberg.

gutenberg visual filter advanced tab

Once the page is ready, publish or update the page by pushing the button on the top right of the block editor.

Results

filter result

Now you know how to set up the visual filter that will meet your needs using the JetSmartFilters plugin.