Ultimate CSS Coupon Library: 20 Copy-Paste Templates for WordPress & WooCommerce

Coupon Code Library for WordPress (20 Styles)

WordPress Integration Guide

Step 1 Add PHP Function to functions.php:
Paste this code at the very bottom of your theme's functions.php file (Appearance > Theme File Editor > Theme Functions). This ensures the script loads correctly in the footer.


/* * Add Coupon Copy Functionality to Footer 
 * Paste this at the very bottom of functions.php
 */
function add_coupon_script_to_footer() {
    ?>
    <script>
    function copyText(element, code) {
        // Create a temporary text area to copy the code
        const textarea = document.createElement('textarea');
        textarea.value = code;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        
        // 1. Animation Effect
        element.style.transform = 'scale(0.95)';
        setTimeout(() => element.style.transform = 'scale(1)', 150);
        
        // 2. Change Text to "COPIED!"
        // Selectors for all different button types in the library
        const btn = element.querySelector('button') || 
                    element.querySelector('.s2-code') || 
                    element.querySelector('.s9-code') || 
                    element.querySelector('.s5-right span') || 
                    element.querySelector('.s11-btn') || 
                    element.querySelector('.s12-code') || 
                    element.querySelector('.s13-btn') || 
                    element.querySelector('.s14-code') || 
                    element.querySelector('.s15-btn') || 
                    element.querySelector('.s16-code') || 
                    element.querySelector('.s17-btn') || 
                    element.querySelector('.s19-btn') || 
                    element.querySelector('.s20-btn');
        
        if(btn) {
            const old = btn.innerText;
            btn.innerText = "COPIED!";
            setTimeout(() => btn.innerText = old, 1500);
        }
    }
    </script>
    <?php
}
add_action('wp_footer', 'add_coupon_script_to_footer');

Step 2 Choose & Implement:
Browse the 20 styles below. Click "Get Code" on any design to reveal its specific HTML and CSS. Copy and paste them into a "Custom HTML" block on your product page.

$10 OFF

Min spend $50

1. Zigzag Receipt

<div class="style-1 cpn-btn" onclick="copyText(this, 'CODE')"><div class="s1-flex"><div><p class="s1-title">$10 OFF</p><p class="s1-desc">Min spend $50</p></div><button class="s1-btn">CODE</button></div></div>

NEW20% OffBLUE20

2. Scalloped Ticket

<div class="style-2 cpn-btn" onclick="copyText(this, 'CODE')"><div class="s2-content"><span class="s2-tag">NEW</span><span class="s2-text">20% Off</span><span class="s2-code">CODE</span></div></div>

🎟️

Flash Sale

Expires soon

3. Cinema Ticket

<div class="style-3 cpn-btn" onclick="copyText(this, 'CODE')"><div class="s3-icon">🎟️</div><div class="s3-main"><p class="s3-h">Flash Sale</p><p class="s3-p">Expires soon</p></div><button class="s3-btn">COPY</button></div>

GAMING50

4. Cyber Tag

<div class="style-4 cpn-btn" onclick="copyText(this, 'CODE')"><span class="s4-text">GAMING50</span><button class="s4-btn">Get Code</button></div>

Free ShippingOn first order

COPYSPLIT5

5. Perforated

<div class="style-5 cpn-btn" onclick="copyText(this, 'CODE')"><div class="s5-left"><span style="font-weight:800; font-size:14px; color:#111;">Free Shipping</span><span style="font-size:11px; color:#666;">On first order</span></div><div class="s5-line"></div><div class="s5-right"><span>COPY</span><span style="font-size:9px;">CODE</span></div></div>

-15%Instant Savings➔

6. Arrow Tag

<div class="style-6 cpn-btn" onclick="copyText(this, 'CODE')"><span class="s6-badge">-15%</span><span class="s6-text">Instant Savings</span><span class="s6-icon">➔</span></div>

HOT DEAL 🔥

7. Postage Stamp

<div class="style-7 cpn-btn" onclick="copyText(this, 'CODE')"><div class="s7-inner"><span class="s7-text">HOT DEAL 🔥</span><button class="s7-btn">CODE</button></div></div>

Summer Sale

Extra 5% off

✂

8. Ripped Paper

<div class="style-8 cpn-btn" onclick="copyText(this, 'CODE')"><div class="s8-content"><h4>Summer Sale</h4><span>Extra 5% off</span></div><div class="s8-btn">✂</div></div>

LEVEL UPPIXEL

9. Digital Steps

<div class="style-9 cpn-btn" onclick="copyText(this, 'CODE')"><span class="s9-text">LEVEL UP</span><span class="s9-code">CODE</span></div>

VIP ACCESS

10. Circle Punch

<div class="style-10 cpn-btn" onclick="copyText(this, 'CODE')"><span class="s10-offer">VIP ACCESS</span><button class="s10-btn">CODE</button></div>

Expires Soon50% OFF

11. Urgency (FOMO)

<div class="style-11 cpn-btn" onclick="copyText(this, 'CODE')"><div class="s11-left"><span class="s11-head">Expires Soon</span><span class="s11-main">50% OFF</span></div><button class="s11-btn">CODE</button></div>

🛡️

Official Promo ✔

TRUSTED

12. Verified Badge

<div class="style-12 cpn-btn" onclick="copyText(this, 'CODE')"><div class="s12-icon">🛡️</div><div class="s12-content"><div class="s12-title">Official Promo <span class="s12-badge">✔</span></div><span class="s12-code">CODE</span></div></div>

Elite Member

Exclusive Access

13. Luxury Gold

<div class="style-13 cpn-btn" onclick="copyText(this, 'CODE')"><div class="s13-inner"><div><div class="s13-text">Elite Member</div><div class="s13-sub">Exclusive Access</div></div><button class="s13-btn">CODE</button></div></div>

🍃 Summer Fresh

Save naturally

ORGANIC

14. Eco/Organic

<div class="style-14 cpn-btn" onclick="copyText(this, 'CODE')"><div class="s14-content"><div class="s14-head"><span class="s14-leaf">🍃</span> Summer Fresh</div><div class="s14-desc">Save naturally</div></div><div class="s14-code">CODE</div></div>

Mystery Deal

15. Mystery Box

<div class="style-15 cpn-btn" onclick="copyText(this, 'CODE')"><div class="s15-box">?</div><div class="s15-info"><div class="s15-title">Mystery Deal</div><button class="s15-btn">Reveal Code</button></div></div>

Minimal COPY CODE

16. Minimalist Mono

<div class="style-16 cpn-btn" onclick="copyText(this, 'CODE')"><span class="s16-text">Minimal</span><span class="s16-code">COPY CODE</span></div>

<SYSTEM_DEAL/>

17. Neon Tech

<div class="style-17 cpn-btn" onclick="copyText(this, 'CODE')"><span class="s17-text"><SYSTEM_DEAL/></span><button class="s17-btn">CODE</button></div>

Last Chance

50%

TAP TO REDEEM

18. High Contrast

<div class="style-18 cpn-btn" onclick="copyText(this, 'CODE')"><div class="s18-head">Last Chance</div><div class="s18-big">50%</div><div class="s18-small">TAP TO REDEEM</div></div>

Sweet Deal

19. Soft Pastel

<div class="style-19 cpn-btn" onclick="copyText(this, 'CODE')"><span class="s19-text">Sweet Deal</span><button class="s19-btn">Get Code</button></div>

Rainbow Sale

20. Holographic

<div class="style-20 cpn-btn" onclick="copyText(this, 'CODE')"><div class="s20-content"><div class="s20-title">Rainbow Sale</div><div class="s20-title">Rainbow Sale</div></div><button class="s20-btn">CODE</button></div>

Summer Sale

PRODUCTS

COMPANY

SUPPORTS