Display ACF Repeater Field in Elementor with Code Snippets

ACF repeater fields in Elementor offer a dynamic way to present content. However, sometimes getting them to display can be a tad tricky. But don’t worry, with the help of Code Snippets, we’ve got a solution that’ll make things a lot easier.

The Pros and Cons of Using ACF Repeater Fields with Elementor

Before diving into the integration of ACF repeater fields with Elementor, it’s essential to understand the advantages and potential challenges. Here’s a quick breakdown to give you a clearer picture:

Setting Up ACF Repeater Fields

1. First, ensure you have Advanced Custom Fields Pro installed.
2. Next, create a field group.
3. When naming your fields, be precise. For example, if you’re naming something “subjects_studied”, ensure it’s consistent throughout.
4. Set the post type to ‘post’ in the settings below.

Adding Repeater Fields to a Post

1. Navigate to your desired post.
2. Locate the ‘Subjects Studied’ section.
3. Click on ‘add row’ and start adding subjects.

Implementing the Code Snippet

While Elementor is a fantastic tool, it sometimes needs a bit of coaxing to play nicely with ACF repeater fields. This is where our code snippet comes into play.

1. Ensure the Code Snippets plugin is active.
2. Create a new snippet.
3. Add the provided code, ensuring your field names match. The code snippets include all styling examples, so make sure to delete the once you won’t be using.
   – With Bullets: A classic list style.
   – Without Bullets: A clean, modern look.
   – With Commas: A compact style for inline lists.

   /*  WITH BULLETS
       shortcode for displaying required posting repeater field from ACF*/
   
   add_shortcode ('show-required', 'dnlt_show_required');
     function dnlt_show_required() {
       $pageID = get_the_ID(); // not required if within loop, but doesn't hurt 
       $content= '';
       if( have_rows('subjects_studied', $pageID) ) {
         $content .= '<ul>';
         while( have_rows('subjects_studied', $pageID) ) { 
           the_row();
             $content .= '<li>' .  get_sub_field('subjects') . '</li>';
           }
           $content .= '</ul>';
       }
       return $content;
   }
   
   
   
   /*  WITHOUT BULLETS
       shortcode for displaying required posting repeater field from ACF*/
   
   add_shortcode('show-required', 'dnlt_show_required');
   function dnlt_show_required() {
       $pageID = get_the_ID(); // not required if within loop, but doesn't hurt 
       $content = '';
       if (have_rows('subjects_studied', $pageID)) {
           while (have_rows('subjects_studied', $pageID)) {
               the_row();
               $content .= get_sub_field('subjects') . '<br>'; // Use <br> for line breaks
           }
       }
       return $content;
   }
   
   
   /*  WITH COMMAS AND NO BULLETS
       shortcode for displaying required posting repeater field from ACF */
   
   add_shortcode('show-required', 'dnlt_show_required');
   function dnlt_show_required() {
       $pageID = get_the_ID(); // not required if within loop, but doesn't hurt 
       $content = '';
       $subjects = array(); // Create an array to store subjects
   
       if (have_rows('subjects_studied', $pageID)) {
           while (have_rows('subjects_studied', $pageID)) {
               the_row();
               $subjects[] = get_sub_field('subjects'); // Add each subject to the array
           }
       }
   
       // Use implode to join subjects with commas and create the content
       $content = implode(', ', $subjects);
   
       return $content;
   }

   Source: Code Snippets / Diana Nichols

Tip: Double-checking field names can save you a lot of troubleshooting later on.

Displaying the ACF Repeater Field in Elementor

1. Open Elementor and search for the shortcode widget.
2. Place it where you’d like your repeater field to appear.
3. Input the repeater field name in brackets, in our example ‘[show-required]’ into the shortcode field.

Your ACF repeater fields should now be visible on your Elementor page!

Tip: Remember to edit/delete the CSS styles from your Code Snippet according to your needs.

Conclusion

With the right tools and knowledge, integrating ACF repeater fields with Elementor becomes a breeze. Now, you’re equipped to make the most of both platforms. Happy designing!