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.

PHP
/**
 * 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' ] );
?>

How To Implement This Solution?

Leave a Reply