--- title: "How to Create a Slide Out Discount Code Card in WordPress?" url: https://nexterwp.com/docs/create-a-slide-out-discount-code-card-in-wordpress/ date: 2024-12-31 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "A panel that slides aside is the quickest of these reveals — no dragging, no scratching. The Slide Out type moves the front panel away to show the code behind..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Slide-Out-Discount-Code-Card-in-WordPress_-1024x519.jpg word_count: 319 --- # How to Create a Slide Out Discount Code Card in WordPress? ## Key Takeaways - Nexter Blocks Pro includes the Coupon Code block, and the Slide Out type is enabled under Nexter > Blocks in the WordPress dashboard. - Slide Out uses Front Content for the front panel and Back Description for the discount code, while the Code field applies only to the Standard type. - Slide Direction controls whether the panel moves left by default or another way, and the block carries the class coupon-code-slide-out. A panel that slides aside is the quickest of these reveals — no dragging, no scratching. The Slide Out type moves the front panel away to show the code behind it. *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 **Slide Out**. ![The Coupon Type setting with Standard, Peel, Scratch and Slide Out](https://nexterwp.com/wp-content/uploads/2026/09/coupon-type.webp) - Write the front panel text in **Front Content**. ![Coupon Type set to Slide Out](https://nexterwp.com/wp-content/uploads/2026/09/coupon-slideout.webp) - Put the discount code in **Back Description**. - Choose the **Slide Direction** — left by default. - Publish and try it. > ***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 - **Front panel over back panel.** Measured: a front side and a back side, with the front moving aside on the action.- **Slide Direction decides which way it goes**, and it is written onto the block.- **The back holds the code**, in Back Title and Back Description.- The block carries the class `coupon-code-slide-out`. ## Limitations - **Pro only.**- **The Code field is not used by this type.**- The panel slides within the block, so a card near the edge of a narrow screen can look cramped.- Like the other card types, this needs a pointer or touch. ## Troubleshooting ### The panel does not move Check the action is set the way you expect, and try on a device with a pointer. ### My code is missing Move it from **Code** to **Back Description**. ### It slides the wrong way Change **Slide Direction**. ## Related Docs - [Peel-off discount card](https://nexterwp.com/docs/create-a-peel-off-discount-code-card-in-wordpress/)- [Scratch coupon card](https://nexterwp.com/docs/create-a-scratch-coupon-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 slide out discount code card in WordPress?** A: Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter requires the Pro edition for this card type because the Coupon Code block is part of Nexter Blocks Pro. You also need the Coupon Code block switched on under Nexter > Blocks in your WordPress dashboard, plus the code itself and the page where people should land. That setup matters because the slide out card is built to reveal an existing code, not generate one. **Q: Why is my discount code not showing on the slide out card?** A: The code belongs in Back Description for this card type, not in the Code field. The page says the Code field is used by the Standard type only, and it even notes that a rendered card with a code in Code showed no trace of it. In practice, that means the front panel can look correct while the actual discount stays hidden if it is placed in the wrong field. For this layout, Back Title and Back Description carry the back side content. **Q: How do I stop the panel from sliding the wrong way?** A: Slide Direction controls which way the front panel moves, and left is the default. If it opens in the opposite direction from what you expected, changing Slide Direction fixes it because that setting is written onto the block itself. This matters most when you are matching a card to nearby page layout or spacing, since the motion happens inside the block rather than across the whole page. **Q: Why does my slide out discount card look cramped on a narrow screen?** A: The panel slides within the block, so a card placed near the edge of a narrow screen can feel tight. That is a layout limitation of this type, not a broken animation. In practice, cards with less surrounding space are more likely to feel boxed in because both sides still live inside the same block area. Planning placement matters more here than with a full-width reveal. **Q: Does this discount card work with touch devices or only with a mouse?** A: This card needs a pointer or touch, so it is built for interaction rather than passive display. That detail matters because the front panel moves aside only when there is an action to trigger it. For real-world use, that means it fits normal desktop and mobile interaction patterns better than hover-only reveals. **Q: Should I use a slide out discount card or a peel-off or scratch coupon card?** A: The slide out type is the quickest reveal because there is no dragging and no scratching. If you want a simple motion that shows the code behind a front panel, Slide Out fits that job better than more tactile styles. For other reveal behaviors, Nexter also has [Peel-off discount card](https://nexterwp.com/docs/create-a-peel-off-discount-code-card-in-wordpress/) and [Scratch coupon card](https://nexterwp.com/docs/create-a-scratch-coupon-card-in-wordpress/), which are better matches when you want those specific interactions.