25% off ProSNIPC25OFF

Click-to-Copy Coupon Code Box

Shortcode that renders a styled coupon code box; clicking the code or the copy button copies it to the clipboard with a brief confirmation.

Module3 parts · by SnipCraft

PHPLogic

php
<?php
if ( ! function_exists( 'scseed_coupon_box_shortcode' ) ) :
add_shortcode( 'scseed_coupon', 'scseed_coupon_box_shortcode' );
function scseed_coupon_box_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'code'    => 'SAVE10',
        'label'   => 'Use this code at checkout:',
        'expiry'  => '',
    ), $atts, 'scseed_coupon' );

    $code    = strtoupper( sanitize_text_field( $atts['code'] ) );
    $label   = sanitize_text_field( $atts['label'] );
    $expiry  = sanitize_text_field( $atts['expiry'] );
    $id      = 'scseed-coupon-' . wp_unique_id();

    ob_start();
    ?>
    <div class="scseed-coupon-box" id="<?php echo esc_attr( $id ); ?>">
        <?php if ( $label ) : ?>
            <p class="scseed-coupon-box__label"><?php echo esc_html( $label ); ?></p>
        <?php endif; ?>
        <div class="scseed-coupon-box__row">
            <span class="scseed-coupon-box__code" role="text" aria-label="Coupon code: <?php echo esc_attr( $code ); ?>"><?php echo esc_html( $code ); ?></span>
            <button class="scseed-coupon-box__btn" type="button" data-code="<?php echo esc_attr( $code ); ?>" aria-label="Copy coupon code">
                <span class="scseed-coupon-box__btn-text">Copy</span>
            </button>
        </div>
        <?php if ( $expiry ) : ?>
            <p class="scseed-coupon-box__expiry">Expires: <?php echo esc_html( $expiry ); ?></p>
        <?php endif; ?>
    </div>
    <?php
    return ob_get_clean();
}
endif;

CSSStyles

css
.scseed-coupon-box {
    display: inline-block;
    border: 2px dashed #0073aa;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    background: #f0f7ff;
    text-align: center;
    max-width: 360px;
    width: 100%;
    box-sizing: border-box;
}
.scseed-coupon-box__label {
    margin: 0 0 0.65rem;
    font-size: 0.88rem;
    color: #555;
}
.scseed-coupon-box__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.scseed-coupon-box__code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #0073aa;
    background: #fff;
    border: 1px solid #bde0f7;
    border-radius: 5px;
    padding: 0.3rem 0.75rem;
    user-select: all;
    cursor: pointer;
}
.scseed-coupon-box__btn {
    padding: 0.4rem 0.9rem;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.scseed-coupon-box__btn:hover { background: #005a87; }
.scseed-coupon-box__btn.is-copied { background: #2ecc71; }
.scseed-coupon-box__expiry {
    margin: 0.65rem 0 0;
    font-size: 0.8rem;
    color: #888;
}

JavaScriptScript

js
(function(){
    document.addEventListener('click', function(e){
        var btn = e.target.closest('.scseed-coupon-box__btn');
        var code_el = e.target.closest('.scseed-coupon-box__code');
        var target_btn = btn;
        if (!target_btn && code_el) {
            target_btn = code_el.closest('.scseed-coupon-box').querySelector('.scseed-coupon-box__btn');
        }
        if (!target_btn) return;
        var code = target_btn.dataset.code;
        if (!code) return;
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(code).then(function(){
                flashCopied(target_btn);
            }).catch(function(){
                fallbackCopy(code, target_btn);
            });
        } else {
            fallbackCopy(code, target_btn);
        }
    });

    function flashCopied(btn) {
        var textEl = btn.querySelector('.scseed-coupon-box__btn-text');
        var prev   = textEl ? textEl.textContent : btn.textContent;
        if (textEl) textEl.textContent = 'Copied!'; else btn.textContent = 'Copied!';
        btn.classList.add('is-copied');
        setTimeout(function(){
            if (textEl) textEl.textContent = prev; else btn.textContent = prev;
            btn.classList.remove('is-copied');
        }, 2000);
    }

    function fallbackCopy(text, btn) {
        var ta = document.createElement('textarea');
        ta.value = text;
        ta.style.position = 'fixed';
        ta.style.opacity  = '0';
        document.body.appendChild(ta);
        ta.focus();
        ta.select();
        try { document.execCommand('copy'); flashCopied(btn); } catch(e){}
        document.body.removeChild(ta);
    }
})();
#shortcode#ecommerce#clipboard#conversion#coupon