{"id":13169,"date":"2019-08-02T10:29:51","date_gmt":"2019-08-02T10:29:51","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=13169"},"modified":"2025-04-14T18:17:43","modified_gmt":"2025-04-14T18:17:43","slug":"jetsmartfilters-how-to-create-visual-filter-with-taxonomies-data-source","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-taxonomies-data-source\/","title":{"rendered":"How to Create Visual Filter with Taxonomies Data Source"},"content":{"rendered":"\n

In this guide, we will examine the \u201cVisual\u201d filter with the \u201cTaxonomies\u201d Data Source <\/strong>creation steps. We will build a filter based on the car class, where the filter options will be accompanied by a corresponding image.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

This tutorial is created on the basis of the RentGo<\/strong> dynamic template<\/a>.<\/p><\/div><\/div>\n\n\n\n

Add a New Filter<\/strong><\/h2>\n\n\n\n
\n

To build a new filter, go to WordPress Dashboard > Smart Filters > Add New<\/em><\/strong>. <\/p>\n\n\n\n

Define the Filter Name<\/strong> and move to the Filter Type <\/strong>field. Here, pick the \u201cVisual\u201d option. <\/p>\n\n\n\n

After that, select the \u201cTaxonomies\u201d Data Source <\/strong>and pick the needed Taxonomy<\/strong> \u2014 the one you want to be the source of the filter. In our case, it\u2019s \u201cClass.\u201d<\/p>\n\n\n\n

Next, you should choose the Type <\/strong>of the \u201cVisual\u201d filter. It can either be a \u201cColor\u201d <\/strong>or \u201cImage\u201d to enable filtering by color or image, correspondingly. In this case, we choose the \u201cImage\u201d option.<\/p>\n\n\n\n

In the Behavior<\/strong> menu, specify the filter behavior: it can be the \u201cCheckbox\u201d or \u201cRadio\u201d one. In our case, it\u2019s \u201cCheckbox\u201d as it allows selecting several options, while the \u201cRadio\u201d is for selecting one option at a time.<\/p>\n\n\n\n

Next, proceed to the Options List<\/strong> and click the \u201c+ Add New<\/strong>\u201d button there to add the first option to the filter.<\/p>\n\n\n\n

\"visual<\/a><\/div>\n\n\n\n

To create a filter option, you should enter the Label <\/strong>that will be displayed in the filter and the Value <\/strong>that will be stored in the database.<\/p>\n\n\n\n

Next, if you have selected the \u201cColor\u201d option in the Type <\/strong>field, click the default black icon to be able to pick the Color <\/strong>for the current option, and if you have selected \u201cImage\u201d, as in this tutorial, press the \u201cChoose an image<\/strong>\u201d button to open the Media Library<\/strong>.<\/p>\n\n\n\n

\"economy<\/a><\/div>\n\n\n\n

Upload or select the needed image from the gallery and press the \u201cChoose an image<\/strong>\u201d button.<\/p>\n\n\n\n

\"media<\/a><\/div>\n\n\n\n

Add other options that you want to be displayed in the filter the same way.<\/p>\n\n\n\n

\"visual<\/a><\/div>\n\n\n\n

Now, work on other settings if needed. More about them, you will find in the Visual Filter Overview<\/strong><\/a>.<\/p>\n\n\n\n

For instance, we leave the rest of the Filter Settings <\/strong>fields untouched and complete the Filter Labels <\/strong>in the corresponding section.<\/p>\n\n\n\n

When the setup is done, press the \u201cUpdate<\/strong>\u201d button.<\/p>\n\n\n\n

\"filter<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Add the Visual Filter to a Page<\/strong><\/h2>\n\n\n\n
\n

Open the page editor where you want to place your filter. It can be Elementor, Blocks Editor (Gutenberg), or Bricks. The settings and the customization stay the same regardless of the page editor.<\/p>\n\n\n\n

In this tutorial, we will work with the Elementor editor. First, we add a two-column layout to put the filter and provider in two separate columns.<\/p>\n\n\n\n

Drag and drop the Visual Filter<\/strong> widget to the canvas (we put it in the left column). In the Select filter<\/strong> field of the Content<\/strong> tab, choose the filter that you\u2019ve previously created.<\/p>\n\n\n\n

In the This filter for<\/strong> field, select the provider that will be filtered. In our case, it\u2019s \u201cJetEngine,\u201d as we want to filter JetEngine<\/em><\/a>\u2019s Listing Grid<\/strong>.<\/p>\n\n\n\n

After that, you can adjust other settings in the Content <\/strong>tab if needed.<\/p>\n\n\n\n

\"visual<\/a><\/div>\n\n\n\n

Customize the filter layout in the Style<\/strong> tab if desired.<\/p>\n\n\n\n

\"visual<\/a><\/div>\n\n\n\n

Now, add a provider that will be filtered. For example, we add the Listing Grid<\/strong><\/a> <\/strong>widget.<\/p>\n\n\n\n

If you also work with the Listing Grid<\/strong>, pick the Listing <\/strong>built<\/a> <\/a>beforehand<\/a>.<\/p>\n\n\n\n

We also change the Columns Number <\/strong>to \u201c1,\u201d and that\u2019s all for the changes. However, feel free to adjust other Listing Grid <\/strong>widget settings if needed.<\/p>\n\n\n\n

Whenever ready, press the \u201cPublish<\/strong>\u201d button to save the result.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Check the Result<\/h2>\n\n\n\n
\n

Open the just-built page on the front end. Here, the filter and the provider are now displayed.<\/p>\n\n\n\n

\"taxonomy<\/a><\/div>\n\n\n\n

Now, pick one or several options to check if the filter works. For instance, we select the \u201cIntermediate\u201d option and observe how the listing changes \u2014 now, it only displays the posts attached to the mentioned term.<\/p>\n\n\n\n

\"intermediate<\/a><\/div>\n<\/div><\/div>\n\n\n\n

The result is achieved; now, you know how to build a WordPress custom taxonomy filter by image or color with the help of the JetSmartFilters <\/em>plugin for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"

Learn how to filter items by colors or images added as terms to taxonomies by using the \u201cVisual\u201d filter type and the \u201cTaxonomies\u201d data source by JetSmartFilters.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[535],"yoast_head":"\nHow to Create Visual Filter with Taxonomies Data Source \u2014 JetSmartFilters | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to create a \u201cVisual\u201d filter based on the \u201cTaxonomy\u201d data source with JetSmartFilters for WordPress websites.\" \/>\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-how-to-create-visual-filter-with-taxonomies-data-source\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Visual Filter with Taxonomies Data Source \u2014 JetSmartFilters | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a \u201cVisual\u201d filter based on the \u201cTaxonomy\u201d data source with JetSmartFilters for WordPress websites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-taxonomies-data-source\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-14T18:17:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/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=\"5 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-how-to-create-visual-filter-with-taxonomies-data-source\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-taxonomies-data-source\/\",\"name\":\"How to Create Visual Filter with Taxonomies Data Source \u2014 JetSmartFilters | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-08-02T10:29:51+00:00\",\"dateModified\":\"2025-04-14T18:17:43+00:00\",\"description\":\"Learn how to create a \u201cVisual\u201d filter based on the \u201cTaxonomy\u201d data source with JetSmartFilters for WordPress websites.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-taxonomies-data-source\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-taxonomies-data-source\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-taxonomies-data-source\/#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\":\"How to Create Visual Filter with Taxonomies Data Source\"}]},{\"@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":"How to Create Visual Filter with Taxonomies Data Source \u2014 JetSmartFilters | Crocoblock","description":"Learn how to create a \u201cVisual\u201d filter based on the \u201cTaxonomy\u201d data source with JetSmartFilters for WordPress websites.","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-how-to-create-visual-filter-with-taxonomies-data-source\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Visual Filter with Taxonomies Data Source \u2014 JetSmartFilters | Crocoblock","og_description":"Learn how to create a \u201cVisual\u201d filter based on the \u201cTaxonomy\u201d data source with JetSmartFilters for WordPress websites.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-taxonomies-data-source\/","og_site_name":"Help Center","article_modified_time":"2025-04-14T18:17:43+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/visual-filter-settings-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-taxonomies-data-source\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-taxonomies-data-source\/","name":"How to Create Visual Filter with Taxonomies Data Source \u2014 JetSmartFilters | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-08-02T10:29:51+00:00","dateModified":"2025-04-14T18:17:43+00:00","description":"Learn how to create a \u201cVisual\u201d filter based on the \u201cTaxonomy\u201d data source with JetSmartFilters for WordPress websites.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-taxonomies-data-source\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-taxonomies-data-source\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-taxonomies-data-source\/#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":"How to Create Visual Filter with Taxonomies Data Source"}]},{"@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\/13169"}],"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=13169"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=13169"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=13169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}