---
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-04-09
author: "Aditya Sharma"
description: "Do you want to create a dynamic coupon code listing on an Elementor website? If you are creating a coupon code listing website adding coupon code listings dynamically can reduce..."
image: https://theplusaddons.com/wp-content/uploads/2024/02/How-to-Create-a-Dynamic-Coupon-Code-Listing-in-Elementor_-1024x536.jpg
word_count: 1213
---

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

## Key Takeaways

- The Plus Addons for Elementor includes the Coupon Code and Dynamic Listing widgets for creating dynamic coupon code listings.
- Advanced Custom Fields (ACF) plugin is required for adding custom post types and fields for coupons.
- Custom fields for the Coupon post type include Brand Name, Image, Code, URL, Description, Star Rating, and Valid Until.
- The Dynamic Listing widget from The Plus Addons for Elementor allows users to display custom-designed coupon code listings on a page or template.

Do you want to create a dynamic coupon code listing on an Elementor website? If you are creating a coupon code listing website adding coupon code listings dynamically can reduce the manual work of adding each listing.

With the Coupon Code and Dynamic Listing widgets from The Plus Addons for Elementor, you can easily create a dynamic coupon code listing in Elementor.

*To check the complete feature overview documentation of The Plus Addons for Elementor Coupon Code widget, [click here.](https://theplusaddons.com/docs/coupon-code-widget-settings-overview/)*

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

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

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

First, you have to create a custom coupon code listing item template using Elementor. For instance, we will be creating this coupon code listing.

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

For this design, we will need the [Advanced Custom Fields (ACF)](https://wordpress.org/plugins/advanced-custom-fields/) plugin for adding a custom post type and some custom fields, and [Elementor Pro](https://elementor.com/pro/) plugin for fetching dynamic data.

### Add a Custom Post Type

We’ll create a custom post type for adding coupons.

1. To do this from the Dashboard, go to **ACF** > **Post Types** and click on the **Add New** button. 

2. Add Coupons, Coupon, and coupon in the **Plural Label**, **Singular Label,** and **Post Type Key** fields, respectively.

3. Then select **Category (category)** from the **Taxonomies** field to create a filter for coupons based on categories.

4. Once done, click on the **Save Changes** button.

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

### Add Custom Fields for Coupon Post Type

Now we’ll create some custom fields for the Coupon post type.

1. To do this from the Dashboard, go to **ACF** > **Field Groups** and click on the **Add New** button. 

2. Add a name to the field group.

3. Then click on the **+Add Field** button to add a custom field for the brand name with Brand Name as the field label and text as the field type.

4. In this process, we’ll add the following custom fields -

- Field Label - **Brand Name** and Field type - **Text**

- Field Label - **Image** and Field type - **Image**

- Field Label - **Code** Field type - **Text**

- Field Label - **URL** Field type - **URL**

- Field Label - **Description** Field type - **Text Area**

- Field Label - **Star Rating** Field type - **Number**

- Field Label - **Valid Until** Field type - **Date Picker**

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-ACF-Field-Groups.png)

5. Once done, from the **Location** **Rules **section under the **Settings **tab, we’ll set the location to **Coupon (coupon)** under **Rules**.

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-ACF-Location-Rules-1024x699.png)

6. Once done, click on the **Save Changes** button.

### Add Coupons with Custom Fields

Now you have to add a coupon with custom fields.  

1. To do this from the Dashboard, go to **Coupon** > **Add New**. 

2. Add a name to the post type, then add data in custom fields.

![Add Coupon content](https://theplusaddons.com/wp-content/uploads/2024/02/add-coupon-data.png)

Following this process, we’ll add multiple coupons.

You can create categories and assign them to specific coupons for adding a category-wise filter in the listing.

### Create a Template using the Coupon Code Widget

1. To do this from the Dashboard, go to **Templates** and click on **Add New**, then select **Section** as the template type, give a name to the template then click on the **Create Template** button.

![Coupon Code Loop Template](https://theplusaddons.com/wp-content/uploads/2024/02/coupon-loop-template-1024x485.png)

2. Then we’ll create a three-column section as per our design, after adjusting the column sizes, we’ll add the Elementor Image widget in the left column.

Click on the **Dynamic Tags** and select **ACF Image Field** under ACF. On the next screen, click on the **ACF Image Field** again and select **Image** from the **Key** dropdown in the **Settings** popup.

You can adjust the image size.

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Image-Widget.gif)

3. Then, to add the title, we’ll use the Elementor Heading widget in the middle column. 

Click on the **Dynamic Tags** and select **ACF Field** under ACF. On the next screen, click on the **ACF Field **again and select **Brand Name **from the **Key** dropdown in the **Settings** popup.

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Heading-Widget.gif)

Style it further according to your requirements.

4. We’ll add another Elementor Heading widget for description in the middle column. Following the above process, we’ll make the text dynamic by selecting **Description** as the Key value.

Style it further according to your requirements.

5. In the last column, we’ll add the Elementor Icon List widget. As per our design, we’ll add some coupon information like Verified Code, Users, and the coupon validity date.

For Verified Code and User, we’ll add static text with appropriate icons.

Then, for the coupon validity date, we’ll open the third item.

We’ll click on the **Dynamic Tags** in the Text field and select **ACF Field** under ACF. On the next screen, click on the **ACF Field **again and select **Valid Until **from the **Key** dropdown in the **Settings** popup.

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Icon-List-Widget.gif)

Then we’ll select the appropriate icon and set the listing to inline.

Style it further according to your requirements.

6. Now we’ll add a Star Rating. For this, we’ll add the Elementor Rating widget in the last column.

To make it dynamic, click on the Dynamic Tags in the Rating field and select ACF Number Field under ACF. On the next screen, click on the **ACF Number Field **again and select **Rating **from the **Key** dropdown in the **Settings** popup.

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Rating-Widget.gif)

Style it further according to your requirements.

7. For the coupon code, we’ll add the Coupon Code widget from The Plus Addons for Elementor in the last column.

8. In the **Layout **tab, select **Standard** from the **Coupon Type** section.

9. Selecting an appropriate style from the Standard Style dropdown, then add a title in the **Title **field under the **Content **tab. 

10. To make the redirect link dynamic, click on the **Dynamic Tags** in the Redirect Link field and select **ACF Field** under ACF. On the next screen, click on the **ACF Field **again and select **URL **from the **Key** dropdown in the **Settings** popup. 

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Widget-ACF-URL-Field-URL-1.gif)

11. After selecting the appropriate style for the coupon code, we’ll make the code dynamic.

For this, click on the **Dynamic Tags** in the Code field and select **ACF Field** under ACF. On the next screen, click on the **ACF Field **again and select **Code **from the **Key** dropdown in the **Settings** popup. 

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

As per your requirement, you can set the appropriate action from the **Select Action** dropdown.

**Click** - To show the coupon code on a click,

**Popup** - To show the coupon code in a popup.

Style it further according to your requirements.

12. Once done, publish the template.

### Use the Template with the Dynamic Listing Widget

Now, to create the coupon code listing, you have to use the Dynamic Listing widget from The Plus Addons for Elementor.

1. Add the Dynamic Listing widget on a page or template.

2. In the **Content Layout** tab, select the **Normal Page** from the **Post Listing Types** dropdown.

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Use-Template-With-Dyamic-Listing.gif)

3. Then, from the **Post Type** dropdown, select your custom post type. Here it will be **Coupons**.

4.  From the **Style** dropdown, select **Custom Skin**.

5. Then you have to select your template from the **Select a template** dropdown.

As per your requirements, you can adjust the number of columns from the Columns Manage tab.

Now it will show the custom-designed coupon code listing.

If you want, you can [add a category wise filter](https://theplusaddons.com/docs/add-filters-to-elementor-custom-post-loop-skin/) from the **Extra Options** tab.

Suggested Read: [How to Create a Scratch Coupon Card in Elementor](https://theplusaddons.com/docs//scratch-coupon-card-in-elementor/)

## Frequently Asked Questions

**Q: What should I do if my custom post type for coupons isn't showing up in Elementor?**
A: If your custom post type isn't appearing, ensure that you've correctly set it up in the Advanced Custom Fields (ACF) plugin. Specifically, check that you've added 'Coupons' as the post type and selected 'Category' under the Taxonomies field. If these settings are correct and it still doesn't show, try refreshing your Elementor editor or checking for plugin conflicts.

**Q: What is the best way to style the coupon code widget in Elementor?**
A: To style the coupon code widget effectively, select the appropriate style from the Standard Style dropdown in the Layout tab. Customize the title and adjust the size and appearance of the coupon code display. This ensures that the widget aligns with your overall website design and enhances visual appeal.

**Q: How do I add custom fields for my coupon post type in Elementor?**
A: To add custom fields, navigate to ACF > Field Groups in your dashboard and click 'Add New'. Create fields for Brand Name, Image, Code, URL, Description, Star Rating, and Valid Until. Make sure to set the location rules to the Coupon post type, so these fields appear when adding new coupons.

**Q: Are there any limitations when using the Dynamic Listing widget for coupon codes?**
A: One limitation is that the Dynamic Listing widget only works with custom post types created in ACF. If you haven't set up your custom post type correctly or if the ACF plugin isn't activated, the widget won't function as intended. Ensure that your setup aligns with the requirements for optimal performance.