---
title: "Coupon Code Widget: Settings Overview"
url: https://theplusaddons.com/docs/coupon-code-widget-settings-overview/
date: 2024-02-21
modified: 2026-04-09
author: "Aditya Sharma"
description: "Offering coupons and discounts is a powerful marketing strategy to attract and retain customers. With the use of coupon codes, businesses can offer special discounts or other benefits to their..."
image: https://theplusaddons.com/wp-content/uploads/2024/02/Coupon-Code-Widget_-Settings-Overview-1024x536.jpg
word_count: 786
---

# Coupon Code Widget: Settings Overview

## Key Takeaways

- Coupon Code widget from The Plus Addons for Elementor allows users to add coupon codes to their Elementor website.
- Four coupon types available are Standard, Peel, Scratch, and Slide Out.
- Users can redirect to a URL from the coupon code using the Redirection feature.
- The Coupon Code widget requires the PRO version of The Plus Addons for Elementor to function.

Offering coupons and discounts is a powerful marketing strategy to attract and retain customers. With the use of coupon codes, businesses can offer special discounts or other benefits to their customers, which can significantly impact their purchasing decisions.

With the Coupon Code widget from The Plus Addons for Elementor, you can easily add coupon codes to your Elementor website.

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

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor ](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/)plugin installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text)

- Make sure the Coupon Code widget is activated. To verify this, visit The Plus Addons → Widgets → and search for Coupon Code and activate.

## Learn via Video Tutorial:

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

## How to Activate the Coupon Code Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Activate-1024x343.png)

## Key Features

- **Four Coupon Types **- You can choose four coupon types: Standard, Peel, Scratch, and Slide Out.

- **Multiple Coupon Styles **- You can choose from multiple coupon styles.

- **Discount Popup** - You can easily show [discount codes in a popup.](https://theplusaddons.com/docs//discount-popup-in-elementor/)

- **Redirection** - You can easily [redirect to a URL from the coupon code.](https://theplusaddons.com/docs//coupon-code-with-redirection-in-elementor/)

- **Masked Link** - You can easily pass [multiple masked links.](https://theplusaddons.com/docs//coupon-code-with-masked-link-in-elementor/)

- **Elementor Template** - You can [show content using an Elementor template.](https://theplusaddons.com/docs//show-promo-code-in-an-elementor-template/)

## How to Add a Coupon Code in Elementor?

To add a coupon code, add the Coupon Code widget to the page. 

### Layout

From the **Coupon Type **section, you can select a coupon type. Here you’ll find four options - 

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

- **Standard** - To create a standard coupon code.

- **Peel** - To create a [peel off coupon code card.](https://theplusaddons.com/docs/peel-off-discount-code-card-in-elementor/)

- **Scratch** - To create a [scratch coupon code card.](https://theplusaddons.com/docs//scratch-coupon-card-in-elementor/)

- **Slide Out** - To create a[ slide out coupon code card.](https://theplusaddons.com/docs//slide-out-discount-code-card-in-elementor/)

Select the option as per your requirements. Let’s select Standard here.

Then, from the **Standard Style** section, you have to select a style.

You can align the coupon code content from the **Content Alignment** section.

From the **Box Alignment** section, you can align the coupon code box.

### Content

In the **Title** field, you have to add the coupon code title.

From the **Redirect Link** field, you can add a redirection for the coupon code.

You can choose the style for showing the actual coupon code from the **Copy Code Style** dropdown.

Then, in the **Code** field, you have to add your coupon code.

From the **Select Action** dropdown, you can select the action for revealing the coupon code. Here you’ll find two options - 

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

- **Popup** - To show the coupon code in a pop-up.

Select the option as per your requirements, let’s select Click here.

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

From the **Hide Link** toggle, you can add masked links to the coupon code.

By enabling the **Loop **toggle, your dynamic content will display properly.

**Example:** Suppose you select a dynamic link of any custom post type**(ACF)** in the **Redirect Link** section or choose a dynamic value of any custom post type**(ACF)** in the **Code **section, then by enabling this toggle, the related post will display properly.

## How to Style the Coupon Code Widget?

You can style the Coupon Code from the Style tab. You’ll see different styling options between the Standard and other coupon types.

**Standard** - You’ll see this option for the Standard coupon type. From here, you can manage the standard coupon style. You’ll see additional styling options for different coupon styles. 

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

When the pop-up action is selected for the Standard coupon type, you’ll see some pop-up-related styling options.

**Popup Close Icon** - From here, you can style the popup close icon.

**Popup Title/Description** - From here, you can style the popup title and description.

**Popup Copy Code** - From here, you can style the coupon code section in the popup.

**Popup Copy Button** - From here, you can style the copy button in the popup.

**Popup Visit Button** - From here, you can style the visit site button in the popup.

**Popup Modal Box** - From here, you can style the popup modal box.

**Extra Options** - From here, you can style the pop-up overlay.

When Peel, Scratch, or Slide Out coupon type is selected, you’ll see the following styling options - 

**Front Side Content** - From here, you can style the front side content of the coupon code card.

**Back Side Content** - From here, you can style the back side content of the coupon code card.

**Box Content** - From here, you can style the coupon code card container background.

Advanced options remain common for all our widgets; you can explore all their options from here.

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)

## Frequently Asked Questions

**Q: What are the different types of coupons I can create with the Coupon Code widget?**
A: The Coupon Code widget allows you to create four types of coupons: Standard, Peel, Scratch, and Slide Out. Each type serves a different purpose; for instance, the Peel and Scratch types provide an interactive experience, while the Standard type is straightforward. Choosing the right type depends on your marketing strategy and how you want to engage customers.

**Q: How do I activate the Coupon Code widget in The Plus Addons for Elementor?**
A: To activate the Coupon Code widget, navigate to The Plus Addons u2192 Widgets in your WordPress dashboard. Search for the Coupon Code widget and toggle it on. This step is crucial as it ensures the widget is available for use in your Elementor designs.

**Q: What is the best way to style the Coupon Code widget for a pop-up display?**
A: When using the pop-up action for the Standard coupon type, you have specific styling options available. You can customize the popup close icon, title, description, and buttons. Proper styling ensures that the pop-up is visually appealing and aligns with your website's branding, enhancing user engagement.

**Q: What common mistakes should I avoid when setting up the Coupon Code widget?**
A: One common mistake is not enabling the Loop toggle when using dynamic content for the Redirect Link or Code fields. This toggle ensures that related posts display correctly, especially when using custom post types. Failing to enable it may result in broken links or incorrect content being shown.

**Q: How can I use the Coupon Code widget to create a discount popup?**
A: The Coupon Code widget supports displaying discount codes in a popup format. You can select the Popup action in the Select Action dropdown, which allows users to view the coupon code in a pop-up window. This method can effectively capture user attention and encourage conversions.