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.

1 Step — Prepare for creating filters

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.

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

2 Step — Create a new filter

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

Let’s start by 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

Filter 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

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 meta field data inputting. To get the data – type in the field name to the Custom Field Key bar.

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

3 Step — Assign the filter to the post

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.

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

JetSmartFilters settings
  • Select filter. You can choose the filter you created for the page from the drop-down menu;
  • This filter for. All the plugins, widgets, and extensions JetSmartFilter is compatible with are listed here. You can specify what part of the content you are working with right now;
  • Apply type. This option allows you to choose the way the results of filtering will be shown. AJAX type will show the results list without reloading the page. Reload page will, obviously, reload the page to show the results. Mixed type won’t reload the page but transforms the page’s URL so that you can copy it and send someone the filtering results page;
  • Apply on. Here you choose when the filtering begins. You can set it to show results right after the value is changed (user matches the checkbox) or when he clicks the “Apply” button;
  • Show apply button. If you have chosen the “Click on apply button” variant in the previous option, then you can turn on the apply button showing and set its title;
  • Show filter label. This toggle turns on displaying the filter label. If you do turn it on – the labor will appear on the top of the widget;
  • Query ID. If you have some filters and listing grids, product grids, etc. on the same page, you can use this 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;
  • Additional Providers Enabled. You can use this option if you need to apply filtering to a number of widgets created by different providers. In the Item menu, you can choose the provider of the widget and specify the widget ID. It is possible to add as many additional items as you need by just hitting the “Add Item” button.

After you have set all the options, click the “Update” button below, and preview how the filter works.

Checkbox filter overview

If there still are any problems with creating a smart filter, then you may find it useful to watch a part of this video:

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