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.
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.
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.
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.
Step 5 – 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.
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.
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.
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.
Step 10 – After you have set all the options, click the Update button below and preview how the filter works.
Well done! Now you know how to create a filter and apply it to the different post types using JetSmartFilters plugin.