Elementor ACF Repeater fields can be a bit tricky to display if you’re not using the right tools. This tutorial aims to show you how to easily display your ACF Repeater Fields using Dynamic Content for Elementor.
Prerequisites
Please make sure you have the following installed and activated:
- Elementor Pro
- Advanced Custom Fields Pro (ACF)
- Dynamic Content for Elementor (Dynamic.ooo)
Setting Up ACF Repeater Fields
- Navigate to
Custom Fields > Add New
and create a new field group. - Add a repeater field and name it “Working Hours”.
- Inside the repeater field, add the following sub-fields:
- Office Location (Text)
- Day of the Week (Text)
- Working Hours (Text Area)
Creating an Elementor Template
- Open the Elementor Theme Builder.
- Navigate to
Templates > Add New
and select “Section” as the template type. - Drag the “ACF Fields” widget from Dynamic Content for Elementor into your section.
- Select the ACF field you want to display (e.g., Office Location).
- Customize the appearance and save the template.
Displaying ACF Repeater Fields in Elementor
- Go to
Elementor > Theme Builder
and edit your desired template. - Search for the “ACF Repeater” widget from Dynamic Content for Elementor and drag it into your layout.
- Select the ACF Repeater field (“Working Hours”) you want to display.
- Choose the data source as “Current Post”.
- Select “Template” as the display mode and pick the template you created earlier.
- Update your changes and preview the layout.
Customizing the Display
- Edit the ACF Repeater widget in Elementor.
- Switch to the “Style” tab.
- Adjust typography, colors, and layout as needed.
- Update your changes.
Elementor ACF Repeater with Dynamic.ooo – Conclusion
Displaying Elementor ACF Repeater fields doesn’t have to be complicated. With the right tools like Dynamic Content for Elementor, you can easily showcase dynamic content on your website.