Create Dynamic Content using ACF Repeater on Elementor - WpBuilt 1350476922971574623
Create Dynamic Content using ACF Repeater on Elementor

Create Dynamic Content using ACF Repeater on Elementor

Want Elementor Addons for your Website? Click here!

ACF Repeater Plugin has been in the WordPress Development scene since the early days of WordPress itself. It brings along limitless possibilities for different types of websites by adding dynamic data to WordPress-generated content through the creation of Custom Fields.

On the other hand, Elementor allows you to insert ACF Custom Field data dynamically to your designs and templates. Styling wouldn’t be limited as you can use the styling options that Elementor already offers.

In this guide, I will show you a step-by-step tutorial for making dynamic content on your website. Here is what it will look like:

Note: This tutorial requires Elementor Pro, Anywhere Elementor Pro and the ACF repeater plugins.

Step 1
Create an AE templates

Step 2
Scroll down and look for the “Anywhere Elementor settings”. Change the “Render Mode” to “Block Layout”, save the template and open it using the Elementor visual editor.

As you can see, the section contains icons text and check icon. I already had an input for the Field Label and Field Name as “additional_details_list”.

Step 3
Continue to the template in the Elementor visual editor and use the AE Custom Field widget to show data from the Repeater subfields.

Step 4
In the AE – Custom Field widget, within the name field, now specify the key or slug of your subfield.

You can then use the Image Widget and it will automatically populate the list with appropriate icons.

Step 5
Now since we’re finished setting up, don’t forget the title of your Custom Field Template because you will be using that as a reference for the next procedure. You’re ready now to create a Custom Post Type page which you will be using on your Single Post page.

Step 6
I’ve shown a screenshot for the Single Post template including additional sections (as shown inside the red box, it automatically displays the list of fields that you set using the AE Custom Field). However, before proceeding on setting up the functionality, you need to look for the Anywhere Elementor ACF Repeater Widget, and on the Template Field look for the template title that you created through the repeater field you will be using on the section.

Now, you can add as many lists on the post editor as you want and it will automatically be displayed on the front-end.

Congratulations! You can now create dynamically generated content for your WordPress and Elementor website!

How can we improve this guide? Please let us know in the comments section! 🙂

This Post Has 5 Comments

  1. Andrew

    I used an Elementor PRO template that has a pricing section (a restaurant menu.) I noticed that you could add as many items as you like to the menu and each item had the ability to use dynamic data for every field (dish title, description, price, image.)

    So it looks like you’d have to know in advance how many items were going to be in a menu and create them in the page builder. Then, I guess, you’d go into ACF and create individual fields for each menu item (this would be four fields for each item.) So I guess you could create a bunch of fields (for each set of four fields relevant for each menu item.)

    Something like … dish-title-1, dish-title-2, dish-title-3 … price-1, price-2, price-3, etc. etc.

    While I guess this could work if you knew how many items you’d permit for any section of a menu, it seems like this could be better done using the repeater field functionality of ACF.

    Is there anyway to use the repeater field to populate these menu-items in Elementor’s pricing widget? This seems like an obvious and smart way to do it, but I doubt it’s possible.

    Of course, you could always just design your own menu template from scratch and use the methods described in this post to do it, but it seems to me that if Elementor is going to go through the trouble of including dynamic-data functionality for every single item in their pricing widget that they would realize the natural tie-in the repeater-field would be.

    I like the built in style tweaks the built-in pricing widget allows for. I’d have a hard time styling my own template to include the variable-length elipses or dashes between dish-title and the price for instance (Pizza …….. $15.00)

  2. Joe Bloggs

    Hi there,

    Your tutorial is wrong!

    If you want to use ACF repeater fields, your AE template must be set to ‘ACF Repeater Block’ not a ‘Block Layout’.

    1. Elementor Resources

      We will update our tutorial as soon as possible. Thank you for correcting us!

  3. Barry

    It just displays the amount of items I got in the array.. it returns a ‘3’ on the front-end because I’ve got 3 items in the repeater

    1. Elementor Resources

      Thanks for commenting, Barry. Is this a bug you’ve experienced? Can you tell us more and how can we correct this tutorial?

Leave a Reply

×

Cart