---
title: "How to Create a Scratch Coupon Card in Elementor?"
url: https://theplusaddons.com/docs/scratch-coupon-card-in-elementor/
date: 2024-02-21
modified: 2026-09-22
lang: en
author: "Aditya Sharma"
description: "A scratch card makes a discount feel like a prize. The visitor rubs the front of the card away with the mouse or a finger, and the code underneath appears...."
image: https://theplusaddons.com/wp-content/uploads/2024/02/How-to-Create-a-Scratch-Coupon-Card-in-Elementor_-1024x536.jpg
word_count: 797
---

# How to Create a Scratch Coupon Card in Elementor?

## 

- The Coupon Code widget in The Plus Addons for Elementor Pro creates a scratch card by drawing a canvas over front-side content, and the code underneath appears after the visitor rubs it away with a mouse or finger.
- The widget uses Content > Layout > Scratch, and Content > Content lets the editor set Width, Height, and Fill Percent For Reveal, which defaults to 70.
- The scratch surface is generated in the browser after the page loads, and eight full-width drags across a 420 × 260 card remove the canvas entirely in the example shown.
- The front side becomes a flat picture, so links and videos stop being interactive, and icons can render as empty boxes if Font Awesome is not loaded by another plugin.

A scratch card makes a discount feel like a prize. The visitor rubs the front of the card away with the mouse or a finger, and the code underneath appears.

The **Coupon Code** widget does this with a canvas drawn over your front-side content, and one setting decides how much has to be scratched off.

For the full settings tour of the **Coupon Code** widget, see [Coupon Code Widget: Settings Overview](https://theplusaddons.com/docs/coupon-code-widget-settings-overview/).

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

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

## Before You Start

- **Edition:** **Pro** — **Coupon Code** ships only in The Plus Addons for Elementor Pro. The free plugin contains no coupon widget at all, so there is nothing to fall back to.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Coupon Code** and turn its toggle on. This is the **Widgets** screen, not **Extensions**.

## Build the card

- Edit the page with Elementor and drag the **Coupon Code** widget onto it.- In **Content > Layout**, choose **Scratch** under **Coupon Type**.- In **Content > Content**, set **Width** and **Height**. Both are responsive sliders in pixels.- Still in **Content**, set **Fill Percent For Reveal**. This is the share of the card that has to be scratched off before the rest disappears on its own. It defaults to **70**.- Fill in **Content > Front Side** (**Content Type** **Default**, then **Content** and **Content Tag**) and **Content > Back Side** (**Title**, **Title Tag**, **Description**).

![Setting up a scratch coupon card in the Elementor panel.](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Scratch-Effect-1.gif)

![The scratch card before it is scratched.](https://theplusaddons.com/wp-content/uploads/2026/09/couponcode-result-scratch-before.webp)

## The fields

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Coupon Type** | Switches the widget to a scratch card. | **Standard** - change it to **Scratch** |
| **Width** / **Height** | The card's size. Responsive; **Width** is a maximum. | empty |
| **Fill Percent For Reveal** | How much has to be scratched before the rest clears by itself. 1 to 100. | **70** |
| **Content Type** (front and back) | **Default** for plain fields, **Template** for a saved Elementor template. | **Default** |

## How It Behaves

- **The scratch surface is generated in the browser.** A moment after the page loads, the widget takes a picture of your front-side content, draws it onto a canvas the same size as the card, and removes the original front side.- **Dragging erases.** On a published page, eight full-width drags across a 420 × 260 card removed the canvas entirely and left the back side - the code and its description - on screen.- **Reaching the percentage clears the rest automatically.** You do not have to scratch every last corner; once **Fill Percent For Reveal** is passed the whole surface goes.- **It is one-way.** Reload the page to get the card back.

![The same card scratched away, showing the code.](https://theplusaddons.com/wp-content/uploads/2026/09/couponcode-result-scratch-after.webp)

![A scratch coupon card being scratched on the front end.](https://theplusaddons.com/wp-content/uploads/2024/02/coupon-code-scratch-demo.gif)

## Limitations

- **Fill Percent For Reveal is a percentage shown with a px unit.** The slider reads **px** but the number is the share of the card that has to be scratched. Leave the unit alone and set the number.- **The scratch surface is a canvas drawn from your front-side content.** It is generated in the browser after the page loads, so it appears a moment late, and the front side is rendered as a flat picture - links, videos or anything interactive in it stop being interactive.- **The card appears a beat after the rest of the page.** The scratch surface cannot be drawn until the page has rendered, so on a slow connection the plain front-side content is briefly visible first.- **Icons can render as empty boxes.** The widget's scissors icon and the **Close Icon** use Font Awesome, which The Plus Addons does not load by itself. On a page with no other Font Awesome icon they can come out blank.

## Not verified

So you know exactly what has and has not been checked:

- **Touch devices.** The peel, scratch and slide-out gestures were driven with a mouse on a desktop viewport. The widget binds touch events too, but a real touch device was not used.- **The Style tab.** Standard **Style 1** and **Style 3** were rendered; no colour, typography, border or popup-styling control was exercised.- **Fill Percent For Reveal at values other than 70.** The default was measured. Lower and higher settings were not.

## Troubleshooting

### There is nothing to scratch

Check the published page rather than the Elementor preview, and give the card a **Height** - a card with no height has almost no surface to draw on.

### The card has to be scratched almost completely

Lower **Fill Percent For Reveal**. At the default of 70 most of the card has to go before the rest clears.

### My front side had a button on it and it stopped working

The front side is flattened into a picture. Put interactive content on the back side, or use **Peel** or **Slide Out**, which keep the front side as real elements.

## Related Docs

- [Coupon Code Widget: Settings Overview](https://theplusaddons.com/docs/coupon-code-widget-settings-overview/)- [How to Create a Peel Off Discount Code Card in Elementor?](https://theplusaddons.com/docs/peel-off-discount-code-card-in-elementor/)- [How to Create a Slide Out Discount Code Card in Elementor?](https://theplusaddons.com/docs/slide-out-discount-code-card-in-elementor/)- [How to Create Discount Popup in Elementor?](https://theplusaddons.com/docs/discount-popup-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before creating a scratch coupon card in Elementor?**
A: The scratch coupon card is part of The Plus Addons for Elementor Pro, so the Pro version has to be installed and activated. Elementor itself also needs to be installed and active. The widget is enabled from The Plus Addons > Widgets, where you search for Coupon Code and turn it on. That matters because the free plugin has no coupon widget at all, so there is no fallback version to use.

**Q: How do I make the coupon card behave like a scratch card instead of a normal coupon block?**
A: The key switch is Coupon Type set to Scratch in Content > Layout. That changes the widget from a standard coupon into a scratch surface drawn over your front-side content. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses a canvas overlay here, so the front side is what gets scratched away while the back side stays hidden until enough of the surface is removed.

**Q: Why does my scratch card need a height set?**
A: A scratch card needs visible surface area for the canvas to draw on, so a card with no Height has almost nothing to scratch. Width and Height are responsive sliders in pixels, and Width acts as a maximum. If the card looks empty or unresponsive, the first thing to check is whether it actually has enough height on the published page.

**Q: Why does my front-side button stop working on a scratch coupon card?**
A: The front side is flattened into a picture after the page loads, so interactive elements on that side stop behaving like real elements. That means buttons, links, videos, and anything else interactive should not live on the front face if you need them to work. Put interactive content on the back side instead, or use Peel or Slide Out, which keep the front side as real elements.

**Q: How much of the card has to be scratched before the code appears?**
A: That depends on Fill Percent For Reveal. It defaults to 70, which means most of the surface has to be removed before the rest clears automatically. Lowering that value makes the reveal happen sooner, while higher values make users scratch more of the card first. On a published page, eight full-width drags across a 420 × 260 card removed the canvas entirely at the tested setting.

**Q: Why does my scratch coupon card show up late or look blank at first?**
A: The scratch surface is generated in the browser after the page loads, so there can be a short delay before it appears. On slower connections, the plain front-side content may flash briefly before the canvas is drawn over it. Icons can also render as empty boxes if Font Awesome is not loaded elsewhere on the page, because The Plus Addons does not load it by itself.