As you remember, JetSmartFilters has various types of filters that allow choosing the one that adjusts your aims the most: to filter the posts, publication, to select the events in a certain period of time and others. Read more in our tutorials which describes the use of the Select filter, the Check Range filter, the Search filter, the Checkboxes filter, the Range filter, etc.
One of the most frequently used filter type is the Date Range filter type which allows filtering posts by date value: it can be a meta date or a post date.
How to create the Date Range filter in WP Dashboard
1 Step – To create the Date Range filter you must go to WordPress Dashboard and proceed to the Smart Filters > Add new option.
2 Step – Next, you should give a Title to your newly created filter, enter a Filter Label and Active Filter Label.
3 Step – In the Filter Type dropdown menu, you should choose the Date Range option.
4 Step – Then, in the Filter By dropdown menu, you need to select from the default values.
The Meta Date value allows you to filter the posts or products by the meaning set in the meta fields. It can be a date of the event, or it might be an expiring date of the sales, whichever date you want to meet your needs.
The Post Date value gives you an opportunity to filter only by the creation date of a certain post. It would be convenient in a few cases.
How to add a Date Range filter based on the dates in the meta fields read here.
5 Step – In the Query Variable field you are able to set the certain meta field name which will become the source of the search.
You can set any other meta field key beyond that to adjust the filtering for specific posts or products.
How to use the Date Range filter for the publications
You need to display them with the help of the Listing Grid widget of JetEngine plugin. Read here to know more how to display the listing.
Let’s precise some specific setting in the WP Dashboard for filtering the publications.
1 Step – In the Filter By dropdown menu, you should choose the Meta Date value (the customized meta field key) or use the Post Date value (the date of the post’s creating).
The Meta Date value adding is described here with all the details.
2 Step – Next, you should fill out the Query Variable field with necessary values from the meta field keys which you want to be filtered in the publications.
3 Step – After that, you need to display the publications with the help of the Listing Grid widget of JetEngine plugin. Read here to know more about how to do it.
4 Step – Now, open the other page where you want to display your publications with applied filtering with Elementor editor and add there a new section. We recommend you to use the section with two columns to set the listing of needed publications and the filter itself.
5 Step – Fill in the second section with the listing for publications.
6 Step – Drag and drop the Date Range filter to the first column in the section.
7 Step – After that, go to the Content tab and determine the filter in the Select Filter field.
8 Step – Then, specify The filter for the plugin which helps you to create the content for filtering. It can be Elementor Pro, JetEngine Calendar, JetEngine itself etc.
9 Step – In the Apply type dropdown menu, you should specify the filter type.
An AJAX filter type allows filtering with the help of AJAX method, that means without reloading the page, which makes the process of filtering much faster.
The Page Reload filter reloads the page as many times the user applies the filter.
10 Step – Next, you are able to change the Apply button text with the text you want to be presented on the button to simplify or maybe customize the process of filtering.
11 Step – If you have applied the Apply button before, now you can determine the specific icon in the Apply button icon dropdown from the default ones or add the custom one in SVG format type.
12 Step – If you toggle on the Show filter label option, you will enable the displaying of the label that you determined in WP Dashboard (see the first part of this guide).
13 Step – In Query ID field you can fill in the ID of the section for which you want to apply the certain filter. It is very useful if you have several filters to a different section on the same page.
14 Step – Proceed to the Style tab and customize the view of your filter. Click Publish button, go to the Preview and check out all the setting you’ve performed.
How to use the Date Range filter for the products
Let’s define more exactly some particular setting in the WP Dashboard for filtering the products on the WooCommerce shop page.
1 Step – In WP Dashboard go to the Filter By dropdown menu, you should choose the Meta Date value (the customized meta field key). It might be not very useful to select the Post Date value for the products.
How to perform adjusting a Date Range filter based on the dates in the meta fields read here.
2 Step – Then, in the Query Variable field, you should set the certain meta field name which will become the source of the search.
You should use the meta field keys which are used in the Meta Box fields.
3 Step – After that, you should show the created products on the Archive page. Follow the link for further information.
Now, you should perform the same actions, as were described for the publications filtering with some specific details.
You should determine The filter for that plugin that helped you with creating the products. It must be one of the next ones: JetWooBuilder Products Grid/List, WooCommerce Archive/Shortcode or JetEngine. It depends on the tool that you used to create the content for filtering.
Now you can create and use the Date Range filter to filter either the publications or products with Date value in the meta fields.