Back to contents

JetSmartFilters: How to Use Filters With the ACF Meta Fields

From this tutorial, you will learn how to sort the data of the meta fields created with the ACF plugin by means of the JetSmartFilters functionality.

The JetSmartFilters plugin is compatible with the Advanced Custom Fields plugin, which means you don’t have to re-insert the data you’ve already added to the ACF meta fields. You can create a JetEngine listing and Listing Grid using the ACF meta fields and afterward sort the shown results via JetSmartFilters. This tutorial will show you how to combine those plugins in the most efficient way.

ACF fields compatibility

Despite the general compatibility, there are two fields that CAN’T be used for the data filtering –  they are Checkbox, Date Picker, and Date Time Picker

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. And the Checkboxes can’t be properly comprehended. You can still use those meta fields and add them to the listings but don’t try to filter the posts according to them.

How to create a Listing Grid with ACF meta fields

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.

1 Step— Build a 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.

adding a new listing template

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.

dynamic field settings

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.

2 Step— Create a 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.

acf listing grid settings

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

How to create a filter for the ACF meta field

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.

adding new filter

Select and Radio

Those two fields have almost similar settings.

select filter 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;
acf field name
  • 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.

query variable bar

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.

rating filter settings

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.

search filter settings

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.

visual filter settings

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.

acf choices bar

How to apply the filter to the Listing Grid

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.

radio filter widget settings

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. 

listing grid advanced settings

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.

That’s it. Now you know how to combine the ACF and JetSmartFilters plugins. Good luck creating an attractive and convenient website!