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.

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.

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

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.

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

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.

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.

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