Step 1: Ensure You Have ACF and Divi Ajax Filters Installed

Before diving in, make sure you have the following installed and activated:

• Advanced Custom Fields (ACF) – to create custom fields.
• Divi Ajax Filters – to filter any post types and custom fields dynamically.

If you haven’t installed them yet, head to Plugins > Add New, search for them, and activate them. Keeping these plugins updated is also crucial to ensure compatibility with the latest Divi and WordPress versions.

Step 2: Create Your ACF Fields

1. Go to ACF > Field Groups > Add New.
2. Create a new field group and add the necessary fields (e.g., Age, Job Title, Twitter Handle, Bio, Rating, or any relevant custom information).
3. Assign the field group to the relevant post type (e.g., team members, products, testimonials, or custom post types).
4. Save the field group and note down the Field Name (slug) for each field, as we will use them later.

ACF allows you to create various field types, including text, images, links, and even repeater fields for more advanced layouts.

Step 3: Edit Your Divi Loop Layout

To modify your loop layout and incorporate your ACF fields:

1. Navigate to Divi > Divi Library.
2. Locate your existing loop template or create a new one from scratch.
3. Open the Loop Layout in the Divi Builder.
4. Add a Text Module where you want the ACF field to appear.

Next, we need to use Divi Dynamic Content to add the ACF field in our loop.

Step 4: Use Divi Dynamic Content to Add ACF Fields

1. Inside the Text Module, click on the Dynamic Content icon.
2. Scroll down and select Manual Custom Field Name.
3. Enter the slug of your ACF field (e.g., age, job_title, twitter_handle, bio).
4. (Optional) Add before/after text (e.g., “Age: ” before the value, “Follow on Twitter: ” before a Twitter handle).
5. Enable Raw HTML if your field contains links or formatted text (useful for social media links or profile URLs).
6. Click Save & Update.

Pro Tip: You can also use Divi’s Dynamic Content feature to pull images, URLs, or even buttons dynamically if your ACF fields contain such data.

Step 5: Test Your Loop on the Frontend

Now, let’s verify if everything is working correctly:

1. Open your filtered results page.
2. Check if the ACF fields appear correctly in the loop.
3. Modify an ACF field for a post and see if the change reflects immediately.
4. If any fields are missing, double-check your ACF settings and ensure they are linked to the correct post type.

If the fields are not displaying correctly, verify:

• The slug name matches the custom field name.
• The post type has ACF fields assigned.
• The cache has been cleared if you’re using a caching plugin.

Bonus: Style Your ACF Fields

Want to make the ACF fields blend seamlessly into your design?

• Use Divi’s built-in design settings to adjust text size, color, and spacing.
• Apply CSS classes for custom styling and greater flexibility.
• Wrap links inside <a> tags if dealing with URLs (enable Raw HTML in the Dynamic Data settings).
• Use columns and rows in your Divi Builder to create structured layouts for more complex data.

You can also add custom CSS to ensure uniform styling across different modules that display ACF fields. For example, to style a job title field:

.custom-job-title {
  font-weight: bold;
  color: #0073aa;
}

Assign this class to the text module displaying the job title for a polished look.

That’s It! You’re Now a Pro at Displaying ACF Fields in Divi Ajax Filter

You’ve successfully added ACF fields to your Divi filter results without using Divi Machine! This method allows you to customize your loops and make filtered content more informative and visually engaging.

If you found this tutorial helpful, drop a comment below or check out our Divi Engine User Group on Facebook for more advanced tips, troubleshooting, and expert insights.

Happy designing! 🚀