Go to WordPress Dashboard > JetEngine > Listings and hit the “Add New” button to build a listing template. 

In the Listing source drop-down menu, choose the “Posts” option, set From post type to the custom post you’ve created, give the listing a name, and press the “Create Listing Item” button.

You will also need the Dynamic Field widget to add the ACF meta fields. Find it in the widget menu and drop it on the page. 

Open the Content menu section and choose the “ACF” option in the Source drop-down. Choose the field you want to add in the ACF Field drop-down list.

You can also customize the output just like for the JetEngine meta fields. 

Add all the widgets you need and hit the “Publish” button.

Open the page where you would like to place the Listing Grid in the Elementor Page Builder. 

Find the Listing Grid widget and drop it to the page. In the Listing drop-down menu, choose the listing template you’ve just created.

Do the customization and make the Listing Grid fit your needs. Afterward, click the “Update” button to save the changes.

If you add those fields to the post and try to sort the Listing Grid items according to them right after, it won’t work. That is because the Date ACF fields store the date in a way that JetSmartFilters can’t use it. You can still use those meta fields and add them to listings but don’t try to filter posts according to them.

Go to the WordPress Dashboard > Smart Filters > Add New. 

Choose the Filter Type (except Date Range and Date Period filters.)

Checkbox

As for the “Checkboxes list” filter settings, mind activating the Get Choices From Field Data toggle and select “ACF” as Field Source Plugin.

Also, don’t forget to paste the Field Name of the Checkbox field created earlier with ACF in the Query Variable field.

Select and Radio

The “Select” filter has similar settings to the “Checkbox” one.

Initially, you can activate the Is hierarchical toggle if there is a need to create some hierarchy in the filter. Then, pick the “Custom Fields” option as the Data Source.

Change the text that will be displayed as a Placeholder on the filter. And necessarily, insert the Custom Field Key (the Field Name of the necessary ACF meta field).

Then, repeat the steps described above for the “Checkbox” filter. However, here the Is Checkbox Meta Field (Jet Engine) toggle is not needed to be switched on.

The Comparison operator can be set here as well.

As for the “Radio” Filter Type, it has the same fields for completion. Although there are Add all option and Ability to deselect radio buttons toggles.

Range

To set the max and min values of the range automatically from the ACF field, you have to choose the “Get from query meta key” option in the Get min/max dynamically drop-down menu. 

Afterward, type in the Field Name of the meta field to the Query Variable bar.

Check Range

To apply the data from the ACF meta field in the “Check Range” filter, you just have to paste the meta field’s Field Name to the Query Variable bar. All the other settings can be set the same way as for the JetEngine meta fields.

Rating

In the Stars count bar, you have to set the max number of stars the user can give to an item. Set the Inequality operator to the “Equals (=)” option to sort out only the posts with the same number of stars as you set in the filter. 

In the Query Variable bar, type in the Field Name of the ACF field with the rating.

Search

You can make the “Search” filter seek the words not through the titles and general content but only in a specific field. That could be an ACF text meta field. 

In the Search by drop-down menu, choose the “By Custom Field” option and define the field in the Query Variable bar.

Visual

You can combine this filter with any ACF “Select” or “Radio” meta field. 

In the Data Source drop-down menu, choose the “Manual Input” option. Its Type can be “Image” or “Color,” so choose the one you like and select the needed option in the Behavior drop-down list. 

Now you have to add the options manually by clicking the “New Option” button in the Options List field.

The field you will use is not the “Checkbox” JetEngine field, so ignore the Is Checkbox Meta Field toggle. 

In the Query Variable bar, paste the name of the field you would like to use.

Once you create a filter, it is time to apply it to the Listing Grid. 

Open the page where you’ve placed the Listing Grid in the Elementor Page Builder. Find one of the filter widgets in the widget menu and drop it to the page near the Listing Grid. 

In the Select filter drop-down menu, choose the filter you’ve created. You will apply this filter to the JetEngine Listing Grid, so select the “JetEngine” option in the This filter for drop-down list.

If several JetEngine elements are on the page, you need to click on the Listing Grid and go to the Advanced menu tab. Set the CSS ID, copy it, and paste it to the Query ID bar of the filter.

The other settings can be customized according to your needs. Press the “Publish/Update” button once all the changes are made.