---
title: "How to Create Discount Popup in Elementor?"
url: https://theplusaddons.com/docs/discount-popup-in-elementor/
date: 2024-02-21
modified: 2026-09-22
lang: en
author: "Aditya Sharma"
description: "A popup gives a coupon room: a headline, a line of explanation, the code itself, a button that copies it, and a button that sends the visitor to the shop...."
image: https://theplusaddons.com/wp-content/uploads/2024/02/How-to-Create-Discount-Popup-in-Elementor_-1024x536.jpg
word_count: 931
---

# How to Create Discount Popup in Elementor?

## 

- Coupon Code ships only in The Plus Addons for Elementor Pro, and the free plugin contains no coupon widget at all.
- The popup shows a headline, description, code, Copy Button, Visit Button, and Close Icon after Select Action is set to Popup.
- Copy Code copies the coupon to the clipboard, while the plain Click action only shows the code.
- Closing the popup strips the query string from the URL, and two coupon popups on the same page interfere with each other.

A popup gives a coupon room: a headline, a line of explanation, the code itself, a button that copies it, and a button that sends the visitor to the shop.

It is also the only place in this widget where the code is actually copied to the clipboard. The plain **Click** action just shows the code.

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**.

## Set up the popup

- Edit the page with Elementor and drag the **Coupon Code** widget onto it.- In **Content > Layout**, leave **Coupon Type** on **Standard** and pick one of the five pictures under **Standard Style**.- In **Content > Content**, write the button text in **Title**, put the shop's address in **Redirect Link**, pick a **Copy Code Style** and type the coupon into **Code**.- Set **Select Action** to **Popup**. The popup's own fields appear underneath.- Fill in **Title**, **Description**, **Copy Button**, **After Copy**, **Visit Button**, **Close Icon** and **Code Alignment**.

![Setting the Coupon Code widget to the Popup action in Elementor.](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Standard-Effect-With-Popup.gif)

## The popup fields

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Title** | The heading inside the popup. | `Here is your coupon code` |
| **Description** | One line under the heading. | `Use code on site` |
| **Copy Button** | The label on the copy button. | `Copy Code` |
| **After Copy** | What the copy button says for two seconds after it is pressed. | `Copied!` |
| **Visit Button** | The label on the button that opens **Redirect Link**. | `Visit Site` |
| **Close Icon** | The icon on the close button. | empty |
| **Code Alignment** | Where the code sits inside the popup. | centre; responsive |
| **Tab Reverse** | Sends **Redirect Link** to the current tab and opens the popup in a new one. | off |
| **Loop** | Gives each rendered copy of the widget a page-unique id - needed inside a listing. Turning it on also reveals **Popup Background Image**. | off |

**Content > Extra Options** adds two more: **Popup Width**, in pixels or per cent, and **On Scroll**, which gives the popup its own **Height** and a scrollbar when the content is taller than that.

## How It Behaves

- **The popup opens over the page.** Measured on a published page: clicking the coupon opened a 500 × 300 modal reading **Here is your coupon code**, **Use code on site**, the code, **Copy Code** and **Visit Site**, with a close button in the corner.- **Copy Code really copies.** After the click, reading the system clipboard back gave exactly the coupon code, and the button's label changed to **Copied!** before returning to **Copy Code**.- **Visit Site uses Redirect Link.** If you leave **Redirect Link** empty the button has nowhere to go.- **The close button closes it.** The popup and its overlay disappear and the page is as it was.

![The discount popup: title, description, code, Copy Code and Visit Site.](https://theplusaddons.com/wp-content/uploads/2026/09/couponcode-result-popup.webp)

![The discount popup opening on the front end.](https://theplusaddons.com/wp-content/uploads/2024/02/coupon-code-popup-demo.gif)

## Limitations

- **Closing the popup rewrites the address bar.** The close handler strips the query string from the URL, so a visitor who arrived on `?utm_source=…` or on any filtered or paginated address loses it the moment they close the popup. Measured: a page opened at `/?page_id=4610` showed `/` after the popup was closed.- **Put one coupon popup on a page, not several.** The popup's open and close handlers, and the **Popup Width** setting, are written against every coupon popup on the page rather than the one widget, so two popup coupons on the same page interfere with each other. Only one popup coupon per page was measured.- **The popup is not a page-wide popup system.** It only opens when the visitor clicks this coupon. For popups on a timer, on exit intent or on scroll, use the Popup widget instead.- **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:

- **Popup Background Image.** The field's condition was confirmed (Standard + Popup + Loop enabled) but no image was set and the rendered popup background was not observed.- **On Scroll and its Height slider**, and the **Popup Scroll Bar** style section. Labels, defaults and conditions only.- **The Style tab.** Standard **Style 1** and **Style 3** were rendered; no colour, typography, border or popup-styling control was exercised.- **Popup Width.** The control exists and writes a maximum width; no value was applied and measured.

## Troubleshooting

### Nothing happens when I click

Check the published page rather than the Elementor preview. Then check **Select Action** is still **Popup** - switching **Coupon Type** away from **Standard** hides the whole popup section.

### The copy button does nothing

Copying needs a page served over HTTPS in most browsers. On a plain HTTP staging site the button may change to **Copied!** without anything reaching the clipboard.

### The visitor loses their tracking parameters

Closing the popup rewrites the address bar without the query string. If you depend on campaign parameters, read them before the popup is closed, or use the **Click** action instead.

### The close icon is an empty square

Pick an icon in **Close Icon**, and make sure Font Awesome is loaded on the page - the widget does not load it.

## 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 Add Coupon Code With Masked Link in Elementor?](https://theplusaddons.com/docs/coupon-code-with-masked-link-in-elementor/)- [How to Show Promo Code in an Elementor Template?](https://theplusaddons.com/docs/show-promo-code-in-an-elementor-template/)

## Frequently Asked Questions

**Q: What do I need before creating a discount popup in Elementor?**
A: The popup setup depends on The Plus Addons for Elementor Pro, because the Coupon Code widget ships only in the Pro version. Elementor itself also needs to be installed and active. In the widget list, the Coupon Code toggle has to be enabled under The Plus Addons > Widgets, which is different from Extensions. That matters because if the widget is not enabled there, the popup section never appears in the editor.

**Q: Why does nothing happen when I click the coupon on the page?**
A: The most common cause is testing in Elementor preview instead of the published page. The popup behavior is tied to the live page, and Select Action must still be set to Popup. Another gotcha is switching Coupon Type away from Standard, which hides the whole popup section. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses that Standard + Popup setup for this workflow.

**Q: Can I use a discount popup to send visitors to my shop and copy the code at the same time?**
A: That is exactly how this widget behaves: it shows a code, gives a copy button, and includes a Visit Button that opens Redirect Link. The copy action is separate from the shop link, so one button copies to clipboard while the other sends traffic onward. If Redirect Link is left empty, Visit Site has nowhere to go, so that part of the popup becomes useless.

**Q: What happens if I use more than one coupon popup on the same page?**
A: Multiple coupon popups on one page interfere with each other. The open and close handlers, plus Popup Width, are written against every coupon popup on that page rather than only one widget instance. That means one popup can affect another instead of staying isolated. The measured result was one coupon popup per page, which is the safe setup if you want predictable behavior.

**Q: Why does my tracking parameter disappear after closing the popup?**
A: Closing the popup rewrites the address bar and strips off the query string. That means campaign parameters like ?utm_source=... vanish as soon as the visitor closes it, and filtered or paginated URLs can also collapse back to a plain path. If those parameters matter for attribution, read them before closing or use Click action instead of relying on the popup close flow.

**Q: Why is the close icon showing as an empty square?**
A: The Close Icon uses Font Awesome, but The Plus Addons does not load Font Awesome by itself. If nothing else on the page loads it, that icon can render as a blank box. Picking an icon in Close Icon only works cleanly when Font Awesome is already available on the page, so this is usually a missing-icon-library problem rather than a broken popup.