How to create a template for ACF Repeater with Visual Composer?

Sometimes there is a need to create repeater with some particular layout. If you don’t have enough PHP, HTML and CSS skills, now you can achieve this with new feature that allows defining repeater templates with Visual Composer editor.

Let’s say you want to list featured photographers on your homepage or post. For each photographer you want to specify name, age, area and photo gallery.

The first thing you would need to do is to define your Fields Group in ACF as usual.

There you create “Featured Photographers” repeater field and add Name (text), Age (text), Area (text) and Photo Gallery fields (gallery) fields.

Now you need to define your layout for each repeater row. For this you need to create a new VC Snippet item.

Give it a recognizable name, so you can easily find it. I’m going to name it “Sample: Featured Photographers Repeater Template” for this demo. In VC Snippet you have a Visual Composer editor enabled and can create any layout you need. To pull ACF repeater sub-fields, you’ll need to use special shortcode “ACF Template Field”.

Field settings panel appears and allows you selecting fields from defined groups and configure options to show field label or hide if field is empty.

I’m going to display Name, Age and Area on the left and Photo Gallery on the right, while giving it more space. So add all those fields using ACF Template Field shortcode and save VC Snippet. Here you can see how the final layout looks like.

After you’re done with your template, go back to your ACF Repeater field. Under settings you’ll notice new option to pick a template. Open dropdown list, pick the one you’ve just created and save field.

Note: If you don’t see your newly created template, just refresh the page.

At this point you have everything configured, so just go to a post or page where you’ve added Repeater field to and add some data.

The final step is to append your ACF Repeater field somewhere to the content where you want it to show. Use “ACF Field Picker” shortcode to add it.

Note: It is required that you render your repeater with ACF Field Picker to utilize defined templates.

Below is the rendered repeater field template I’ve been creating for this demo.