--- title: "How to Create a Scratch Coupon Card in WordPress?" url: https://nexterwp.com/docs/create-a-scratch-coupon-card-in-wordpress/ date: 2024-12-31 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "A scratch card is the most familiar way there is to hide a prize, and everyone already knows what to do. The Scratch type draws a surface over your code..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Scratch-Coupon-Card-in-WordPress_-1024x519.jpg word_count: 365 --- # How to Create a Scratch Coupon Card in WordPress? ## Key Takeaways - Nexter Blocks Pro includes the Coupon Code block, and the Scratch type is enabled under Nexter > Blocks in the WordPress dashboard. - Scratch cards place the discount code in Back Description, while the Code field applies only to the Standard type and is ignored by card types. - Fill Percent sets the reveal threshold, and the scratch surface uses a real element with the class coupon-code-scratch; scratching cannot be done with a keyboard. A scratch card is the most familiar way there is to hide a prize, and everyone already knows what to do. The Scratch type draws a surface over your code that the visitor rubs away. *For every Coupon Code setting in one place, see the [Coupon Code block guide](https://nexterwp.com/docs/add-a-coupon-code-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-coupon-code/) ## Before You Start - **Edition:** **Pro** — the Coupon Code block is part of Nexter Blocks Pro.- **Block to enable:** Coupon Code, switched on under **Nexter > Blocks** in your WordPress dashboard.- **The code itself**, and the page you want people sent to. ## Steps - Add the **Coupon Code** block and click **Design from Scratch**. - Set **Coupon Type** to **Scratch**. ![The Coupon Type setting with Standard, Peel, Scratch and Slide Out](https://nexterwp.com/wp-content/uploads/2026/09/coupon-type.webp) - Put the discount code in **Back Description**. ![Coupon Type set to Scratch](https://nexterwp.com/wp-content/uploads/2026/09/coupon-scratch.webp) - Set **Fill Percent** — how much has to be scratched off before the code counts as revealed. - Set the scratch area's width and height if the default does not suit. - Publish and scratch it. ![A published scratch card before being scratched, drawn on a real canvas](https://nexterwp.com/wp-content/uploads/2026/09/coupon-fe-scratch.webp) > ***The Code field does not apply here.** It is used by the Standard type only. On the card types the discount goes in **Back Description** — measured: with a code set in the Code field, the rendered card contained no trace of it.* ## How It Behaves - **The scratch surface is a real canvas.** Measured: a `` element sized to the block sits over the back side.- **Fill Percent is the threshold**, not the starting state. At 70 the visitor has to clear about seventy per cent before the reveal completes.- **The back holds the code**, in Back Title and Back Description.- The block carries the class `coupon-code-scratch`. ## Limitations - **Pro only.**- **The Code field is not used by this type.**- **Scratching cannot be done with a keyboard.** Anyone who cannot drag has no way to reach the code, so do not put anything essential behind it.- A canvas does not scale like text, so check the card on a phone. ## Troubleshooting ### Nothing is revealed however much I scratch **Fill Percent** may be set very high. Lower it. ### The code never appears It is probably in the **Code** field, which this type ignores. Use **Back Description**. ### The scratch area is the wrong size Set its width and height explicitly rather than leaving them empty. ## Related Docs - [Peel-off discount card](https://nexterwp.com/docs/create-a-peel-off-discount-code-card-in-wordpress/)- [Slide-out card](https://nexterwp.com/docs/create-a-slide-out-discount-code-card-in-wordpress/)- [Coupon Code block: all settings](https://nexterwp.com/docs/add-a-coupon-code-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before creating a scratch coupon card in WordPress?** A: Nexter Blocks Pro is required because the Coupon Code block is part of the Pro edition. The block also has to be switched on under Nexter > Blocks in your WordPress dashboard, and you need the discount code plus the page people should be sent to. That setup matters because the Scratch type hides the code on a canvas layer, so if the block is not enabled first, nothing else in the tutorial can work. **Q: How do I make a coupon card use the scratch effect instead of a normal coupon layout?** A: The Scratch effect comes from setting Coupon Type to Scratch after adding the Coupon Code block and choosing Design from Scratch. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides this card type as part of the Coupon Code block flow. That choice matters because the scratch surface is what visitors rub away to reveal the back side. **Q: Where should I put the discount code on a scratch coupon card?** A: The discount code goes in Back Description for this card type. The page is explicit that the Code field does not apply here and is used by the Standard type only. That distinction matters because if you put the code in Code, the rendered card shows no trace of it. For related settings across all coupon layouts, use the [Coupon Code block guide](https://nexterwp.com/docs/add-a-coupon-code-in-wordpress/). **Q: Why isn't anything revealed when I scratch the card?** A: Fill Percent is probably set too high. It is the threshold for reveal, not the starting state, so a value like 70 means about seventy per cent of the surface has to be cleared before the code appears. Lowering it makes the reveal happen sooner. The scratch surface is a real canvas over the back side, so this behavior is tied to how much of that canvas has been removed. **Q: Does a scratch coupon card work for users who only use a keyboard?** A: The scratch interaction depends on dragging across a canvas, so keyboard-only users cannot reach the code through this effect. That is an important limitation of this card type, not just a styling detail. Because of that, anything essential should not be hidden behind it. The page also notes that a canvas does not scale like text, so checking it on a phone is worth doing. **Q: What should I do if the scratch area size looks wrong on my page?** A: Set the scratch area's width and height explicitly instead of leaving them empty. The default size may not suit every layout, especially because the scratch surface is a canvas sized to sit over the back side. If you leave those fields blank, sizing can feel off compared with surrounding content. For other reveal styles built from similar coupon cards, see [Peel-off discount card](https://nexterwp.com/docs/create-a-peel-off-discount-code-card-in-wordpress/) and [Slide-out card](https://nexterwp.com/docs/create-a-slide-out-discount-code-card-in-wordpress/).