By this time, you have probably installed and used the ACF plugin, so we will not dig into the details of its usage. Let’s just briefly list the steps you had to get through before creating a listing template.

1. Create a Custom Post Type with the help of the JetEngine plugin and add as many posts as you need;
2. Create and add the ACF Field Group to the Custom Post Type you’ve created;
3. Go to every post and fill the ACF meta fields with the necessary information.

When all of that is done, you can start creating a Listing Grid.

Build listing template

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

The details of the listing template creation process can be found in this tutorial. To add the ACF meta fields, you will also need the Dynamic Field widget. Find it in the widget menu and drop it to the page. Open the Content menu section and choose the “ACF” option in the Source drop-down. In the ACF Field drop-down list, choose the field you would like to add.

You can also add the icon and customize the output just the same way as for the JetEngine meta fields. Add all the fields you need and hit the “Publish” button.

Create listing grid

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 green “Update” button to save the changes.

Go to the Smart Filters > Add New. Give the filter a name and type in the Filter Label and Active Filter Label. Afterward, choose the Filter Type. It was said previously that the Checkbox, Date Picker, and Date Time Picker fields don’t work correctly with JetSmartFilters. That’s why we also won’t use Checkboxes list, Date Range, and Date Period filters.

Select and Radio

Those two fields have almost similar settings.

• Is hierarchical. Turn this toggle on if you would like to create some hierarchy in the filter;
• Data Source. In this drop-down menu, you have to choose the Custom Field option;
• Custom Field Key. Insert the Field Name of the necessary ACF meta field here;

• Get Choices From Field Data. Turn this toggle on because it allows the filter to take the values from the field you’ve chosen in the Custom Field Key bar;
• Field Source Plugin. In this drop-down menu, choose the ACF option;
• Placeholder. If you are working with the Select filter, here you can choose what will be shown in the filter bar before the user makes a choice;
• Is Checkbox Meta Field (Jet Engine). This toggle has to be enabled if you are dealing with the JetEngine Checkboxes field, so you don’t need to turn it on.

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 to the Query Variable bar. All the other settings are up to you and if you need some details – check this Range filter usage tutorial.

Check Range

The usage of the Check Range filter is described in this tutorial. To apply the data from the ACF meta field in it, you just have to paste its 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, so that it will sort out only the posts that have 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 certain 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 either be “Image” or “Color”, so choose the one you like and select the “Radio” option in Behavior drop-down list. Now you have to add the options manually by clicking the “New Option” button in the Options List field. Make sure the Values in the options windows are the same you used for the ACF field in the Choices text area.

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 created 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. For example, it could be Radio Filter.

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

If there are several JetEngine elements 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. More details about the features of the filter widgets you can read in this tutorial.