Back to contents

JetSmartFilters. How to create a new filter and apply it to publications

From this tutorial, you’ll get the detailed information on how to create a new filter and apply it to different publication types using JetSmartFilters plugin.

Let visitors filter the publications using JetSmartFilters filters. Create filters, customize filter settings according to your needs, and apply them to publications easily and quickly.

Creating a new filter and applying it to a specific post type

Step 1 – First of all, you have to decide what post type you want to apply the filter to. It can be products, custom post type or default one.

Step 2 – Then, go to Elementor > JetSmartFilters Settings > Use filters for widgets and check the content widgets, with the help of which you display the products or posts, for filtering.

Use filters for widgets of JetSmartFilters Settings in WP Dashboard

You can use Elementor Pro Archive Products, Elementor Pro Products, JetWooBuilder Products Grid, JetWooBuilder Products List, WooCommerce Archive and WooCommerce Shortcode for showing WooCommerce products.

For displaying posts there are Elementor Pro Archive, Elementor Pro Posts, JetEngine Calendar, and JetEngine.

NOTE!
You should choose one of the widgets (Elementor Pro Archive or JetWooBuilder WooCommerce Archive) to display WooCommerce archives that the filters work correctly.

Also, you can enable Indexed filters functionality and select certain post types, which will be indexed in the block below.

Indexed filters of JetSmartFilters Settings in WP Dashboard

Step 3 – The next step is to create a new filter in JetSmartFilters > Add New window in the WP Dashboard. Here you can see multiple filter settings, which you can adjust according to your requests.

Add New filter option

Step 4 – Let’s start with adding a title of the filter in the first field. Then, go below and in the Filter Labels, you can specify the filter label and active filter label.

Filter Labels for the Checkbox filter

Step 5Filter Settings block provides a dropdown list with available filter types. When you select a needed filter type you will see additional options, where you need to specify the appropriate customizable fields.

Filter Settings block

Step 6 – In the Data Source field there are some sources from which the data are to be pulled, such as Manual Input, Taxonomies, Posts and Custom Fields.

  • Manual Input type allows filling in the options list with certain values and specifies the value labels to display. (e.g. you have a custom products post type and there is the “size” meta field with the slug you’ve specified. You have to add the actual size values from the meta field for the different products.)
  • Taxonomies type is a perfect option for using the term titles as the labels of the filter fields. (e.g. you have the “Tableware” post type and “Material” taxonomy (the terms are materials, and each tableware post item is attached to different terms, depending on the size).
  • Posts type gives an opportunity to display posts titles as the label of the filter options by filtering the related posts. (e.g. you have “Brands” post type and “Collections” post type listing grid. You can select the Posts > Brands to filter the posts of collections type by brands included.)
  • Custom Field data source allows specifying the custom field data inputting the specific field key in case you have the repeater values for a single post in the custom post types.

Step 7 – When you customize the filter, click the Publish button. Now you need to click the Index Filters button on the page, where all smart filters are showed, for indexing filters’ data.

the Index Filters button on the page for indexing filters' data

Step 8 – Go to the page, where you want to assign the filter to the posts. Add the appropriate widget for displaying the publications. For example, in our case, we use the Listing Grid widget of the JetEngine plugin for presenting the created listing with posts.

General content settings in the Listing Grid widget

Step 9 – The last step you need to do is to drop the Checkboxes Filter widget in the certain column and select the created filter specifying the JetEngine Listing Grid content widget in the This filter for the field. Also, there are a lot of different content and style settings, which you can adjust as you wish.

If you have some filters and listing grids, products grids, etc. on the same page, you can use the Query ID option of the filter widget to specify which filter is applied to which widget. You need to input the ID for the listing or product grid in its Advanced settings > CSS ID field and then, duplicate it in the Query ID option of the filter widget.

Content settings for Checkboxes filter

Step 10 – After you have set all the options, click the Update button below and preview how the filter works.

Checkbox filter overview

Well done! Now you know how to create a filter and apply it to the different post types using JetSmartFilters plugin.