How to use ACF (Advanced Custom Fields) Repeater Field in Elementor Page builder?

You seem to be a web developer, Who is making complex WordPress Websites Smart Ways. Decide to use ACF Pro’s Repeater field is smart move for your WordPress Website. We come to know, many issues while using ACF Pro’s Repeater field with Elementor, We have a nice solution for your problem, Which will help you setup ACF Repeater Field values quickly using Elementor Page Builder and The Plus Addons for Elementor.

Initial Setup :

1. You will need Elementor Free or Pro, ACF Pro and The Plus Addons for Elementor Pro Version for this ACF Repeater Compatibility.
2. You must be aware of How to Setup ACF Repeater field in your post type. If not, You may look at blog post by ACF Pro team about How to Setup ACF Repeater?

Elementor Template for ACF Loop Setup :

1. Go to Elementor templates from WordPress Dashboard and Create One Template by clicking Add New. Dashboard -> Templates -> Saved templates
image 2020 01 02T10 20 13 952Z The Plus Addons for Elementor

2. Scroll down and configure your options for Preview of your Loop Design.
You will find. 

Option 1: Render Mode with Options Default or ACF Repeater Content. Choose ACF Repeater Content.
Option 2: Select Preview Post, Select Post from the list. This Post’s data will be used while rendering to show you preview. So Make Sure you have content added in that Post.
Option 3: Select ACF Field, This option let you select ACF Field Used from that Post.
image 2020 01 02T10 19 02 076Z The Plus Addons for Elementor
3. You need to make Loop Design and for that You will need to use widget called, “TP Custom Field”, If that is not available in The Plus Addons options in elementor backend, You need to make sure, It’s activated from The plus Settings -> Plus Widgets.
image 2020 04 11T08 04 45 520Z The Plus Addons for Elementor
4. In “TP Custom Field” Widget, You will have multiple options to design a loop. Two important options from that widget is as below.
Name Field : You need to add field_key value from ACF Repeater.
Field Type : There are total 6 different fields supported Such as Image, Link, Video, Audio, Date, HTML, and oEmbed. And rest options in that widget are related to cosmetic and Field Type Related. You can use and customise them as per you needs to make a loop.
image 2020 01 02T10 28 47 294Z The Plus Addons for Elementor

ACF Repeater Field Listing :

1. As, You already have ACF Loop template ready according to previous steps. You now need to use widget of The Plus Addons Called, “Dynamic Listing”.
image 2020 01 02T10 29 36 067Z The Plus Addons for Elementor
2. You need to go to “Content Settings -> Post Listing Types -> ACF Repeater”. Once you select “ACF Repeater”, You will have option to select template underneath, Select template you made recently and you are good to go.
image 2020 01 02T10 47 09 507Z The Plus Addons for Elementor
3. There are lots of different listing options in dynamic listing widget of The Plus Addons. You may visit Dynamic Listing for more details.
You also can take a look at our video tutorial :
YouTube video
Thanks for reading till the end, Hope above article would have helped you to design amazing ACF Repeater Listing using The Plus Addons and Elementor Page Builder. If you have any further questions, Feel free to reach us using comment box below.

Leave Your Comment

Follow Us

Subscribe

Subscribe us for Amazing Updates and News about Elementor.

X