{"id":21984,"date":"2021-01-26T15:42:15","date_gmt":"2021-01-26T15:42:15","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=21984"},"modified":"2025-02-11T11:01:38","modified_gmt":"2025-02-11T11:01:38","slug":"jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/","title":{"rendered":"How to Use Filters With the ACF Meta Fields"},"content":{"rendered":"\n

The JetSmartFilters<\/em> plugin is compatible with the Advanced Custom Fields<\/em> plugin, so you don\u2019t have to re-insert the data you\u2019ve already added to the ACF <\/em>meta fields.\u00a0<\/p>\n\n\n\n

You can create a JetEngine <\/em>listing and Listing Grid<\/strong><\/a> using the ACF <\/em>meta fields and afterward sort the shown results via JetSmartFilters<\/em>. This tutorial will show you how to combine those plugins most efficiently.<\/p>\n\n\n\n

Build Listing Template<\/h2>\n\n\n\n
\n

Go to WordPress Dashboard > JetEngine > Listings<\/em><\/strong> and hit the \u201cAdd New<\/strong>\u201d button to build a listing template<\/a>.\u00a0<\/p>\n\n\n\n

In the Listing source<\/strong> drop-down menu, choose the \u201cPosts\u201d option, set From post type<\/strong> to the custom post you\u2019ve created, give the listing a name, and press the \u201cCreate Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n

\"setup<\/a><\/div>\n\n\n\n

You will also need the Dynamic Field<\/strong><\/a> widget to add the ACF <\/em>meta fields. Find it in the widget menu and drop it on the page.\u00a0<\/p>\n\n\n\n

Open the Content <\/strong>menu section and choose the \u201cACF\u201d option in the Source <\/strong>drop-down. Choose the field you want to add to the ACF Field<\/strong> drop-down list.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

You can also customize the output just like for the JetEngine<\/em> meta fields<\/a>.\u00a0<\/p>\n\n\n\n

Add all the widgets you need and hit the \u201cPublish<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n

Create Listing Grid<\/h2>\n\n\n\n
\n

Open the page where you would like to place the Listing Grid<\/strong> in the Elementor Page Builder.\u00a0<\/p>\n\n\n\n

Find the Listing Grid<\/strong><\/a> widget and drop it to the page. In the Listing<\/strong> drop-down menu, choose the listing template you\u2019ve just created.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

Do the customization and make the Listing Grid<\/strong> fit your needs. Afterward, click the \u201cPublish<\/strong>\u201d button to save the changes.<\/p>\n<\/div><\/div>\n\n\n\n

Add Filter Based on the ACF Meta Field<\/strong><\/strong><\/h2>\n\n\n
<\/svg><\/div>
Warning<\/div>

Despite the general compatibility, two fields can\u2019t be used for the data filtering: \u201cDate Picker\u201d and \u201cDate Time Picker.\u201d<\/p><\/div><\/div>\n\n\n\n

\n

If you add those fields to the post and try to sort the Listing Grid<\/strong> items according to them right after, it won\u2019t work. That is because the \u201cDate\u201d ACF <\/em>fields store the date in a way that JetSmartFilters<\/em> can\u2019t use. You can still use those meta fields and add them to listings but don\u2019t try to filter posts according to them.<\/p>\n\n\n\n

Go to the WordPress Dashboard > Smart Filters > Add New<\/em><\/strong>.\u00a0<\/p>\n\n\n\n

Choose the Filter Type<\/strong> (except \u201cDate Range\u201d and \u201cDate Period\u201d filters.)<\/p>\n\n\n\n

\"filter<\/a><\/div>\n\n\n\n

Checkbox<\/h3>\n\n\n\n

As for the \u201cCheckboxes list<\/a>\u201d filter settings, mind activating the Get Choices From Field Data <\/strong>toggle and select \u201cACF\u201d as the Field Source Plugin<\/strong>.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

The \"Checkbox\" filter based on the ACF<\/i> meta data will work only if the Is Checkbox Meta Field (Jet Engine)<\/strong> toggle is enabled.<\/p><\/div><\/div>\n\n\n\n

Also, don\u2019t forget to paste the Field Name <\/strong>of the Checkbox field created earlier with ACF <\/em>into the Query Variable <\/strong>field.<\/p>\n\n\n\n

\"checkbox<\/a><\/div>\n\n\n\n

Select and Radio<\/strong><\/h3>\n\n\n\n

The \u201cSelect<\/a>\u201d filter has similar settings to the \u201cCheckbox\u201d one.<\/p>\n\n\n\n

Initially, you can activate the Is hierarchical <\/strong>toggle if there is a need to create some hierarchy in the ACF <\/em>Select filter. Also, check the How to Create a Custom Taxonomy Hierarchical Filter with Select Filter Type<\/strong><\/a> tutorial.<\/p>\n\n\n\n

Then, pick the \u201cCustom Fields\u201d option as the Data Source<\/strong>. <\/p>\n\n\n\n

Change the text that will be displayed as a Placeholder <\/strong>on the filter. And necessarily, insert the Custom Field Key <\/strong>(the Field Name<\/strong> of the necessary ACF <\/em>meta field).<\/p>\n\n\n\n

Then, repeat the steps described above for the \u201cCheckbox\u201d filter. However, the Is Checkbox Meta Field (Jet Engine) <\/strong>toggle does not need to be switched on.<\/p>\n\n\n\n

The Comparison operator <\/strong>can be set here as well.<\/p>\n\n\n\n

\"select<\/a><\/div>\n\n\n\n

As for the \u201cRadio<\/a>\u201d Filter Type<\/strong>, it has the same fields for completion. Although there are Add all option <\/strong>and Ability to deselect radio buttons<\/strong> toggles.<\/p>\n\n\n\n

\"radio<\/a><\/div>\n\n\n\n

Range<\/strong><\/h3>\n\n\n\n

To set the max and min values of the \u201cRange<\/a>\u201d filter automatically from the ACF <\/em>field, you have to choose the \u201cGet from query meta key\u201d option in the Get min\/max dynamically<\/strong> drop-down menu.\u00a0<\/p>\n\n\n\n

Afterward, type in the Field Name<\/strong> of the meta field in the Query Variable<\/strong> bar.<\/p>\n\n\n\n

\"range<\/a><\/div>\n\n\n\n

Check Range<\/span><\/span><\/h3>\n\n\n\n

To apply the data from the ACF <\/em>meta field in the \u201cCheck Range<\/a>\u201d filter, you just have to paste the meta field\u2019s Field Name<\/strong> to the Query Variable<\/strong> bar. All the other settings can be set the same way as for the JetEngine<\/em> meta fields.<\/p>\n\n\n\n

\"check<\/a><\/div>\n\n\n\n

Rating<\/strong><\/h3>\n\n\n\n

As for the \u201cRating<\/a>\u201d filter, the Stars count<\/strong> bar, you have to set the maximum number of stars the user can give to an item. Set the Inequality operator<\/strong> to the \u201cEquals (=)\u201d option to sort out only the posts with the same number of stars as you set in the filter.\u00a0<\/p>\n\n\n\n

In the Query Variable<\/strong> bar, type in the Field Name<\/strong> of the ACF <\/em>field with the rating.<\/p>\n\n\n\n

\"rating<\/a><\/div>\n\n\n\n

Search<\/strong><\/h3>\n\n\n\n

You can make the \u201cSearch<\/a>\u201d filter seek the words not through the titles and general content but only in a specific field, such as an ACF <\/em>text meta field.\u00a0<\/p>\n\n\n\n

In the Search by<\/strong> drop-down menu, choose the \u201cBy Custom Field\u201d option and define the field in the Query Variable<\/strong> bar.<\/p>\n\n\n\n

\"search<\/a><\/div>\n\n\n\n

Visual<\/strong><\/h3>\n\n\n\n

You can combine the \u201cVisual<\/a>\u201d filter with any ACF <\/em>\u201cSelect\u201d or \u201cRadio\u201d meta field.\u00a0<\/p>\n\n\n\n

In the Data Source<\/strong> drop-down menu, choose the \u201cManual Input\u201d option. Its Type <\/strong>can be \u201cImage\u201d or \u201cColor,\u201d so choose the one you like and select the needed option in the Behavior <\/strong>drop-down list. <\/p>\n\n\n\n

Now, you have to add the options manually by clicking the \u201cNew Option<\/strong>\u201d button in the Options List<\/strong> field.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

Ensure the Values<\/strong> in the options windows are the same as you used for the ACF<\/i> field in the Choices<\/strong> text area.<\/p><\/div><\/div>\n\n\n\n

The field you will use is not the \u201cCheckbox\u201d JetEngine <\/em>field, so ignore the Is Checkbox Meta Field<\/strong> toggle.\u00a0<\/p>\n\n\n\n

In the Query Variable<\/strong> bar, paste the name of the field you would like to use.<\/p>\n\n\n\n

\"visual<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Apply the Filter to the Listing Grid<\/strong><\/h2>\n\n\n\n
\n

Once you create an ACF<\/em> filter, it is time to apply it to the Listing Grid<\/strong>. <\/p>\n\n\n\n

Open the page where you\u2019ve placed the Listing Grid<\/strong> 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<\/strong>.\u00a0<\/p>\n\n\n\n

In the Select filter<\/strong> drop-down menu, choose the ACF <\/em>filter you\u2019ve created. You will apply this filter to the JetEngine <\/em>Listing Grid<\/strong>, so select the \u201cJetEngine\u201d option in the This filter for<\/strong> drop-down list.<\/p>\n\n\n\n

\"visual<\/a><\/div>\n\n\n\n

If several JetEngine <\/em>elements are on the page, you need to click on the Listing Grid<\/strong> and go to the Advanced <\/strong>menu tab. Set the CSS ID<\/strong>, copy it, and paste it to the Query ID<\/strong> bar of the filter.<\/p>\n\n\n\n

\"css<\/a><\/div>\n\n\n\n

The other settings can be customized according to your needs. Press the \u201cPublish<\/strong>\u201d button once all the changes are made.<\/p>\n<\/div><\/div>\n\n\n\n

That\u2019s it; now you know how to combine the ACF <\/em>and JetSmartFilters <\/em>plugins to build ACF <\/em>filters on your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 for WordPress.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[420],"yoast_head":"\nHow to Combine Filters With ACF Fields \u2014 JetSmartFilters | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to create a Listing Grid that displays the ACF plugin meta field values and then use JetSmartFilters to apply different filters to it on your WordPress website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Combine Filters With ACF Fields \u2014 JetSmartFilters | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a Listing Grid that displays the ACF plugin meta field values and then use JetSmartFilters to apply different filters to it on your WordPress website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-11T11:01:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/02\/setup-listing-item-popup-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/\",\"name\":\"How to Combine Filters With ACF Fields \u2014 JetSmartFilters | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2021-01-26T15:42:15+00:00\",\"dateModified\":\"2025-02-11T11:01:38+00:00\",\"description\":\"Learn how to create a Listing Grid that displays the ACF plugin meta field values and then use JetSmartFilters to apply different filters to it on your WordPress website.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Filters With the ACF Meta Fields\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Combine Filters With ACF Fields \u2014 JetSmartFilters | Crocoblock","description":"Learn how to create a Listing Grid that displays the ACF plugin meta field values and then use JetSmartFilters to apply different filters to it on your WordPress website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/","og_locale":"en_US","og_type":"article","og_title":"How to Combine Filters With ACF Fields \u2014 JetSmartFilters | Crocoblock","og_description":"Learn how to create a Listing Grid that displays the ACF plugin meta field values and then use JetSmartFilters to apply different filters to it on your WordPress website.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/","og_site_name":"Help Center","article_modified_time":"2025-02-11T11:01:38+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/02\/setup-listing-item-popup-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/","name":"How to Combine Filters With ACF Fields \u2014 JetSmartFilters | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2021-01-26T15:42:15+00:00","dateModified":"2025-02-11T11:01:38+00:00","description":"Learn how to create a Listing Grid that displays the ACF plugin meta field values and then use JetSmartFilters to apply different filters to it on your WordPress website.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-with-the-acf-meta-fields\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Use Filters With the ACF Meta Fields"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/21984"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=21984"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=21984"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=21984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}