How to Add a WooCommerce Coupon Field in Elementor

Coupons and discounts help you get more sales. They also help you keep old customers coming back.

With the Coupon Code widget in Spexo Addons for Elementor, you can add coupon offers on your website in a simple and attractive way.

Requirements #

Before using the Coupon Code widget, make sure the required setup is complete.

• Install and activate Elementor Free.
• Install and activate Spexo Addons Pro.
• Make sure the Coupon Code widget is enabled from widget settings.

How to Activate the Coupon Code Widget #

1. Go to Spexo Addons → Widget Settings.
2. Search for Coupon Code.
3. Turn on the widget toggle.

Key Features #

• 4 Coupon Types: Standard, Peel, Scratch, Slide Out.
• Multiple Coupon Styles: Different style presets for different looks.
• Popup Coupon: Show code in a popup box.
• Redirection Link: Send users to any page after click.
• Masked Links: Add one or more hidden/masked links.
• Elementor Template Support: Use saved templates for front/back content in interactive coupon types.

How to Add Coupon Code in Elementor #

Open a page using the Elementor editor. Search for Coupon Code in the widget panel. Drag the widget into a section or container. The widget settings panel will open automatically.

After completing the initial setup, your Coupon Code will appear as shown below.

How to Configure Coupon Code Widget Settings #

Under the Content tab, you will find options to configure layout and coupon behavior.

Layout #

Coupon Type: In Coupon Type, choose one option:

• Standard – Normal coupon box.
• Peel – Peel corner effect.
• Scratch – Scratch card effect.
• Slide Out – Slide reveal effect.

Select the one that fits your design. For example, choose Standard for a simple coupon setup.

Standard Style: If you choose Standard type, select a style from Standard Style (Style 1 to Style 6).

Alignment Controls:

• Content Alignment – Align text/code inside the coupon.
• Box Alignment – Align the full coupon box in the section.

Content #

• Title: In the Title field, add coupon label text (example: Show Code, Get Discount).
• Redirect Link: In Redirect Link, add the URL where users should go after click/copy action.
• Copy Code Style: Select how the code should look when shown to users.
• Code: In the Code field, add the real coupon code (example: SAVE20).
• Select Action: Choose how users will reveal or copy the code:
  • Click – Show/copy code on click.
  • Popup – Open code inside a popup.

• Hide Link (Masked Links): Enable Hide Link to use masked link text and optional multiple links.
• Loop Option: Enable Loop when you use dynamic fields (like custom post type/ACF values).

Example: If your Redirect Link or Code uses dynamic data from related posts, turning on Loop helps show correct values for each item.

Style 6 (Recommended for Fast Copy UX) #

Style 6 gives a modern copy/click experience.

• Default action text (example: COPY)
• Copied action text (example: COPIED!)
• Default and copied icons
• Copied reset time

This is useful when you want quick one-click coupon copying with clear feedback.

How to Style the Coupon Code Widget #

You can style the Coupon Code widget from the Style tab in Elementor. Style options change based on the coupon type and action you choose.

Note : Standard type and Peel/Scratch/Slide Out types have different style sections.

Standard Style #

When Coupon Type = Standard, you will see the Standard style section.

From here, you can style the normal coupon layout, including text, icon, code area, spacing, colors, and hover states.

For Style 6, you also get special state-based styling: Normal state, Hover state, and Copied state.

Tip : If you want a modern one-click copy look, use Standard + Style 6 + Click.

Popup Style (Standard + Popup Action) #

When Action = Popup in Standard type, you will see popup-related style sections.

• Popup Close Icon: Style the close icon (size, color, background, border, radius, shadow).
• Popup Title/Description: Style popup heading and description (typography, colors, spacing, alignment).
• Popup Copy Code: Style the coupon code area shown inside popup (text, border, background, width, radius).
• Popup Copy Button: Style the copy button in popup (normal/hover colors, border, padding, radius, shadow).
• Popup Visit Button: Style the visit button (normal/hover style, spacing, radius, typography).
• Popup Scroll Bar: If popup scroll is enabled, style scrollbar width, thumb, and track.
• Popup Modal Box: Style popup container box (background, border, radius, spacing, shadow).
• Extra Options: Style popup overlay effects like overlay color and blur/filter look.

Peel, Scratch, and Slide Out Style #

When Coupon Type = Peel / Scratch / Slide Out, you will see these sections:

• Front Side Content: Style front side text/content (color, typography, spacing).
• Back Side Content: Style back side title/description/content (color, typography, spacing).
• Box Content: Style coupon card container (background, border, radius, overlay behavior).

If you face any difficulties, feel free to contact our support team for further assistance.