{"id":28050,"date":"2022-04-20T15:09:46","date_gmt":"2022-04-20T15:09:46","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=28050"},"modified":"2024-03-06T11:31:14","modified_gmt":"2024-03-06T11:31:14","slug":"jetsmartfilters-visual-filter-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/","title":{"rendered":"Visual Filter Overview"},"content":{"rendered":"\n<p>The <strong>Visual Filter <\/strong>is a part of the <em>JetSmartFilters <\/em>plugin functionality. It allows users to filter the content by images or colors, following the concept of the \u201cRadio\u201d or the \u201cCheckboxes\u201d filter.<\/p>\n\n\n\n<p>To create this type of filter, one should proceed to <strong><em>WordPress Dashboard &gt; Smart Filters &gt; Add New<\/em><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"filter-settings\"><strong>Filter Settings<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Initially, for any type of filter, the following fields are available:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/primary-visual-filter-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/primary-visual-filter-settings-1024x640.webp\" alt=\"primary visual filter settings\" class=\"wp-image-43725\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/primary-visual-filter-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/primary-visual-filter-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/primary-visual-filter-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/primary-visual-filter-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/primary-visual-filter-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/primary-visual-filter-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Filter Name <\/strong>\u2014 a name used for identifying the filter in the list of filters;<\/li>\n\n\n\n<li><strong>Filter Type <\/strong>\u2014 a drop-down list where the \u201cVisual\u201d option should be picked;<\/li>\n\n\n\n<li><strong>Data Source <\/strong>\u2014 a drop-down list with available data sources for the current filter.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"data-source\">Data Source<\/h3>\n\n\n\n<p>Here, the most suitable variant should be picked to filter the needed options from a particular data source.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"taxonomies\">Taxonomies<\/h4>\n\n\n\n<p>Once chosen, this option will take the data from the selected taxonomy. For instance, it can be categories, tags, or product taxonomies used for an online shop.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/taxonomies-data-source-2.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/taxonomies-data-source-2-1024x640.webp\" alt=\"taxonomies data source\" class=\"wp-image-43726\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/taxonomies-data-source-2-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/taxonomies-data-source-2-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/taxonomies-data-source-2-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/taxonomies-data-source-2-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/taxonomies-data-source-2-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/taxonomies-data-source-2.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"manual-input\"><strong>Manual Input<\/strong><\/h4>\n\n\n\n<p>All the values can be set up manually. The options will not be pulled automatically. The manual input source allows entering your own values. As an example, it can be color options or images set as meta field values.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/manual-input-data-source-2.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/manual-input-data-source-2-1024x640.webp\" alt=\"manual input data source\" class=\"wp-image-43727\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/manual-input-data-source-2-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/manual-input-data-source-2-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/manual-input-data-source-2-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/manual-input-data-source-2-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/manual-input-data-source-2-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/manual-input-data-source-2.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"posts\"><strong>Posts<\/strong><\/h4>\n\n\n\n<p>With this option, the default WordPress post type or <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-custom-post-type-based-on-jetengine-plugin\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Custom Post Type<\/strong><\/a> created manually can be picked to filter it with the built filter.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/posts-data-source-2.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/posts-data-source-2-1024x640.webp\" alt=\"posts data source\" class=\"wp-image-43728\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/posts-data-source-2-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/posts-data-source-2-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/posts-data-source-2-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/posts-data-source-2-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/posts-data-source-2-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/posts-data-source-2.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">There are two additional options shown for selection if a <a href=\"https:\/\/crocoblock.com\/plugins\/jetengine\/\">JetEngine<\/a> plugin is installed and activated on the website \u2014 \u201cJetEngine Custom Content Types\u201d and \u201cJetEngine Glossary.\u201d However, their adjustment is not available yet. These features will be implemented with future updates.<\/p><\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"jetengine-query-builder\">JetEngine Query Builder<\/h4>\n\n\n\n<p>This <strong>Data Source<\/strong> option is also available only when the <em>JetEngine <\/em>plugin is installed and activated.&nbsp;<\/p>\n\n\n\n<p>It allows filtering by query options built with the help of the <em>JetEngine <\/em><a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/query-builder-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Query Builder<\/strong><\/a><strong> <\/strong>functionality.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/jetengine-query-builder-source.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/jetengine-query-builder-source-1024x640.webp\" alt=\"jetengine query builder source\" class=\"wp-image-43204\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/jetengine-query-builder-source-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/jetengine-query-builder-source-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/jetengine-query-builder-source-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/jetengine-query-builder-source-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/jetengine-query-builder-source-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/jetengine-query-builder-source.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"jetengine-query-builder-switcher\">JetEngine Query Builder Switcher<\/h4>\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">We recommend using this option only with the \u201cRadio\u201d <strong>Behaviour<\/strong> option.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/jetengine-query-builder-switcher-source.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/jetengine-query-builder-switcher-source-1024x640.webp\" alt=\"jetengine query builder switcher source\" class=\"wp-image-43729\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/jetengine-query-builder-switcher-source-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/jetengine-query-builder-switcher-source-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/jetengine-query-builder-switcher-source-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/jetengine-query-builder-switcher-source-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/jetengine-query-builder-switcher-source-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/jetengine-query-builder-switcher-source.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Once the <strong>Data Source <\/strong>is picked, further settings are shown. They can differ depending on the chosen data source.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"type\">Type<\/h3>\n\n\n\n<p>This field refers to the appearance of the filter.&nbsp;Filter options can be displayed as \u201cColor\u201d<strong> <\/strong>or \u201cImage.\u201d <\/p>\n\n\n\n<p>The \u201cColor\u201d filter will represent values in colors chosen in the color picker or by code, while the \u201cImage\u201d filter will depict images as options.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/type-selector.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/type-selector-1024x640.webp\" alt=\"type selector\" class=\"wp-image-43730\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/type-selector-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/type-selector-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/type-selector-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/type-selector-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/type-selector-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/type-selector.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"behavior\">Behavior<\/h3>\n\n\n\n<p>This<strong> <\/strong>field includes two options: \u201cCheckbox\u201d and \u201cRadio.\u201d The \u201cCheckbox\u201d option lets the users select several options from the given list, while \u201cRadio\u201d enables them to select just one option.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/behavior-selector.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/behavior-selector-1024x640.webp\" alt=\"behavior selector\" class=\"wp-image-43731\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/behavior-selector-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/behavior-selector-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/behavior-selector-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/behavior-selector-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/behavior-selector-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/behavior-selector.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"radio-settings\">Radio settings<\/h3>\n\n\n\n<p>If one selects the \u201cRadio\u201d <strong>Behavior <\/strong>option, additional settings appear:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/radio-behavior-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/radio-behavior-settings-1024x640.webp\" alt=\"radio behavior settings\" class=\"wp-image-43732\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/radio-behavior-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/radio-behavior-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/radio-behavior-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/radio-behavior-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/radio-behavior-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/radio-behavior-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Add all option <\/strong>\u2014 a toggle that adds the \u201cAll\u201d option to the previously set options list;<\/li>\n\n\n\n<li><strong>All option label <\/strong>\u2014 a text displayed as the label for the \u201cAll\u201d option. The \u201c<strong>Choose an image<\/strong>\u201d button below the text field allows setting an image for the \u201cAll\u201d option;<\/li>\n\n\n\n<li><strong>Ability to deselect radio buttons <\/strong>\u2014 a toggle that activates the ability to untick the selected choice.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"is-checkbox-meta-field-jetengine\">Is Checkbox Meta Field (JetEngine)<\/h3>\n\n\n\n<p>The <strong>Is Checkbox Meta Field (JetEngine) <\/strong>toggle filters data from the \u201cCheckbox\u201d meta fields type if activated.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/is-checkbox-meta-field-toggle.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/is-checkbox-meta-field-toggle-1024x640.webp\" alt=\"is checkbox meta field toggle\" class=\"wp-image-43733\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/is-checkbox-meta-field-toggle-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/is-checkbox-meta-field-toggle-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/is-checkbox-meta-field-toggle-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/is-checkbox-meta-field-toggle-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/is-checkbox-meta-field-toggle-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/is-checkbox-meta-field-toggle.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">This feature appears only if the <a href=\"https:\/\/crocoblock.com\/plugins\/jetengine\/\">JetEngine<\/a> plugin is installed and activated.<\/p><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"query-variable\">Query Variable<\/h3>\n\n\n\n<p>The <strong>Query Variable <\/strong>field is required for completion as it is responsible for the correct display of the filtering parameters. Here, the meta field name by which the data will be filtered can be added.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">For the \u201cTaxonomy\u201d <strong>Data Source<\/strong>, the <strong>Query Variable<\/strong> is set automatically.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/query-variable-field.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/query-variable-field-1024x640.webp\" alt=\"query variable field\" class=\"wp-image-43741\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/query-variable-field-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/query-variable-field-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/query-variable-field-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/query-variable-field-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/query-variable-field-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/query-variable-field.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"use-default-filter-value\">Use default filter value<\/h3>\n\n\n\n<p><strong>Use Default Filter Value\u00a0<\/strong>is a toggle that activates the\u00a0<strong>Default Filter Value<\/strong>\u00a0field. Values there can be separated by commas; they will be applied to the provider once via an Ajax request when the filter is added to the page.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/use-default-filter-value-toggle-3.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/use-default-filter-value-toggle-3-1024x640.webp\" alt=\"use default filter value toggle\" class=\"wp-image-43754\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/use-default-filter-value-toggle-3-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/use-default-filter-value-toggle-3-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/use-default-filter-value-toggle-3-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/use-default-filter-value-toggle-3-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/use-default-filter-value-toggle-3-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/use-default-filter-value-toggle-3.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"filter-labels\"><strong>Filter Labels<\/strong><\/h3>\n\n\n\n<p>The last settings tab lets users customize the field labels with the help of the following fields:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/filter-labels-section-2.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/filter-labels-section-2-1024x640.webp\" alt=\"filter labels section\" class=\"wp-image-43753\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/filter-labels-section-2-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/filter-labels-section-2-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/filter-labels-section-2-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/filter-labels-section-2-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/filter-labels-section-2-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/filter-labels-section-2.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Filter Label<\/strong> \u2014 the value typed in here will be defined as the filter title. It can be used as the label displayed next to the filter;<\/li>\n\n\n\n<li><strong>Active Filter Label<\/strong> \u2014 a label that is displayed in the <a href=\"https:\/\/crocoblock.com\/widgets\/active-filters\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Active Filters<\/strong><\/a> and <a href=\"https:\/\/crocoblock.com\/widgets\/active-tags\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Active Tags<\/strong><\/a><strong> <\/strong>blocks for Gutenberg or widgets for Elementor.<\/li>\n<\/ul>\n\n\n\n<p>To save the filter, one should click the \u201c<strong>Update<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"visual-filter-widget-in-elementor\"><strong>Visual Filter Widget in Elementor<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>In the Elementor editor, a <strong>Visual Filter <\/strong>widget can be found in the search bar.&nbsp;<\/p>\n\n\n\n<p>The first <strong>Content <\/strong>tab consists of such customization fields:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-content-settings-in-elementor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-content-settings-in-elementor-1024x640.webp\" alt=\"visual filter content settings in elementor\" class=\"wp-image-43212\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-content-settings-in-elementor-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-content-settings-in-elementor-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-content-settings-in-elementor-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-content-settings-in-elementor-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-content-settings-in-elementor-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-content-settings-in-elementor.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Select filter <\/strong>\u2014 the filter that will be displayed;<\/li>\n\n\n\n<li><strong>This filter for <\/strong>\u2014 the filter provider to attach the filter;&nbsp;<\/li>\n\n\n\n<li><strong>Apply type <\/strong>\u2014 the way how the filter results will be shown, with page reloading (\u201cPage Reload\u201d) or without (\u201cAJAX\u201d);<\/li>\n\n\n\n<li><strong>Apply on <\/strong>\u2014 the action that will trigger the filter;<\/li>\n\n\n\n<li><strong>Show apply button <\/strong>\u2014 a toggle that adds an \u201c<strong>Apply<\/strong>\u201d button;<\/li>\n\n\n\n<li><strong>Show filter label <\/strong>\u2014 a toggle that displays the filter label above the filter;<\/li>\n\n\n\n<li><strong>Query ID <\/strong>\u2014 an ID to be added if there more than one widget of the same provider on the page is needed to be used;<\/li>\n\n\n\n<li><strong>Additional Providers Enabled <\/strong>\u2014 a toggle to apply the filter to several providers.<\/li>\n<\/ul>\n\n\n\n<p>The following settings tab is called <strong>Filter Options <\/strong>and includes such settings:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/filter-options-settings-tab-in-elementor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/filter-options-settings-tab-in-elementor-1024x640.webp\" alt=\"filter options settings tab in elementor\" class=\"wp-image-43213\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/filter-options-settings-tab-in-elementor-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/filter-options-settings-tab-in-elementor-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/filter-options-settings-tab-in-elementor-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/filter-options-settings-tab-in-elementor-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/filter-options-settings-tab-in-elementor-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/filter-options-settings-tab-in-elementor.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Show items label <\/strong>\u2014 a toggle that is activated by default and displays the options labels;<\/li>\n\n\n\n<li><strong>Image Size <\/strong>\u2014 the image quality (can be used when working on the Image Filter).<\/li>\n<\/ul>\n\n\n\n<p>The image or color size can be additionally changed in the <strong>Style<\/strong> tab. In the <strong>Color\/Image<\/strong> tab, the size can be altered by moving the switcher or typing the needed value in the field.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/size-setting-for-the-visual-filter-in-elementor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/size-setting-for-the-visual-filter-in-elementor-1024x640.webp\" alt=\"size setting for the visual filter in elementor\" class=\"wp-image-43214\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/size-setting-for-the-visual-filter-in-elementor-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/size-setting-for-the-visual-filter-in-elementor-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/size-setting-for-the-visual-filter-in-elementor-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/size-setting-for-the-visual-filter-in-elementor-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/size-setting-for-the-visual-filter-in-elementor-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/size-setting-for-the-visual-filter-in-elementor.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>In the <strong>Additional Settings <\/strong>tab, the further settings are presented:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/search-enabled-setting.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/search-enabled-setting-1024x640.webp\" alt=\"search enabled setting\" class=\"wp-image-43215\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/search-enabled-setting-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/search-enabled-setting-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/search-enabled-setting-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/search-enabled-setting-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/search-enabled-setting-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/search-enabled-setting.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Search Enabled <\/strong>\u2014 a toggle that adds the search bar for quicker filter navigation;<\/li>\n\n\n\n<li><strong>Search Placeholder <\/strong>\u2014 the text shown as the default \u201cSearch\u201d value in the search bar. It can be changed if needed;<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/more-or-less-enabled-setting.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/more-or-less-enabled-setting-1024x640.webp\" alt=\"more or less enabled setting\" class=\"wp-image-43216\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/more-or-less-enabled-setting-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/more-or-less-enabled-setting-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/more-or-less-enabled-setting-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/more-or-less-enabled-setting-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/more-or-less-enabled-setting-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/more-or-less-enabled-setting.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>More\/Less Enabled <\/strong>\u2014 a toggle that enables \u201c<strong>More<\/strong>\u201d and \u201c<strong>Less<\/strong>\u201d buttons to hide some filter options;<\/li>\n\n\n\n<li><strong>Less Items Count <\/strong>\u2014 the number of displayed options if the option mentioned above is activated;<\/li>\n\n\n\n<li><strong>More Text <\/strong>\u2014 the \u201cMore\u201d text on the button;<\/li>\n\n\n\n<li><strong>Less Text <\/strong>\u2014 the \u201cLess\u201d button text;<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/dropdown-enabled-setting.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/dropdown-enabled-setting-1024x640.webp\" alt=\"dropdown enabled setting\" class=\"wp-image-43217\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/dropdown-enabled-setting-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/dropdown-enabled-setting-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/dropdown-enabled-setting-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/dropdown-enabled-setting-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/dropdown-enabled-setting-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/dropdown-enabled-setting.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Dropdown Enabled <\/strong>\u2014 a toggle that activates the drop-down list to place filter options in it;<\/li>\n\n\n\n<li><strong>Placeholder <\/strong>\u2014 a drop-down menu placeholder;<\/li>\n\n\n\n<li><strong>N Selected <\/strong>\u2014 a toggle that hides the options labels and shows the number of the picked items after the N-item;<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/scroll-enabled-setting.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/scroll-enabled-setting-1024x640.webp\" alt=\"scroll enabled setting\" class=\"wp-image-43218\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/scroll-enabled-setting-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/scroll-enabled-setting-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/scroll-enabled-setting-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/scroll-enabled-setting-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/scroll-enabled-setting-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/scroll-enabled-setting.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Scroll Enabled <\/strong>\u2014 a toggle to activate the filter options scroll;<\/li>\n\n\n\n<li><strong>Scroll Height(px) <\/strong>\u2014 a height of the filter scroll.<\/li>\n<\/ul>\n\n\n\n<p>Also, the <strong>Indexer Options<\/strong> allow adjusting the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-set-indexer-option-for-filters\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Indexer<\/strong> feature<\/a>:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/indexer-options-tab.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/indexer-options-tab-1024x640.webp\" alt=\"indexer options tab\" class=\"wp-image-43219\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/indexer-options-tab-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/indexer-options-tab-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/indexer-options-tab-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/indexer-options-tab-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/indexer-options-tab-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/indexer-options-tab.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Apply Indexer <\/strong>\u2014 a toggle for indexing the filter;<\/li>\n\n\n\n<li><strong>Show Counter <\/strong>\u2014 a toggle that enables the counter for the number of available options. Once activated, the <strong>Counter Prefix <\/strong>and <strong>Counter Suffix <\/strong>fields are available for customization;<\/li>\n\n\n\n<li><strong>If Item Empty <\/strong>\u2014 the action for the empty options;<\/li>\n\n\n\n<li><strong>Change Counters <\/strong>\u2014 a drop-down list that allows setting whether to change counters when filters are applied.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"visual-filter-block-in-gutenberg\"><strong>Visual Filter Block in Gutenberg<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>In the Gutenberg-edited page, the <strong>Visual Filter <\/strong>block can be added as well. The block settings are the same as the <a href=\"#visual-filter-widget-in-elementor\">Elementor widget ones<\/a> described above.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-gutenberg.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-gutenberg-1024x640.webp\" alt=\"visual filter block in gutenberg\" class=\"wp-image-43220\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-gutenberg-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-gutenberg-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-gutenberg-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-gutenberg-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-gutenberg-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-gutenberg.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The <strong>Advanced <\/strong>tab is responsible for the filter appearance. Here, the CSS class can be put in the <strong>Additional CSS class(es) <\/strong>field.&nbsp;<\/p>\n\n\n\n<p>Alternatively, the <a href=\"https:\/\/crocoblock.com\/plugins\/jetstylemanager\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>JetStyleManager<\/em><\/strong><\/a><strong> <\/strong>plugin can be used to implement the style changes right in Gutenberg.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-block-advanced-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-block-advanced-settings-1024x640.webp\" alt=\"visual filter block advanced settings\" class=\"wp-image-43221\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-block-advanced-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-block-advanced-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-block-advanced-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-block-advanced-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-block-advanced-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-block-advanced-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"visual-filter-element-in-bricks\">Visual Filter Element in Bricks<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The <strong>Visual Filter <\/strong>element is also available in the Bricks Builder.&nbsp;<\/p>\n\n\n\n<p>This element can be found by its name in the search bar. It includes the same settings as the <a href=\"#visual-filter-widget-in-elementor\">same named widget in Elementor<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-bricks.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-bricks-1024x640.webp\" alt=\"visual filter element in bricks\" class=\"wp-image-43222\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-bricks-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-bricks-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-bricks-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-bricks-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-bricks-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/visual-filter-in-bricks.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"results\"><strong><strong>Results<\/strong><\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Once the page is saved, the results can be checked on the front end.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/result-on-the-front-end.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/result-on-the-front-end-1024x640.webp\" alt=\"result on the front end\" class=\"wp-image-43223\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/result-on-the-front-end-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/result-on-the-front-end-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/result-on-the-front-end-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/result-on-the-front-end-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/result-on-the-front-end-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/result-on-the-front-end.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<p>Now, you know how to set up the visual filter that will meet your needs using the <em>JetSmartFilters<\/em> plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This overview is about the Visual Filter from the JetSmartFilters plugin and its general settings.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[303],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Visual Filter Overview \u2014 JetSmartFilters | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn about creating a Visual Filter using JetSmartFilters and its features. Find out how to use the Visual Filter block in Gutenberg, the filter widget in Elementor, or the element in Bricks.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual Filter Overview \u2014 JetSmartFilters | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn about creating a Visual Filter using JetSmartFilters and its features. Find out how to use the Visual Filter block in Gutenberg, the filter widget in Elementor, or the element in Bricks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-06T11:31:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/primary-visual-filter-settings-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/\",\"name\":\"Visual Filter Overview \u2014 JetSmartFilters | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2022-04-20T15:09:46+00:00\",\"dateModified\":\"2024-03-06T11:31:14+00:00\",\"description\":\"Learn about creating a Visual Filter using JetSmartFilters and its features. Find out how to use the Visual Filter block in Gutenberg, the filter widget in Elementor, or the element in Bricks.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Visual Filter Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Visual Filter Overview \u2014 JetSmartFilters | Crocoblock","description":"Learn about creating a Visual Filter using JetSmartFilters and its features. Find out how to use the Visual Filter block in Gutenberg, the filter widget in Elementor, or the element in Bricks.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/","og_locale":"en_US","og_type":"article","og_title":"Visual Filter Overview \u2014 JetSmartFilters | Crocoblock","og_description":"Learn about creating a Visual Filter using JetSmartFilters and its features. Find out how to use the Visual Filter block in Gutenberg, the filter widget in Elementor, or the element in Bricks.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/","og_site_name":"Help Center","article_modified_time":"2024-03-06T11:31:14+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/03\/primary-visual-filter-settings-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/","name":"Visual Filter Overview \u2014 JetSmartFilters | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2022-04-20T15:09:46+00:00","dateModified":"2024-03-06T11:31:14+00:00","description":"Learn about creating a Visual Filter using JetSmartFilters and its features. Find out how to use the Visual Filter block in Gutenberg, the filter widget in Elementor, or the element in Bricks.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-visual-filter-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"Visual Filter Overview"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/28050"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=28050"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=28050"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=28050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}