Back to contents

JetSmartFilters: How to Create Visual Filter

This tutorial will demonstrate you how to create Visual filter with different data sources. Besides that you will learn how to filter posts or products by color and image.

This feature will be useful for those who own an online shop and offer customers similar items in several colors. JetSmartFilters plugin allows you to create a filter that will sort the items according to the color or image chosen by the user.

There are several ways of creating it, so let’s go through all the details of Visual Filter usage.

How to create Visual Filter

Like any other filter of the JetSmartFilters plugin, Visual Filter sorts the items by comparing the value the user has chosen with the value of a specific meta field. So, first of all, you should create a Custom Post type with a Meta Box, add here a Meta Field of Checkbox or Radio type and then add options. If you need a clue, please check out this tutorial.

1 Step — Adding a new filter

In WP Dashboard, go to the Smart Filters submenu in the side panel, click the “Add New” button, name the filter, and choose the “Visual” Filter Type. Fill in appropriate fields in the Filter Labels block. You should define the name of your filter and how it will be shown when it is selected.

Visual filter with manual input settings

Manual Input Data Source

If in the Data Source drop-down menu you have chosen the “Manually Input” option, this means that the options that will be shown to users have to be created by you and not set automatically.

Select the Type of the Visual filter: an Image or a Color one. The Image option will allow you to create a filter that sorts the items according to pictures. The Color Visual Filter will sort items according to the chosen color.

Taxonomies Data Source

visual filter taxonomies

If you choose the “Taxonomies” option in the Data Source drop-down menu, it means that the options in the list will be set automatically according to the Taxonomy you have created for that purpose.

The taxonomy dropdown menu has a list of all pre-made and custom taxonomies that exist in your dashboard. Choose the Product Brand option to filter products or the taxonomy you created for your Custom Post.

Show empty terms toggle allows showing the term that has no items attached to it. If you have a complicated attribute with child terms, enable the Show only child of current term option. If not, miss it and go to the next step.

Posts Data Source

The “Posts” option of the Data Source menu creates a visual filter that will make a list of options according to the list of posts of some Custom Type.

In the Post Type dropdown menu, you should choose the post type you’ve assigned as a parent one in the post relation.

Before creating a Posts type Visual filter, you should create a post relation. It can be one-to-one, or one-to-many, or many-to-many – it doesn’t matter which type of relationship you create. If you need insight, read tutorials in the section called Posts Relations.

In this case, we created a one-to-one post relation where we assigned the Color Post Type as a parent object and Events Post Type as a child one.

2 Step — Define the other settings

visual filter other settings

Define the Behavior of the filter – make it Radio or Checkbox. Be sure that you are selecting the same type as you’ve chosen while adding Meta Fields to the specific post type.

In the Options List, add the options that you want to appear as criteria for the filter. You shouldn’t add all of the terms here, just the ones you really need to range your goods or posts accordingly to the ones you have added to the meta fields. For example, it may be necessary in case one color is out of the sale for a certain period and you don’t want it to be displayed for your customers.

  • The Label field is optional to be filled in. You can leave it empty (it’s pretty familiar for the visual type to leave this field, as the color or image are much brighter than the text);
  • The Value is something that will be compared to the data you put to the meta field. Be sure you write it the same way as you did in the meta box;
  • Then, specify the color, if you’ve chosen a Color type, and in case you’ve selected an Image type – select a certain image.
Options list settings in the JetSmartFilters plugin

You should toggle on the Is Checkbox Meta Field option, as we are dealing with meta fields.

3 Step — Add Query Variable

After that, you should type in the name of the meta field into the Query Variable field. It should be the Name/ID of the meta field you previously created to filter the data.

Query settings in WordPress Dashboard

When you are done – hit the “Publish” button.

How to add Visual Filter to the page

Open the page where you want to place your filter with Elementor editor. Drag and drop the Visual Filter widget to the canvas.

visual filter widget

In the Content field, choose the filter that you’ve previously created.

In the This filter for menu specify the way the content has been created.
We add the filter to the WooCommerce template so that we select here the “JetWoobuilder Products Grid” option.

After that, choose the Apply type: whether the AJAX or Page reload type.

Enable the Show apply button option and then the Show filter label one if you need it.

In the Query ID field enter the CSS ID of the widget you want to apply the filter to, in case you several sections on the same page.

smart filters content tab

In the Filter Options tab, you can enable the label appearing by toggling on the Show items label option.

In the Image Size dropdown menu, you can choose the size that will suit the general appearance.

Filter options settings for the Visual Filter widget

Customize the appearance of the filter in the Style tab.

Items style settings for the Visual Filter widge

See how it works in the front-end. Here is how the Color Visual Filter looks like:

Visual filter based on colors overview

And the Image Visual filter is like that:

 Visual Filter with Manual Input data source overview

That’s it! Now it’s as simple for you to sort the items using the Visual Filter of JetSmartFilters plugin.