Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Content Carousel - Featured Blog
Stacked Images - Featured Blog
ACF Repeater Field - Featured Blog

How to Output ACF Repeater Field in a Table Format Using Elementor

Displaying dynamic data in a visually appealing and organized manner is essential for creating engaging websites. If you’re using Advanced Custom Fields (ACF) and want to showcase repeater field data in a clean, structured table format, Unlimited Elements for Elementor offers an excellent solution. By leveraging the Repeater Table Widget, you can seamlessly integrate and present your ACF repeater field data in an Elementor-powered website, ensuring both functionality and style. In this guide, we’ll walk you through the step-by-step process of achieving this setup effortlessly.

Popular Use Cases to Output ACF Repeater Field in a Table Format in an Elementor Website

1

Recipe Ingredients and Steps

Recipe websites can benefit from tables that list ingredients, quantities, and preparation steps. This organized format allows users to follow recipes easily, improving their cooking experience.

2

Product Specifications Table

For product pages, showcasing technical details like dimensions, weight, materials, or compatibility in a table format offers clarity. Customers can easily compare and understand essential specifications at a glance.

3

Team Member Profiles

Display team members' names, roles, and skills in a structured table format. It's perfect for company websites aiming to provide an overview of their team in an organized and professional way.

4

Restaurant Menus

A table format is great for online menus, listing dishes, descriptions, and prices. This format makes browsing food options effortless for customers and improves their overall dining experience.

5

Portfolio or Case Studies

For creative professionals or agencies, tables can showcase project details like client names, completion dates, and results. This provides a clear summary of work, making it easy to navigate.

6

Comparison Tables

Comparing multiple products or services side-by-side in a table format is highly effective. Users can easily analyze features like pricing, specifications, or benefits to decide what suits them.

Step #1: Install and activate Unlimited Elements

Before getting started you will need to purchase Unlimited Elements pro from the link below to access the Repeater Table widget.

Then follow these steps:

1

Go to Plugins → Add New → Upload Plugin.

2

Choose the zip file you downloaded, upload, and then click Activate.

3

Once activated, you’ll need to enter your license key.

Now that you have the plugin installed, it’s time to start using the Repeater Table widget.

Step #2: Adding the Repeater Table widget to your Elementor website

To output ACF Repeater Field in a Table Format, install the Repeater Table widget from the Unlimited Elements Widget library. 

1

Go to Unlimited Elements in the WordPress Dashboard

2

Search for the "Repeater Table"

3

Hover over the widget and click install

Step #3: Create the Repeater field in ACF

Before we begin, we need to create the Repeater field in Advanced Custom Fields (ACF).

1

Go to ACF Field Groups.

2

Create a new field group if one hasn't been created yet.

3

Add a Field: Select Field Type → Repeater.

4

Enter the "Field Label" and "Field Name."

5

Add the required Sub Fields.

6

Select the desired "Post Type" and save your changes.

Step #4: Add Data to the Repeater Field in a Single Post

Now, let’s add data to the Repeater field for the desired post. For this tutorial, we’ll use “Nutritional Information” as an example.

Step #5: Add the Repeater Table Widget to Your Elementor Page

Now, in the Elementor editor, Find the Repeater Table widget and drag it to the desired part of your page.

Repeater Settings
1

Repeater Source

Set the repeater source.

  1. Meta Fields
  2. JSON / CSV
  3. Google Sheets
2

ACF Field Name

Enter the same field name you used in the ACF Repeater field.

3

ACF Field Location

Select the ACF field location as "Select Post."

4

ACF Field From Post

Choose the post where the ACF Repeater field data is stored.

5

Number of Columns

Choose the number of columns to display from the connected repeater table.

General Settings
1

Filtering

Enable filtering to allow data filtering options.

2

Filter Dropdown Title

Enter the title for the filter dropdown.

3

Filter Placeholder

Specify the placeholder text for the filter.

4

Pagination

Enable pagination if necessary.

5

Sorting

Enable sorting if required.

Add Columns to output ACF Repeater Field data

Title

Enter the column title.

Mode

Select the mode: "Basic" or "Advanced."

Column Field Name

Enter the column field name, matching the sub-field column name in the Repeater field.

Wrapping it Up!

With the Repeater Table Widget, showcasing ACF repeater field data in Elementor becomes an intuitive and efficient process. This powerful combination not only enhances the user experience but also empowers you to display complex datasets in an elegant table format without any custom coding. Whether you’re managing product details, team information, or dynamic lists, this method ensures your data is both accessible and visually appealing. Start creating tables with ease and transform your Elementor website today!

View More Related Blog Posts

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!