Help Center

How to Create Visual Filter with the Posts Data Source

How to Create Visual Filter with the Posts Data Source

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

How to Create Visual Filter

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 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.

jetengine 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.

Adding New Filter

In WordPress 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.

visual filter labels

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.

visual filter settings

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.

visual filter options settings

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.

visual filter query variable

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 elementor

Widget Content Block Settings

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

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.

content settings in the Visual Filter widget

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.

filter options settings in the Visual Filter widget

Appearance Customization

Customize the appearance of the filter in the Style tab.

items style settings in the visual filter widget

Here in the Items tab, you can change the position of the filters options: display them in line or in the 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.

item style settings in the visual filter widget

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.

label settings in the visual filter widget

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.

style settings in the visual filter widget

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

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.