Name the filter

To create the Date Range filter, you must go to WordPress Dashboard > Smart Filters. Click the “Add New” button to start the filter creation. Give a Title to your newly created filter, enter a Filter Label, and Active Filter Label.

Define the filter’s settings

In the Filter Type dropdown menu choose the “Date Range” option. Then, in the Filter By dropdown menu, you need to select one of two 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.

Date Range filter based on dates from meta field

In case you want to filter by Meta Date, you need to create Custom Post Type first. Let’s have a closer look at how to do that.

Firstly, navigate to JetEngine > Post Types and click on the “Add New” button. Here you need to create an Events Post Type and add Meta Fields to it.

In the Meta Field box write a Title, paste the Name/ID (for us it will be “date-”), and in the Type section select “Date”. After that, click on the “Add Post Type” button.

The next step is to copy the Name/ID “date-” from your Meta Field and paste it into the Query Variable field in the Smart Filters that you were creating.

Create the Listing Grid and the filter

First of all, you have to create a posts grid that will be sorted by your filter. The best way to display posts is to create a Listing Grid using the JetEngine plugin. If you need a hint – get through our Listing Grid creation tutorial.

To apply the Date Range filter to the Listing Grid, in the Filter By dropdown menu, you can choose either the “Meta Date” value (and add the meta field name to the Query Variable bar) or the “Post Date” value. In the second variant, the posts will be filtered by the date of creation.

Add the Listing Grid and the Date Range filter to the page

Open the page where you want to display your publications with the Elementor editor and add a new section. We recommend you use the section with two columns to set the listing of needed publications and the filter itself.

Drag-and-drop the Listing Grid widget to the right column and select the created listing in the Listing drop-down menu. Do the necessary customization and then drag and drop the Date Range filter to the left column of the section.

After that, go to the Content tab and determine the filter in the Select filter field. Specify the provider in The filter for drop-down menu. It can be Elementor Pro, JetEngine Calendar, JetEngine itself, etc.

In the Apply type dropdown menu, you should specify the filter type.

• An AJAX filter type allows filtering with the help of the AJAX method, which 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.

If you need a detailed overview of the filter’s Content settings tab, you should follow the link and go through this guide.

When you are done with the settings, proceed to the Style tab, and customize the view of your filter. Click the “Publish” button, go to the Preview, and check out what it all looks like together.

The process will be almost the same as for the posts. Let’s define what will be the difference in particular settings in the WP Dashboard for filtering the products on the WooCommerce shop page.

1. In the Filter By dropdown menu, you should choose the “Meta Date” value. It might not be very useful to select the “Post Date” value for the products. Then, in the Query Variable field, you should set the certain meta field name which will become the source of the search.
2. After that, you should show the created products on the Archive page. If you need a hint – here’s our Archive page template creation tutorial.
3. In the Content settings tab, you should choose “JetWooBuilder Products Grid/List”, “WooCommerce Archive/Shortcode” or “JetEngine” options in The filter for drop-down menu. It depends on the tool that you used to create the content for filtering.