---
title: "How to Create a Dynamic Coupon Code Listing in Elementor?"
url: https://theplusaddons.com/docs/dynamic-coupon-code-listing-in-elementor/
date: 2024-02-21
modified: 2026-09-22
lang: en
author: "Aditya Sharma"
description: "A coupon site with fifty offers should not be fifty hand-built sections. Store each offer as a post, design the row once, and let a listing repeat it. This page..."
image: https://theplusaddons.com/wp-content/uploads/2024/02/How-to-Create-a-Dynamic-Coupon-Code-Listing-in-Elementor_-1024x536.jpg
word_count: 1126
---

# How to Create a Dynamic Coupon Code Listing in Elementor?

## 

- The Plus Addons for Elementor Pro ships the Coupon Code widget, while the free plugin contains no coupon widget at all.
- Advanced Custom Fields stores each offer as a post type with fields such as brand name, image, code, destination URL, description, rating, and valid-until date.
- Dynamic Listing repeats one row template for coupon posts, and Custom Skin makes the listing draw that template instead of built-in styles.
- Loop gives each copied Coupon Code widget its own post id, so eight published posts render eight independent coupons instead of one shared id.

A coupon site with fifty offers should not be fifty hand-built sections. Store each offer as a post, design the row once, and let a listing repeat it.

This page puts the **Coupon Code** widget inside a **Dynamic Listing** custom skin, so every offer gets its own working coupon.

For the full settings tour of the **Coupon Code** widget, see [Coupon Code Widget: Settings Overview](https://theplusaddons.com/docs/coupon-code-widget-settings-overview/).

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/coupon-code/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — **Coupon Code** ships only in The Plus Addons for Elementor Pro. The free plugin contains no coupon widget at all, so there is nothing to fall back to.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Coupon Code** and turn its toggle on. This is the **Widgets** screen, not **Extensions**.- **Second widget to enable:** in the same screen, search for **Dynamic Listing** and turn its toggle on.- **Extra plugins for this one:** a custom fields plugin such as **Advanced Custom Fields** for the post type and the fields, and **Elementor Pro** for the dynamic tags that read them.

https://www.youtube.com/watch?v=XIFS3qq-q-s

## Store the offers

Each offer needs to be a post of some kind, with fields for the things that change. The example below uses Advanced Custom Fields, but any plugin that gives you a post type and custom fields will do.

- From the dashboard go to **ACF > Post Types** and click **Add New**. Fill in **Plural Label**, **Singular Label** and **Post Type Key**, and add **Category** under **Taxonomies** if you want to filter the listing later. Save.- Go to **ACF > Field Groups**, click **Add New** and add the fields each offer needs - a brand name, an image, the code, the destination URL, a description, a rating and a valid-until date are a sensible set.- Under **Settings > Location Rules**, point the group at your new post type. Save.- Add your offers as posts of that type and fill the fields in.

![Creating the coupon post type in ACF.](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-ACF-Post-Types-1024x616.png)

![The field group for the coupon post type.](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-ACF-Field-Groups.png)

The location rule is what attaches the fields to the post type.

![Pointing the field group at the coupon post type.](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-ACF-Location-Rules-1024x699.png)

Now add the offers themselves and fill the fields in on each one.

![A single coupon post with its custom fields filled in.](https://theplusaddons.com/wp-content/uploads/2024/02/add-coupon-data.png)

## Design one row as a template

- Go to **Templates**, click **Add New**, choose **Section** as the type, name it and click **Create Template**.- Lay the row out - a three-column container works well - and add the Elementor widgets the design needs.- Make each one dynamic with Elementor's **Dynamic Tags** button, pointing each at the matching field of your post type.- Add the **Coupon Code** widget where the coupon belongs. Leave **Coupon Type** on **Standard** and pick a **Standard Style**.- Set **Code** and **Redirect Link** with **Dynamic Tags** so each post supplies its own.- Turn on **Loop**. This is what stops every copy of the widget sharing one id - see below.- Publish the template.

![Making the image dynamic in the listing template.](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Image-Widget.gif)

![Making the heading dynamic in the listing template.](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Heading-Widget.gif)

An icon list is a tidy place for the small print - what is verified, how many people have used it, and the date the offer runs out.

![Adding the offer details with an icon list.](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Icon-List-Widget.gif)

![Adding a dynamic rating to the listing template.](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Rating-Widget.gif)

The last two dynamic tags are on the coupon itself: where it sends the visitor, and the code it hands over.

![Making the Redirect Link dynamic on the Coupon Code widget.](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Widget-ACF-URL-Field-URL-1.gif)

![Making the Code field dynamic on the Coupon Code widget.](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Widget-ACF-Field-Code-2.gif)

## Show the listing

- Add the **Dynamic Listing** widget to the page that should hold the listing.- In **Content Layout**, set **Post Listing Types** to **Normal Page**.- Set **Post Type** to your coupon post type.- Under **Style**, choose **Custom Skin**.- Pick your row template in **Select a template**.- Set the number of columns under **Columns Manage**, and add a category filter from **Extra Options** if you created a taxonomy earlier.

![Using the custom skin template with the Dynamic Listing widget.](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Use-Template-With-Dyamic-Listing.gif)

![Eight posts listed, each with its own coupon button.](https://theplusaddons.com/wp-content/uploads/2026/09/couponcode-result-dynamic-listing.webp)

With the row template styled, the same listing looks like this.

![The finished coupon listing on the front end.](https://theplusaddons.com/wp-content/uploads/2024/02/dynamic-coupon-code-listing-1024x846.png)

## Why Loop matters

Every copy of the **Coupon Code** widget in a listing comes from the same template, so without help they would all carry the same id and the same popup target. **Loop** adds the current post's id to each one.

Measured on a published listing of eight posts: eight coupons rendered, and each one's id ended in its own post id. Turn **Loop** on for any coupon that lives inside a template that repeats.

## How It Behaves

- **The listing repeats the whole template.** Eight posts produced eight rows and eight independent coupons.- **Each coupon is its own widget.** Revealing one does not reveal the others.- **Custom Skin ignores the built-in styles.** Once **Style** is **Custom Skin**, the listing draws your template and nothing else.

> *Use the **Click** action inside a listing. The popup's handlers are shared across the page, so several popup coupons in one listing will interfere with each other.*

## Limitations

- **This needs plugins beyond The Plus Addons.** The post type and the fields come from a fields plugin such as ACF, and the dynamic tags that read them come from Elementor Pro. Without those, the listing still repeats - but every row shows the same hard-coded code.- **Loop is off by default.** A coupon copied into a repeating template without it will behave oddly, and the symptom (one coupon reacting for all of them) does not obviously point at this setting.- **One coupon widget per row.** Two coupons in the same template both get the same post id appended, so they are still not unique from each other.- **Icons can render as empty boxes.** The widget's scissors icon and the **Close Icon** use Font Awesome, which The Plus Addons does not load by itself. On a page with no other Font Awesome icon they can come out blank.

## Not verified

So you know exactly what has and has not been checked:

- **The ACF and Elementor Pro half of this page.** Neither plugin was installed on the test site, so the custom post type, the custom fields and the dynamic tags were checked against the plugins' own documented screens, not run.- **The category filter.** **Extra Options** offers one; it was not built or clicked here.- **Columns Manage.** The label exists; no column count was set and measured.- **The Style tab.** Standard **Style 1** and **Style 3** were rendered; no colour, typography, border or popup-styling control was exercised.

## Troubleshooting

### The listing is empty

Check **Post Type** matches the post type your offers actually use, and that at least one of them is published.

### Every row shows the same coupon code

The **Code** field is still static text. Set it with **Dynamic Tags** so it reads the field on each post.

### Clicking one coupon affects another

Turn **Loop** on in the template's **Coupon Code** widget, and use the **Click** action rather than **Popup**.

### Select a template is empty

**Style** is not set to **Custom Skin**, or the template has not been published yet.

## Related Docs

- [Coupon Code Widget: Settings Overview](https://theplusaddons.com/docs/coupon-code-widget-settings-overview/)- [How to Add a Coupon Code with Redirection in Elementor? (New Tab or Same Tab)](https://theplusaddons.com/docs/coupon-code-with-redirection-in-elementor/)- [How to Show Promo Code in an Elementor Template?](https://theplusaddons.com/docs/show-promo-code-in-an-elementor-template/)- [How to Create a Scratch Coupon Card in Elementor?](https://theplusaddons.com/docs/scratch-coupon-card-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before building a dynamic coupon code listing in Elementor?**
A: The setup depends on three pieces working together: The Plus Addons for Elementor Pro, Elementor, and a fields plugin such as Advanced Custom Fields. The page also uses Elementor Pro for the dynamic tags that read the custom fields. That matters because the listing can still repeat without those pieces, but every row will fall back to the same hard-coded code instead of pulling unique offer data from each post.

**Q: How should coupon offers be stored for a dynamic listing?**
A: Each offer should live as its own post with fields for the values that change, such as brand name, image, code, destination URL, description, rating, and valid-until date. The page uses Advanced Custom Fields as the example, but any plugin that gives you a post type and custom fields works in the same role. This structure is what lets one template repeat many offers without hand-building each section.

**Q: Why does the coupon widget need Loop in a repeating template?**
A: Loop prevents every copy of the Coupon Code widget from sharing the same id inside a repeated template. The page says eight posts produced eight coupons with unique ids ending in each post id when Loop was turned on. That matters because repeated widgets without unique ids can interfere with each other, especially when the same template is reused across a listing.

**Q: Why does one coupon sometimes affect another in a listing?**
A: That usually happens when the Coupon Code widget is repeated without Loop, or when Popup is used instead of Click inside the listing. The page notes that popup handlers are shared across the page, so several popup coupons can interfere with each other. Using Click and turning Loop on keeps each row isolated so one reveal does not trigger another.

**Q: What should I use if I want each row to show a different coupon code?**
A: The Code field has to be set with Dynamic Tags so it reads from each post instead of staying static text. The page calls this out directly as the fix when every row shows the same coupon code. In practice, this is what makes The Plus Addons for Elementor and POSIMYTH’s Dynamic Listing behave like real data-driven content instead of duplicated markup.

**Q: Why is Select a template empty in Dynamic Listing?**
A: That usually means Style is not set to Custom Skin, or the template has not been published yet. The listing only pulls your row design into Select a template after it recognizes a published custom skin template. This is easy to miss because the rest of the listing can still be configured correctly while that dropdown stays blank.