---
title: "How to Create Discount Popup in Elementor?"
url: https://theplusaddons.com/docs/discount-popup-in-elementor/
date: 2024-02-21
modified: 2026-04-09
lang: en
author: "Aditya Sharma"
description: "Do you want to show discount codes in a popup in Elementor? Offering discounts and promotions has become an essential tool for businesses to attract potential customers and retain existing..."
image: https://theplusaddons.com/wp-content/uploads/2024/02/How-to-Create-Discount-Popup-in-Elementor_-1024x536.jpg
word_count: 443
---

# How to Create Discount Popup in Elementor?

## 

- Utilizes the Coupon Code widget from The Plus Addons for Elementor to create discount popups.
- Offers customization options such as Popup Width and On Scroll in the Extra Options tab.
- Enables easy coupon code copying with a dedicated Copy Button feature in the popup.

Do you want to show discount codes in a popup in Elementor? Offering discounts and promotions has become an essential tool for businesses to attract potential customers and retain existing ones. By showing a discount popup you can show additional content along with the coupon code.

With the Coupon Code widget from The Plus Addons for Elementor, you can easily create a discount popup 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)

To do this, add the Coupon Code widget to the page and follow the steps - 

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

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Standard-Effect-With-Popup.gif)

2. After selecting an appropriate style from the **Standard Style** section, add a title in the **Title** field.

Under the **Content **tab, you can add a redirection for the coupon code from the **Redirect Link** field.

3. Then go to the **Copy Code** section and, after selecting an appropriate style from the **Copy Code Style** dropdown, add your coupon code in the **Code** field.

4. Finally, select Popup from the Select Action dropdown. Then you’ll see different pop-up related options - 

**Tab Reverse** - From this toggle, you can show the discount popup in a new tab.

**Loop** - From this toggle, you can add a background image to the popup using the **Popup Background Image**.

**Title** - From here, you can add a title to the popup.

**Description** - From here, you can add a description in the popup.

**Copy Button** - From here, you can change the copy button text. Using this button, you can easily copy the coupon code with a single click.

**After Copy** - From here, you can set the text that will show after the code is copied.

**Visit Button** - From here, you can change the visit button text.

> *Note: This will link to the URL set in the Redirection Link field.*

**Close Icon** - From here, you can select the popup close button icon.

**Code Alignment** - From here, you can align the coupon code section of the popup.

In the **Extra Options** tab, you’ll find some additional options - 

**Popup Width** - From here, you can set the popup width.

**On Scroll** - By enabling this toggle, you can add a scroll bar to the popup by setting a height.

Now, when you click on the coupon code, it will show in a popup.

![Coupon Code Popup Demo](https://theplusaddons.com/wp-content/uploads/2024/02/coupon-code-popup-demo.gif)

*Suggested Read: [How to Show Promo Code in an Elementor Template.](https://theplusaddons.com/docs//show-promo-code-in-an-elementor-template/)*