How to Use Repeater Control to Repeat a Group of Controls?

Table of Contents

Are you looking for a way to provide users with the flexibility to repeat a group of controls multiple times within your custom Elementor widget? The Repeater control is the perfect solution, allowing users to dynamically add and replicate a set of controls to meet their specific needs. With the Repeater control, you can enhance the functionality of your widget and empower users to customize their content with ease.

To check the complete feature overview documentation of The WDesignKit Widget Builder, click here.

Requirement  – This feature is a part of The WDesignKit, make sure it’s installed & activated to enjoy all its powers.

To add a repeater option, in the Widget Builder, search and add Repeater control in the Layout. Now you can add other controls inside the Repeater control.

From the Repeater type dropdown, you can select Old or New as the repeater type. Based on this, the repeater code will be generated in the backend.

Note: With the New repeater type, you won’t be able to use the controls from the Group Controls. So we recommend using the Old repeater type. 

From the Prevent Empty toggle, you can prevent users from deleting all the items in the repeater in the Elementor editor panel. 

Now, let’s add a Text control inside the Repeater control.

In the right sidebar of the HTML tab, you’ll see a Select repeater dropdown, here you’ll see a Loop option along with unique names of all the controls that you have included inside the Repeater control.

To add a Repeater control, you have to add a loop first, so from the Select repeater dropdown, click on the Loop option.

It will add a loop HTML in the editor.

Now, you have to add other controls inside the loop. So remove the <!– Enter Repeater code here –> part from the code, then click on the control’s unique name and it will be added to the repeater loop. If you want, you can wrap each control with a custom div class.

Note: In the HTML editor, only add the unique names of the controls for which you want to display the values on the front end.

Note: If you add any style related controls inside the repeater make sure to add {{CURRENT_ITEM}} before the class name in the Selector field of the control, like ‘{{CURRENT_ITEM}}.title’ to make the style unique for each item. 

Following this process, you can add other controls inside the Repeater control.

Once done, click on the Save button to save the widget.

Now, if you check the widget in the Elementor editor, you’ll see users can easily add new items with the same set of options.

Make Repeater Title Dynamic

By default, the Repeater control title will remain the same for all the items, to make it dynamic, in the Title field, you can add the Name of the control based on which you want to generate the repeater title.

You have to add the name inside three opening and closing curly braces like this {{{text_wkxnqh24}}}.

From our previous example, we can add the Text control name in the Title field of the Repeater control.

Now, when you add new items in the Elementor editor, whatever name you add in the text input field it will become the item name.

Also, check How to Use Display Conditions to Show or Hide Controls.