Back to contents

JetSmartFilters. How to create Visual Filter with Manual Input data source

This tutorial will demonstrate us how to add Visual filter which allows to range the results of products using the color or image.

This feature will be useful for those who own an online shop and have the same item in many colors, for instance, it might be a store of clothes, gadgets or any other one.

Let’s find out how to create Visual filter with Manual Input data source.

How to create Visual Filter with Posts data source

Before creating Visual filter, add the necessary information to be filtered to the products you want to range by the specific criteria. You should create a Meta Box for Products post type (or any other one), add here a Meta Field with Checkbox or Radio type and then add options. How to perform it, read in our step-by-step tutorial (first part).

1 Step – Adding new filter

In WP Dashboard go to the Smart Filters submenu submenu in the side panel and Add new filter and then choose Visual one. 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.

2 Step – Acquire appropriate type

In the filter’s Type choose the Visual one to enable filtering by the color or image.
Then, you need to choose the Manual Input data source.
You should toggle on the Is Checkbox Meta Field option, as we are dealing with meta fields.
Next, select the Type of the Visual filter: an Image or a Color one.
Define the Behavior of the filter – make it Radio or Checkbox. Asure that you are selecting the same type as you’ve chosen while adding Meta Fields to the specific post type.

3 Step – Proceed to options

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 of time 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).
Then, specify the color, if you’ve chosen a Color type and in case you’ve selected an Image type – select the certain image.

4 Step – Adding Query Settings

After that, you should set the queried field key in the Query Variable field. Put the Name/ID of the necessary meta field to filter the data.
Update the changes and go to Elementor editor.

How to add Visual Filter to the page

1 Step – Adjusting Widget Settings

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

2 Step – Widget Content Block Settings

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

3 Step – Widget Set Up

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 ID of the section you want to apply the filter to, in case you several sections on the same page.

4 Step – Filter Options Set Up

In the Filter Options tab you are able to 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.

5 Step – Appearance Customization

Customize the appearance of the filter in the Style tab.

Here in the Items tab, you can change the position of the filters options: display them in line or in column.
You can add more space above and under the options by moving the slider of the Horizontal and Vertical offset options.
Align the options with the choice on the three possible alternatives.

In the Item tab you can change the size of the images, (if you’ve chosen them before in the Visual filter settings). As you remember, we’ve customized the physical size in the Content > Filter Options tab. There we specified the appropriate resolution of the images. And in the Style tab we are working first of all with the width of the images.
In this tab, we also customize the images with all the details for the Normal and Checked appearance: the border type and radius, etc.

In the Item Label tab, we defined the view of the labels both for Normal and Checked appearance.

In the Label tab we specified the appearance of the displayed filter’s title. We can do it in case we’ve toggled on the Show filter label in the Content tab.

The same is for the Button tab where we can set the behavior parameters for Normal and Checked appearance as well. We are able to change the settings here only if we’ve toggled on the Show apply button switch.

In the Grouped filters tab we can set the space between several filters.

See how it works in the front-end for the products. Note, that you are able to create the same for post type also.

That’s it! Now it’s as simple as ABC to add for filtering the specific color or the image (e.g. a certain brand) using for this Visual Filter with Manual Input data source.