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

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.

Filter Settings

Filter Type

A drop-down menu that lets you pick the desired type from the various options. Select the 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.

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

Type

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

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)

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

Query Settings

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.

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

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

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.

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.

Now proceed to the Additional Settings tab to work on the further 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.

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.

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.

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.

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