Skip to content

How to Create a Peel Off Discount Code Card in WordPress?

Updated On : September 27, 2026By : Reading Time : 2 minutes

Key Takeaways

  • Nexter Blocks Pro incluye el bloque Coupon Code, y el tipo Peel se activa en Coupon Type para crear una tarjeta con una capa frontal que el visitante levanta.
  • El código de descuento se coloca en Back Description con un título en Back Title, porque el campo Code no se usa para este tipo y solo aplica al tipo Standard.
  • La tarjeta Peel usa una capa recortada con clip-path y su propia transform, lleva la clase coupon-code-peel y no es accesible con teclado porque requiere un puntero o un dedo.
Table of Contents

Peeling back a corner to see what is underneath is a small pleasure, and it makes a discount feel earned.

The Peel type puts a front layer over the code and lets the visitor lift it away.

For every Coupon Code setting in one place, see the Coupon Code block guide.

LIVE BLOCK LINK

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

  1. Add the Coupon Code block and click Design from Scratch.
  1. Set Coupon Type to Peel.
The Coupon Type setting with Standard, Peel, Scratch and Slide Out
  1. Write what the visitor sees first in Front Content.
Coupon Type set to Peel
  1. Put the discount code in Back Description, with a heading in Back Title.
  1. Publish and peel the corner.

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 peel is a real clipped layer. Measured: the front side renders with a clip-path and its own transform, sitting over the back side.
  • The back is what holds the code, in Back Title and Back Description.
  • The front can be a saved pattern instead of plain text, so the card can carry a logo or an image.
  • The block carries the class coupon-code-peel, which is what the styling hangs off.

Limitations

  • Pro only.
  • The Code field is not used by this type. ” + a(OVERVIEW_DOC, “See where the code goes”) + “.
  • Peeling needs a pointer or a finger, so it is not reachable by keyboard.
  • The card is a fixed shape. Long back text overflows rather than growing the card.

Troubleshooting

My code does not show when I peel

The code is in the Code field, which this type ignores. Move it to Back Description.

The front layer does not lift

Peeling is a drag, so check on a device with a pointer or touch.

The back text is cut off

Shorten it, or raise the card’s height in the Style tab.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before creating a peel off discount code card in WordPress?

Nexter Blocks Pro is the key requirement, because the Coupon Code block is part of the Pro edition. The block also has to be enabled under Nexter > Blocks in your WordPress dashboard. Beyond that, you need the code itself and the page where you want people sent. That setup matters because the peel card is built around a real coupon reveal, not just a visual effect.

How do I make the discount code appear under a peel layer instead of in the normal code field?

The Peel type stores the discount in Back Description, with Back Title used as the heading on the hidden side. The Code field is ignored for this card type and only applies to Standard. That distinction matters because if you put the code in Code, the rendered card will not show it when peeled. For all Coupon Code settings in one place, see the Coupon Code block guide.

Why isn’t my code showing when I peel the card?

The usual cause is that the code was entered in the Code field, which this type ignores. Move it to Back Description so it becomes part of the hidden side of the card. That behavior is specific to card types like Peel, where the back holds the actual coupon content. Nexter Blocks Pro uses this layout so the front can stay clean while the reveal carries the offer.

Can I use a peel off discount card with just text on the front, or can it show an image or logo too?

The front does not have to be plain text. The page says the front can be a saved pattern instead of text, so you can carry a logo or an image on that visible layer. That makes the peel effect more useful for branded offers, since visitors see a designed cover first and only reveal the coupon after peeling.

Why does my peel off card not work on keyboard-only navigation?

Peeling needs a pointer or a finger, so this interaction is not reachable by keyboard. That is a built-in limitation of how the peel behaves, not just a styling issue. If accessibility for keyboard users matters on that page, this card type should be treated as a pointer or touch interaction rather than a fully keyboard-operable control.

What should I do if long text gets cut off on a peel off discount card?

Shorten the back text or raise the card’s height in the Style tab. The card has a fixed shape, so long content overflows instead of expanding to fit it. That means copy length matters more here than with flexible layouts. If you need different reveal styles, related options include Scratch coupon card and Slide-out card.

Last reviewed: September 28, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53