/**
* Snippet Name: Add Checkbox to Apply Coupon at Add to Cart Button
* Snippet Author: coding-bunny.com
* Description: Adds a checkbox near the add-to-cart button on WooCommerce product pages for applying a discount coupon.
* Version: 1.1.0
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class cbcac_Coupon_Checkbox {
// Edit here your discount details //
const COUPON_CODE = 'discount10';
const BADGE_TEXT = 'Black Friday';
/////////////////////////////////////
const NONCE_ACTION = 'cbcac_coupon_nonce';
public static function cbcac_init() {
if ( ! class_exists( 'WooCommerce' ) ) return;
add_action( 'woocommerce_after_add_to_cart_button', [ __CLASS__, 'cbcac_show_checkbox' ], 10 );
add_action( 'woocommerce_add_to_cart', [ __CLASS__, 'cbcac_handle_coupon' ], 10, 6 );
add_action( 'wp_head', [ __CLASS__, 'cbcac_css' ] );
add_action( 'wp_footer', [ __CLASS__, 'cbcac_js' ] );
}
public static function cbcac_css() {
if ( ! is_product() ) return;
?>
<style type="text/css">
.cbcac-coupon-wrapper {
padding: 16px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background: #f9f9f9;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.cbcac-coupon-wrapper.active {
border-color: #4caf50;
background: #f1f8e9;
}
.cbcac-coupon-badge {
background: #333;
color: white;
font-weight: 600;
padding: 6px 10px;
border-radius: 4px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-block;
line-height: 1;
margin: 0;
}
.cbcac-coupon-label {
color: #333;
font-size: 14px;
font-weight: 400;
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
margin: 0;
flex: 1;
min-width: 0;
}
.cbcac-coupon-checkbox {
margin: 0 10px 0 0;
width: 16px;
height: 16px;
cursor: pointer;
vertical-align: middle;
flex-shrink: 0;
}
.cbcac-coupon-text {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.cbcac-coupon-discount {
color: black;
font-weight: 900;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 768px) {
.cbcac-coupon-wrapper { padding: 12px; margin: 16px 0; gap: 10px; }
.cbcac-coupon-badge { font-size: 10px; padding: 5px 8px; }
.cbcac-coupon-label { font-size: 13px; }
.cbcac-coupon-checkbox { width: 14px; height: 14px; margin-right: 8px; }
.cbcac-coupon-text { gap: 4px; }
}
@media (max-width: 480px) {
.cbcac-coupon-wrapper {
margin: 12px 0;
padding: 10px;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
}
.cbcac-coupon-badge { margin: 0; }
.cbcac-coupon-label { justify-content: center; flex: none; }
}
</style>
<?php
}
public static function cbcac_js() {
if ( ! is_product() ) return;
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var $wrapper = $(".cbcac-coupon-wrapper");
var $checkbox = $(".cbcac-coupon-checkbox");
var $label = $(".cbcac-coupon-label");
$label.on("click", function(e) {
if (e.target.type !== "checkbox") {
e.preventDefault();
$checkbox.prop("checked", !$checkbox.prop("checked")).trigger("change");
}
});
$checkbox.on("change", function() {
$wrapper.toggleClass("active", $(this).is(":checked"));
});
if ($checkbox.is(":checked")) {
$wrapper.addClass("active");
}
});
</script>
<?php
}
public static function cbcac_show_checkbox() {
global $product;
if ( ! $product || ! is_product() ) return;
if ( ! in_array( $product->get_type(), [ 'simple', 'variable' ], true ) ) return;
if ( ! self::cbcac_coupon_is_valid() ) return;
$nonce = wp_create_nonce( self::NONCE_ACTION );
$checkbox_id = 'cbcac_apply_coupon_' . $product->get_id();
$is_applied = WC()->cart->has_discount( self::COUPON_CODE );
?>
<div class="cbcac-coupon-wrapper<?php echo $is_applied ? ' active' : ''; ?>">
<span class="cbcac-coupon-badge"><?php echo esc_html( self::BADGE_TEXT ); ?></span>
<label for="<?php echo esc_attr( $checkbox_id ); ?>" class="cbcac-coupon-label">
<input
type="checkbox"
id="<?php echo esc_attr( $checkbox_id ); ?>"
name="cbcac_apply_coupon"
value="1"
class="cbcac-coupon-checkbox"
<?php checked( $is_applied ); ?>
/>
<div class="cbcac-coupon-text">
<span><?php esc_html_e( 'Activate', 'textdomain' ); ?></span>
<span class="cbcac-coupon-discount">10%</span>
<span><?php esc_html_e( 'discount', 'textdomain' ); ?></span>
</div>
</label>
<input type="hidden" name="<?php echo esc_attr( self::NONCE_ACTION ); ?>" value="<?php echo esc_attr( $nonce ); ?>" />
</div>
<?php
}
private static function cbcac_coupon_is_valid() {
$coupon = new WC_Coupon( self::COUPON_CODE );
return $coupon->is_valid();
}
public static function cbcac_handle_coupon( $cart_item_key, $product_id, $quantity, $variation_id, $variation, $cart_item_data ) {
if ( ! isset( $_POST[ self::NONCE_ACTION ] ) ||
! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST[ self::NONCE_ACTION ] ) ), self::NONCE_ACTION ) ) {
return;
}
$apply = isset( $_POST['cbcac_apply_coupon'] ) ? absint( $_POST['cbcac_apply_coupon'] ) : 0;
if ( 1 === $apply ) {
if ( ! WC()->cart->has_discount( self::COUPON_CODE ) ) {
WC()->cart->apply_coupon( self::COUPON_CODE );
}
} else {
if ( WC()->cart->has_discount( self::COUPON_CODE ) ) {
WC()->cart->remove_coupon( self::COUPON_CODE );
}
}
}
}
add_action( 'init', [ 'cbcac_Coupon_Checkbox', 'cbcac_init' ] );
?>Add Checkbox to Apply Coupon at Add to Cart Button
Adds a checkbox near the add-to-cart button on WooCommerce product pages for applying a discount coupon.


