How to display ACF repeater fields in Kadence

If you’ve been using ACF with Kadence you may be wondering how to display ACF repeater fields in Kadence pages and/or templates. I’ve seen this question asked a lot in the official Kadence Facebook group and the Kadence support forums.

Just recently I found myself in need of this exact functionality, only to discover it’s not currently possible using the native functionality features. So I went searching for a no-plugin solution (I’m big on not using extra plugins if there is an alternative solution) and managed to piece one together that’s working great for me to display ACF repeater fields on Kadence product templates in a nice responsive grid.

So let’s get to it.

Requirements

For this tutorial you’ll either need to be using a child theme or a code snippet plugin as we need to add some PHP to create a shortcode we can use in our content. My preferred option is a child theme. It’s one less plugin to manage, plus it serves multiple purposes.

If you’re not sure what a child theme is or whether you need one, Kadence have a comprehensive post on the subject, plus a free child theme template here. If you would prefer to use a code snippets plugin, WPCode and Code Snippets are two well maintained free options.

You’ll need to be using ACF Pro, as the repeater field is only available in the Pro version, but trust me, it’s well worth the money!

While this tutorial works in Kadence Elements and Kadence ShopKit so you can display repeater fields in things like product templates (that’s where I’m using it), I’m demonstrating this solution using a custom post type I created specifically for this tutorial. If you want to display ACF repeater fields in Kadence Elements templates or ShopKit templates the process is the same, but you’ll need Kadence Theme Pro, or one of the Premium Bundles.

Create an ACF repeater field

First things first. Let’s create an ACF repeater field so we have somewhere to add all the information we want to show.

I’m going to be using books as an example. Say we want to create a list of books we’ve read and include some details about each book. First we need to create the repeater field. Head on over to ACF and create a new field group, or if you have one already that you want to add the content to, that’s fine, open up the group.

Now we need to add a new repeater field within our group. The repeater field can be found in the field type dropdown under layouts.

Make a note of the field name as we’ll be using it later inside our shortcode. I tend to just add the field label and let ACF create the name for me. Keeps things neat and tidy.

Create your ACF repeater sub fields

You can use any ACF fields you like for your sub fields. For the purposes of this tutorial, I’ve create six fields using a variety of field types to show:

For the book cover field which is an image field type, I’ve select image URL as the return format so the image I upload to the media library displays on the page.

In the validation tab of the book rating field, which is a range field type, I’ve set a maximum of 5 so I can rate the books on a scale of 1-5.

All the other sub fields I left at their default settings, but of course you can change settings for any of your sub fields that require it. Make a note of the sub field names as you did with the main repeater field as we’ll use these inside our shortcode too.

Once you’ve saved your new repeater field you can open a post, page, or wherever you have defined your field to show, and below the main content window, you’ll see your new repeater field and sub fields and can start adding your content.

Here’s an example of my book details field with some content added.

Create your repeater field shortcode

Next we need to add the PHP which creates our repeater field shortcode and pulls all the sub fields into a loop.

Add the code below to your child theme functions.php file, or your chosen code snippet plugin. You don’t need to edit this code in any way unless you want to. Also, you only have to add this once, and you can display multiple repeater fields anywhere you want as we’re going to define the loop content within the shortcode itself.

// ACF Pro repeater field shortcode
// Code source: By FranciscoG at https://gist.github.com/FranciscoG/c393d9bc6e0a89cd79d1fd531eccf627
// @attr {string} field - (Required) the name of the field that contains a repeater sub group
// @attr {string} sub_fields - (Required) a comma separated list of sub field names that are part of the field repeater group
// @attr {string} post_id - (Optional) Specific post ID where your value was entered. Defaults to current post ID (not required). This can also be options / taxonomies / users / etc

function my_acf_repeater($atts, $content='') {
  extract(shortcode_atts(array(
    "field" => null,
    "sub_fields" => null,
    "post_id" => null
  ), $atts));

  if (empty($field) || empty($sub_fields)) {
    return "";
  }

  $sub_fields = explode(",", $sub_fields);

  $_finalContent = '';

  if( have_rows($field, $post_id) ):
    while ( have_rows($field, $post_id) ) : the_row();

      $_tmp = $content;
      foreach ($sub_fields as $sub) {
        $subValue = get_sub_field(trim($sub));
        $_tmp = str_replace("%$sub%", $subValue, $_tmp);
      }
      $_finalContent .= do_shortcode( $_tmp );

    endwhile;
  else :
    $_finalContent = "$field does not have any rows";
  endif;

  return $_finalContent;
}

add_shortcode("acf_repeater", "my_acf_repeater");

Use your repeater field shortcode

To use our new repeater field shortcode inside a page or Kadence element, we need to add it inside the shortcode block. Add a shortcode block to your page.

This is the basic shortcode to display our repeater field in a loop.

[*acf_repeater field="book_details" sub_fields="book_cover,book_rating,author_name,book_title,book_summary,book_link"]
  %book_cover%  
  %book_title%
  %author_name%
  %book_rating%
  %book_summary%
  %book_link%
[/acf_repeater]

field=”book_details” tells the shortcode which repeater field to use in our loop.
sub_fields=”book_cover,book_rating,author_name,book_title,book_summary,book_link” defines which of the subfields we want to display. You can use as few or as many as you want here. The sub fields do not have to be in the order you want them displayed in this section, but they must be separated by commas with no spaces.

We display the actual content from our subfields inside % signs. so %book_cover% displays the book cover image I uploaded. %book_title% displays the book title, and so on.

The basic format of the shortcode above is fine for standard text content, but if you’re using image, URL, range, or other types of ACF fields that do not output standard text, then you’ll need to make some tweaks.

Customise your repeater shortcode

The shortcode I showed you above will render the content of my fields like this:

As you can see, my book cover image doesn’t show, my rating field just displays a number, and my link is ugly.

We can fix all that. But wouldn’t it be lovely if we could also have our sub fields adopt some of our default Kadence styling? Yep, you guessed it. We can do that too! All we need is to add a little HTML and some custom CSS classes to our shortcode.

<div class="bb-book-details">[*acf_repeater field="book_details" sub_fields="book_cover,book_rating,author_name,book_title,book_summary,book_link"]
  <div class="bb-book">
    <figure class="bb-book-cover"><img src="%book_cover%"></figure>
    <div class="bb-book-content"> 
      <h2>%book_title%</h2>
      <h4>%author_name%</h4>
      <div class="bb-book-rating" data-rating="%book_rating%"></div>
      <div class="bb-book-summary">%book_summary%</div>
      <a class="button" href="%book_link%">Get the book</a>
    </div>
  </div>
[/acf_repeater]</div>

In the shortcode you can see above I’ve done the following:

What does all that do? I hear you ask.

In short, it displays each of our sub fields inside its own HTML container with a CSS class so we can use those classes to style the outputted data.

You may notice I haven’t added a class to the H2 or H4 elements I’ve used. That’s because they don’t need them. Those elements will adopt the styles you have defined in your site’s customiser settings.

Also, the button class on the book_link sub field will adopt the styling you set for your buttons in the customiser, and turn that link into a button that matches the rest of your site.

So with the new version of our shortcode applied, this is how the content will display.

Better, but still not perfect. Our ratings don’t display and the content will show in a long list which would look much better in a nice responsive grid with some spacing, don’t you think?

Style the repeater loop content

Now obviously, your loop content is going to be different to mine, but I wanted to include some styling so you get an idea of what can be done.

Using the containers and classes I added to my shortcode example, here is some CSS with comments so you can see what’s happening.

/* WordPress adds some empty P elements between the content when using a shortcode, this declaration hides those elements */
.bb-book-details > p {
    display: none;
}

/* Here we define a grid layout to display each book with a minimum width of 330px. The number of columns depends on the first value (330px) increase or decrease for more or less columns. We also set the horizontal and vertical spacing between the books to 50px */
.bb-book-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    grid-gap: 50px;
}

/* Here we set a flex layout for each book and add a gap between the cover and the content of 20px */
.bb-book {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
}

/* Here we make the cover span 40% of the width of the book grid container, allow it to both grow and shrink, and remove the bottom margin */
.bb-book .bb-book-cover {
    flex: 1 1 40%;
    margin-bottom: 0;
}

/* Here we make the content span 60% of the width of the book grid container and allow it to both grow and shrink */
.bb-book .bb-book-content {
    flex: 1 1 60%;
}

/* Here we add some margin to the bottom of the book summary container */
.bb-book .bb-book-summary {
    margin-bottom: 25px;
}

/* Here we show stars as a pseudo element after our rating fields. We set a font size for the stars and use the CSS variable for our first accent color */
.bb-book .bb-book-rating:before {
    font-size: 30px;
    color: var(--global-palette1);
}

/* Here we use the data-rating attribute to show a different number of stars based on what we selected in the book rating range field type */
/* 5 Stars */
.bb-book .bb-book-rating[data-rating='5']:before {
    content: '★★★★★';
}

/* 4 Stars */
.bb-book .bb-book-rating[data-rating='4']:before {
    content: '★★★★☆';
}

/* 3 Stars */
.bb-book .bb-book-rating[data-rating='3']:before {
    content: '★★★☆☆';
}

/* 2 Stars */
.bb-book .bb-book-rating[data-rating='2']:before {
    content: '★★☆☆☆';
}

/* 1 Star */
.bb-book .bb-book-rating[data-rating='1']:before {
    content: '★☆☆☆☆';
}

/* Adjust for mobile screens below 600px wide */
@media all and (max-width: 600px) {
    /* Here we switch to a single column for our books */
    .bb-book-details {
        grid-template-columns: repeat(1, 1fr);
    }
    /* Here we let our book container wrap its content so our book content sits beneath the book cover */
    .bb-book {
        flex-wrap: wrap;
    }
    /* Here we resize both the book cover and the book content to the fullwidth of their container*/
    .bb-book :is(.bb-book-cover, .bb-book-content) {
        flex: 1 1 100%;
    }
}

And in reality, all that lovely CSS transforms our loop content output from what you see in the previous image, to something like the image below.

Doesn’t that look pretty?

And yes, these really are six of my favourite books and I offically rate them all 5 stars. If you haven’t read Dark Matter by Blake Crouch yet, I highly recommend you treat yourself to a copy. It’s a completely unputdownable Sci-Fi thriller!

Conclusion

Would it be nice if Kadence supported repeater fields? Sure it would, and maybe Kadence Blocks 3.0 will, I don’t know, but until that happens this is a very versatile solution you can use for any type of content.

You’re not limited to the field types I’ve used in my example either. You can use pretty much any field type and HTML elements inside the shortcode to display ACF repeater fields in Kadence anywhere on your site.

I hope you found this tutorial useful and I’d love to see what you create with it.

That’s it, all done!

Michelle x