Coupon Code Widget: Settings Overview

Updated on March 7, 2024 by Ananda
Table Of Content

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.

Required Setup

Learn via Video Tutorial:

How to Activate the Coupon Code Widget?

Go to 

  • The Plus Settings Plus widgets 
  • Search the widget name and turn on the toggle then click Save.
Coupon code activate coupon code widget: settings overview from the plus addons for elementor

Key Features

How to Add Coupon Code in Elementor?

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

Content

From the Coupon Type dropdown, you can select a coupon type. Here you’ll find four options – 

Coupon code standard

Standard – To create a standard coupon code.

Peel – To create a peel off coupon code card.

Scratch – To create a scratch coupon code card.

Slide Out – To create a slide out coupon code card.

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

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

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 align the coupon code content from the Content Alignment section.

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

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

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

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

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. 

Coupon code style

When the popup action is selected for the Standard coupon type, you’ll see some popup 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 popup 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 widget, you can explore all it options from here.

View Advanced tab tutorial.

OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X