All Collections
Tutorials
Show Nested Repeaters with ACF Repeater Widget
Show Nested Repeaters with ACF Repeater Widget
Updated over a week ago

To show nested repeaters we will use ACF Repeater Widget and Elementor Templates.

This widget requires Advanced Custom Fields Pro since ACF Repeater fields are only available with this license type.

To begin with, first, we need to see what nested repeaters are and how it actually looks like.

Nested Repeaters are basically repeaters inside other repeater fields.

For example, if we want to show the attributes of an object, we can simply use repeaters. However, when an attribute is in the form of an array or says it requires more information, then we use an object inside an object that is called a nested repeater.

In the above example screenshots, you can see we have course as main repeater and lessons as a nested repeater

Steps to Display Nested Repeater

  1. Create a single post template or template for any page where you want to display your main layout.

  2. In the layout created at step 1, drag and drop the ACF Repeater widget

  3. In the ACF Repeater Widget, assign the main ACF repeater field (eg. course repeater field), and create a new template to assign in the display. Let's call this template, template 1.

  4. In template 1, drag and drop respective widgets for various attributes inside the main repeater and an ACF Repeater Widget for nested repeater (Lessons in our case)

  5. In ACF Repeater Widget of template 1, assign the nested repeater (eg. lessons repeater field) and create a new template (let's call it template 2) to display fields of nested repeater

  6. Assign dynamic values to template 2 for fields of the nested repeater and assign this template in the ACF Repeater widget display template of template 1.

    Now you can design these templates the way you want them to show on the frontend.

Did this answer your question?