How to Add a Checkbox to WooCommerce Cart Blocks to Auto-Apply Coupons?

The new WooCommerce Cart Blocks page offers a more streamlined shopping experience for customers. However, the default Cart Blocks have limited customization options and do not provide an easy way to auto-apply discounts. To simplify this discount applying process, you can add a checkbox to the Cart Blocks page that automatically applies a coupon when selected by the customer. This makes the checkout experience easy for both you and your customers.

In this guide, we’ll show you how to add a checkbox in WooCommerce Cart Blocks that automatically applies a coupon when it is checked, simplifying the discount application in the cart.

Solution: Add a Checkbox to WooCommerce Cart Blocks to Auto-Apply Coupons

The code inserts a checkbox on the Cart Blocks page, and when a customer checks or unchecks it, the discount coupon (in this case, “10percentoff”) is automatically applied or removed.

Note: The coupon is applied only if the 10percentoff coupon has been created in the backend under Marketing > Coupons, as shown below.

It is recommended to add the following code to your WordPress site using the Code Snippets plugin.

// Listen for updates from the Cart Blocks page to apply or remove the discount coupon
add_action( 'woocommerce_blocks_loaded', function() {
    woocommerce_store_api_register_update_callback(
        [
            'namespace' => 'custom-cart-discount',
            'callback'  => function( $data ) {
                $coupon_code = '10PERCENTOFF'; // Ensure this coupon exists in WooCommerce
                
                if ( isset( $data['checked'] ) && filter_var( $data['checked'], FILTER_VALIDATE_BOOLEAN ) === true ) {
                    WC()->cart->apply_coupon( $coupon_code );
                } else {
                    WC()->cart->remove_coupon( $coupon_code );
                }
            }
        ]
    );
});

// Enqueue inline JavaScript to add the discount checkbox below the product table on the Cart Blocks page
function ts_custom_cart_inline_script() {
    if ( is_cart() ) {
        wp_add_inline_script(
            'wc-blocks-checkout', // Ensure this handle is present; you may replace it with 'jquery' if needed.
            "
            document.addEventListener('DOMContentLoaded', function () {
                // Function to insert the discount checkbox after the product table
                function insertDiscountCheckbox() {
                    // Look for the product table in the cart blocks container
                    const cartTable = document.querySelector('.wc-block-cart table');
                    if (cartTable && !document.getElementById('apply_discount')) {
                        // Create checkbox and label elements
                        const checkbox = document.createElement('input');
                        checkbox.type = 'checkbox';
                        checkbox.id = 'apply_discount';
                        checkbox.style.marginRight = '10px';
                        
                        const label = document.createElement('label');
                        label.htmlFor = 'apply_discount';
                        label.textContent = 'Get 10% off instantly when you complete your purchase today!';
                        label.style.marginRight = '20px';
                        
                        // Insert them immediately after the product table
                        cartTable.insertAdjacentElement('afterend', checkbox);
                        cartTable.insertAdjacentElement('afterend', label);
                        
                        // Add event listener for checkbox changes
                        checkbox.addEventListener('change', function () {
                            if (window.wc && window.wc.blocksCheckout) {
                                const { extensionCartUpdate } = window.wc.blocksCheckout;
                                extensionCartUpdate({
                                    namespace: 'custom-cart-discount',
                                    data: {
                                        checked: checkbox.checked
                                    }
                                });
                            }
                        });
                    }
                }
                
                // Use a MutationObserver to watch for when the cart table is rendered
                const observer = new MutationObserver(function(mutations, obs) {
                    if (document.querySelector('.wc-block-cart table')) {
                        insertDiscountCheckbox();
                        obs.disconnect(); // Stop observing once inserted
                    }
                });
                
                // Start observing the cart container for changes
                const cartContainer = document.querySelector('.wc-block-cart');
                if (cartContainer) {
                    observer.observe(cartContainer, {
                        childList: true,
                        subtree: true
                    });
                } else {
                    // Fallback: if cart container is not found, try again after a delay
                    setTimeout(insertDiscountCheckbox, 1000);
                }
            });
            ",
            'after'
        );
    }
}
add_action( 'wp_enqueue_scripts', 'ts_custom_cart_inline_script' );

Output

If you’re using the new Cart Blocks page, a checkbox labeled “Get 10% off instantly when you complete your purchase today!” appears below the product table. When the checkbox is checked, the coupon “10percentoff” is applied automatically. If the checkbox is unchecked, the coupon is removed from the cart.

A well-designed checkout process isn’t just about discounts—it’s also about making quantity selection easier for customers. One way to achieve this is by adding step quantity controls on the cart blocks page, allowing users to adjust product quantities in fixed increments. While this was easy to do on the classic cart page, you can now implement the same functionality on the Cart Blocks page with a simple snippet. Such customizations are very helpful for store owners to encourage bulk orders.