Back to contents

JetSmartFilters. How to create Visual Filter with Posts data source

This tutorial will be useful if you want to range the post with Visual filter. With the help of Visual filter, we can range not only the products but also publications, such as posts from different post types.

Let’s find out how to create Visual Filter with Posts data source and then add it to the posts.

How to create Visual Filter with Posts data source

Before creating Visual filter, you should add a post relation. It can be one-to-one, or one-to-many, or many-to-many – it doesn’t matter which type of the relation you create but choose the only one to add the filter for. How to create a post relation, read here in the section called Posts Relations.

I have created one-to-one post relation where I assigned the Color Post Type as a parent object and Events Post Type as a child one.

1 Step – Adding new filter

In WP Dashboard go to the Smart Filters submenu and Add new filter. 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 Posts data source.
In the Post Type dropdown menu you should choose that post type which you’ve assigned as a parent one in the post relation.
Next, select the type of the Visual filter type: an image or a color one.
Define the behavior of the filter – make it Radio or Checkbox.

3 Step – Proceed to options

In the Options List add the options accordingly to the ones you have in the parent post type.
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).
Choose the needed value from the dropdown menu (these values must comply with the posts from the parent post type).
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. To find the necessary value, proceed to the JetEngine > Posts Relations option and copy the meta key of the chosen relation and paste it in the Query Variable field.
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 listing based on the posts so that we select here the JetEngine 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.

That’s it!
With these simple settings, it’s possible to add a Visual filter to range posts by a color or an image and customize the appearance of the filter to meet all your requirements on the highest level.