---
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
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?

## Key Takeaways

- The Plus Addons for Elementor offers a Coupon Code widget that allows users to create discount popups in Elementor.
- Users can customize the popup by selecting options such as Popup Width and adding a background image using the Loop toggle.
- The Coupon Code widget enables users to set a redirection link for the coupon code and customize the copy button text.

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/)*

## Frequently Asked Questions

**Q: What should I do if the discount popup doesn't appear after clicking the coupon code?**
A: If the discount popup doesn't show, check that you've selected 'Popup' from the 'Select Action' dropdown in the Coupon Code widget settings. Additionally, ensure that all required fields, such as the coupon code and redirection link, are filled out correctly. If the popup still doesn't appear, verify that The Plus Addons for Elementor is installed and activated.

**Q: What is the best way to set up the coupon code for maximum visibility?**
A: For maximum visibility, ensure that the title and description in the popup are clear and enticing. Use the 'Copy Button' feature to allow users to copy the coupon code easily. Additionally, consider using a contrasting background image to make the popup stand out. This approach can help attract more attention to your discount offer.

**Q: Does the discount popup work on mobile devices?**
A: The discount popup created with The Plus Addons for Elementor is responsive and should work on mobile devices. However, always test the popup on various screen sizes to ensure that it displays correctly and that all interactive elements, like the copy button, function as intended.

**Q: What happens if I forget to set a redirection link for the coupon code?**
A: If you forget to set a redirection link for the coupon code, users will still see the popup with the coupon code, but clicking the visit button will not lead them anywhere. It's important to set a relevant URL in the 'Redirect Link' field to guide users to the intended page, enhancing their shopping experience.

**Q: Are there any limitations when using the Coupon Code widget in Elementor?**
A: The primary limitation is that the Coupon Code widget is part of The Plus Addons for Elementor, meaning it only works with Elementor and not with other page builders like Gutenberg or Divi. Ensure you have the plugin installed and activated to access all features and avoid compatibility issues.