BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Guide

Coupon Code Free

How to set up and style the Coupon Code widget in Elementor.

Coupon Code shows a discount code with a badge, a title and a short description. The code can stay hidden until the visitor clicks “Show code”, or be visible with a copy button, and it can end on a date you set.

Part of: Bright Addons (free).

See the widget page and live demo

Set it up

  1. Drag the Coupon Code widget onto the page.

  2. In Coupon, type the Code and choose How the Code Shows.

  3. Fill in Discount Badge, Title and Description.

  4. Optionally set Open a Page When Revealed.

  5. In Expiry, set Ends On and choose When It Ends.

  6. Change the button words in Button Text if needed, then style the coupon.

Content options

Coupon

Option What it does
Code The discount code.
How the Code Shows Hidden until "Show code" is clicked, or always visible with a copy button.
Discount Badge A short badge such as 20% OFF.
Title The offer title.
Title Tag The HTML tag of the title.
Description Terms or details of the offer.
Open a Page When Revealed Opens this address in a new tab when the visitor clicks "Show code".

Button Text

Option What it does
Show Code Text of the reveal button.
Copy Text of the copy button.
After Copying Text shown after the code is copied.

Expiry

Option What it does
Ends On Optional end date and time, in your site time zone.
Expiry Line A line under the coupon. {date} becomes the end date. Leave it empty to hide it.
When It Ends Show a message instead of the code, or hide the whole coupon.
Message The message shown after the end date.

Layout

Option What it does
Layout In a row or stacked.
Alignment Left, center or right for the stacked layout.
Bright Addons Pro

Like this free widget? Get 70+ more with Pro

Pro adds 77 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $16 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Box

    accent color, background, padding, border, radius and shadow.

  • Discount Badge

    color, typography, background, padding and radius.

  • Title and Text

    title, description and expiry line colors and typography.

  • Code

    text color, background, dashed border color, typography and padding.

  • Button

    typography, normal and hover colors, border width, radius and padding.

Tips

  • The code is part of the page either way, so never use this widget for secret or one time codes.

  • The end date is checked on the server and again in the browser, so a cached page still switches to the message on time.

  • The editor keeps showing the coupon after the end date so you can still edit it.

Questions and answers

Is the hidden code really secret?

No. It is in the page code and only hidden visually, so use codes you are happy to share.

What happens when the coupon ends?

It shows your Message instead of the code, or hides completely, depending on When It Ends.

Can I link to my shop when the code is shown?

Yes. Set Open a Page When Revealed and the address opens in a new tab.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides