Help Center
How to Use Filters With the ACF Meta Fields

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.

Before you start, check the tutorial requirements:

  • ACF plugin installed and activated

    with Field Group for JetEngine’s CPT built and custom meta fields added and completed

  • JetSmartFilters plugin installed and activated

  • JetEngine plugin installed and activated

    with a Custom Post Type created and posts added

The JetSmartFilters plugin is compatible with the Advanced Custom Fields plugin, so 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 most efficiently.

Build Listing Template

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.

setup listing item popup

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.

listing with acf fields

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

Add all the widgets 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.

listing grid widget

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

Add Filter for ACF Meta Field

Warning

Despite the general compatibility, two fields CAN’T be used for the data filtering: 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. 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.)

filter settings

Checkbox

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

Warning

The Checkbox filter based on the ACF meta data will work only if the Is Checkbox Meta Field (Jet Engine) toggle is enabled.

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

checkbox filter settings

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.

select filter settings

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.

radio filter settings

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.

range filter settings

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.

check range filter settings

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.

rating filter settings

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.

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 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.

Warning

Make sure the Values in the options windows are the same as 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.

visual filter settings

Apply the Filter to the Listing Grid

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.

visual filter applied to the listing grid

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.

css id field in the listing grid

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

That’s it; now you know how to combine the ACF and JetSmartFilters plugins.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.