Using ACF (Advanced Custom Fields) Repeater Fields with Elementor - Elementor Addons

Using ACF (Advanced Custom Fields) Repeater Fields with Elementor

Custom fields are a crucial element of any WordPress site. If you want your website to be dynamic and powerful, then custom fields will empower it in ways that would never have been possible before.

AnyWhere Elementor Pro provides support for ACF Repeater fields. Implementation of Repeater Field is different for everyone. They act as a great solution where the sub-fields are repeated again and again. Using AnyWhere Elementor Pro, you get the flexibility to implement different layout styles for the repeater fields.

In this article, we will explain to display data from the Repeater field in an appealing manner. As it seems to be a little tricky, I have opted to explain to you with a real example.

Case: Create a directory listing of Destinations (cities) and for each destination provide some brief info about places to visit in those destinations.

Here is the final result that we are planning to implement. The Places to Visit section is rendering from the data saved in Repeater fields.

As you can see in the above screenshot, info from our repeater fields is shown in a nice carousel layout. (You can also show it as a grid structure). Before moving to the designing part, we need to set up the ACF.

ACF Setup:

  • A Custom Post Type “Destinations” (to manage the main listing)
  • ACF repeater field with the following subfields.
    • place_name: a Text field for the name of the place
    • place_image: Image field to add an image of the place
    • place_description: Text area to add a small description of that place.
ACF data
ACF Repeater Field Setup

Before we start to design the actual singular AE Template for Destinations custom post type, first we have to design a Repeater Block Template that will be used to design the list of repeater items.

Designing Repeater Block Layout

Create a new AE Template (AE Templates -> Add New) and do the following configurations.

  • Render Mode: ACF Repeater Block
  • Preview Post: Select a Post/CPT on which data for the repeater field is available. Data from this post will be used while displaying the preview in the Elementor editor.
  • Repeater Field (ACF): Select the Repeater field for which you are designing this layout.
  • Now save this template the start editing it with Elementor.
Repeater Block Layout

In Elementor Editor, use AE Custom Field widget to show data from Repeater subfields.

In AE – Custom Field widget, specify the key/slug of your subfield in the name field. Place multiple custom field widgets to add the data from all the custom fields (subfields). Design it in the same way as you want your individual repeater item to be displayed.

Repeater Block Layout design

Now as Repeater Block Layout is complete, you are ready to create Singular Post Template for Destinations Post Type. 

Design Single Post Template

Create a new AE Template (AE Templates -> Add New) with following configurations.

  • Render Mode: Post Template
  • Post Type: Destinations
  •  Preview Post: Select a post from Destinations post type. Data from this post will be used while displaying the preview in the Elementor editor.
  • Auto Apply: Check this to apply the template to all destination post types. 
AePro settings
  • Save the template settings and start editing with Elementor. 

In Elementor editor add the widgets like “AE – Post Title”, ‘AE – Content’ etc to show the title, content and other post data. 

Now to display the data from repeater field use AE – ACF Repeater widget. In widget settings, do following configuration

  • Under the Skin – select the layout style for the repeater field like tab or accordion.
  • Next, under the Block Layout option, select the Repeater Block Layout that we have created above. 
  •  In Repeater Field (ACF): Select the repeater field. 
ACF Repeaters

Then under the Layout option, there are settings where you can design the layout accordingly. You can set the Repeater field to display as Grid, List, Carousel, and Slider. There are a lot of styling controls available that you can use to create an awesome layout. 

2 thoughts on “Using ACF (Advanced Custom Fields) Repeater Fields with Elementor”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top