June 8, 2023

Integrate JetSmartFilters with ACF Fields in Elementor

Play Video

Do you want to Integrate JetSmartFilters with ACF Fields? The ability to filter content based on custom fields is a game-changer. This tutorial focuses on how to seamlessly integrate JetSmartFilters with Advanced Custom Fields (ACF) while using Elementor.

Created by Wicky Design this tutorial is based on a practical project scenario where the use of ACF fields was required, and there was a need to use JetSmartFilters with that data. The good news is, JetSmartFilters has excellent compatibility with ACF Fields. Learn how to set up a radio filter and a select filter inside JetSmartFilters, with the data being pulled from ACF.

The approach is straightforward and easy to follow, making it suitable for WordPress users, developers, and designers of various skill levels. By the end of this tutorial, you will be able to enhance your WordPress site’s functionality and user experience by implementing dynamic filters using JetSmartFilters and ACF.

Tutorial Steps

  1. Setting Up ACF Fields
    Start by setting up your ACF fields. For this tutorial, we will be using a radio button field and a select field. Make sure to copy the field name as you will need it for setting up JetSmartFilters.
  2. Setting Up JetSmartFilters
    Navigate to JetSmartFilters in your WordPress dashboard and click on ‘Add New’. Type in your filter name and make sure it matches your ACF field. For a radio button field, choose ‘Radio’ under ‘Filter Type’. For the data source, choose ‘Custom Fields’. Paste the field name you copied from ACF into the ‘Custom Field Key’ box. Click on ‘Get Choices from Field’ and select ‘ACF’ under ‘Get Choices from’. Paste the field name again into the ‘Query Variable’ box and add an equals sign (=) after it. Click ‘Update’ to save your changes.
  3. Implementing the Filters in Elementor
    Open your page in Elementor and add the JetSmartFilters widgets to your page. For the radio button filter, use the ‘Radio Filter’ widget, and for the select field, use the ‘Select Filter’ widget. Make sure to select the correct filter from the dropdown menu in the widget settings.
  4. Connecting the Filters to Your Content
    To connect the filters to your content, you need to set the ‘Query ID’ in your content widget (e.g., the Posts widget if you’re displaying posts) to ‘JetSmartFilters’. This tells JetSmartFilters which content to filter.
  5. Testing the Filters
    Once everything is set up, test your filters to make sure they’re working correctly. The filters should display the options from your ACF fields, and selecting an option should filter the content accordingly.

Why you should combine ACF with JetSmartFilters

Understanding how to integrate JetSmartFilters with ACF fields is a valuable skill for any WordPress user, developer, or designer. It allows you to create more dynamic and interactive websites, improving the user experience and making your site more engaging.

Use Cases for JetSmartFilters with ACF

There are numerous real-world applications for integrating JetSmartFilters with ACF fields. Here are a few examples:

  • Real Estate Websites
    You can use ACF to create custom fields for property details like location, property type, price, etc. Then, use JetSmartFilters to allow users to filter properties based on these details.
  • E-commerce Stores
    Create custom fields for product attributes like color, size, brand, etc., and allow customers to filter products based on these attributes.
  • Job Boards
    Use ACF to add custom fields for job details like job type, location, salary range, etc. Then, use JetSmartFilters to allow job seekers to filter jobs based on these details.
  • Business Directories
    Create custom fields for business details like business type, location, opening hours, etc., and allow users to filter businesses based on these details.

Common Issues Integrating JetSmartFilters with ACF

  1. JetSmartFilters not displaying the correct options
    Make sure you’ve correctly copied the field name from ACF and pasted it into the correct boxes in JetSmartFilters.
  2. Filters not affecting the content
    Ensure you’ve set the ‘Query ID’ in your content widget to ‘JetSmartFilters’. This tells JetSmartFilters which content to filter.
  3. JavaScript error when no results are found
    By default, Elementor doesn’t display anything when no results are found. You can fix this by adding a function to display a custom message when no results are found.

Required Resources

JetSmartFilters Logo
Payment required
Elementor Logo
Free Options
Credit to Wicky Design
Immerse yourself in the world of web design with Barbara and Mark, a talented husband and wife duo based in Philadelphia, PA. Their channel focuses on everything from web design and Elementor to WordPress and growing an online business. With their unique blend of experience and expertise, they offer invaluable tips, tutorials, and insights for both beginners and experts.
Integrate JetSmartFilters with ACF Fields in Elementor
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.