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