How to Add a Confirmation Popup for COD Payment in WooCommerce Checkout ?

Offering Cash on Delivery (COD) is convenient for your customers, but sometimes users click it by mistake, or they’re unsure whether they really want to pay by COD.

So, to tackle this, it’s better to ask them to confirm their decision to choose the Cash on Delivery payment method before placing the order.

In this tutorial, we’ll show you how to add a confirmation popup for COD payment in WooCommerce using a simple code snippet. This helps reduce accidental COD orders and ensures better checkout accuracy.

Solution: Add a Confirmation Popup for COD Payment

This code displays a modal popup on the checkout page whenever a customer selects Cash on Delivery (COD).

The user must click Confirm to proceed with COD. If they click Cancel, the COD selection is removed, and their previous payment option is restored automatically.

// Add confirmation popup for COD payment
add_action('wp_footer', 'ts_code_confirmation');
function ts_code_confirmation() {
    if (is_checkout() && !is_wc_endpoint_url()) : ?>
        <script>
        jQuery(function($) {
            const paymentSelector = 'input[name="payment_method"]';
            const hiddenInput = '<input type="hidden" name="confirm_cod" value="1">';
            const hiddenInputSel = 'input[name="confirm_cod"]';
            let previousPayment = $(paymentSelector + ':checked').val(); // store current method

            // Show modal when COD is selected
            function showCodModal() {
                if ($('.confirmation-modal').length === 0) {
                    $('body').append(`
                        <div class="confirmation-modal">
                            <div class="modal-content">
                                <p>Are you sure you want to place the order with Cash on Delivery?</p>
                                <button class="confirm-button">Confirm</button>
                                <button class="cancel-button">Cancel</button>
                            </div>
                        </div>`);

                    $('form.checkout').append(hiddenInput);

                    // Confirm COD
                    $('.confirm-button').on('click', function() {
                        $('.confirmation-modal').remove();
                        previousPayment = 'cod';
                    });

                    // Cancel COD and restore previous selection
                    $('.cancel-button').on('click', function() {
                        $(hiddenInputSel).remove();
                        $('.confirmation-modal').remove();
                        if (previousPayment) {
                            $('#payment_method_' + previousPayment)
                                .prop('checked', true)
                                .trigger('change');
                        }
                    });
                }
            }

            // Track payment method changes
            $('form.checkout').on('change', paymentSelector, function() {
                const selected = $(this).val();
                if (selected === 'cod') {
                    showCodModal();
                } else {
                    previousPayment = selected; // update previously selected payment
                }
            });
        });
        </script>

        <style>
        .confirmation-modal {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(0,0,0,0.5);
            z-index: 9999;
        }
        .modal-content {
            background: #fff;
            padding: 20px;
            border-radius: 6px;
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
            text-align: center;
        }
        .confirm-button, .cancel-button {
            margin: 8px;
            padding: 8px 18px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .confirm-button { background: #007cba; color: #fff; }
        .cancel-button { background: #ccc; }
        </style>
    <?php endif;
}

Output 

When a customer visits the checkout page and selects Cash on Delivery, a confirmation pop-up appears with the confirm and cancel buttons.

If they click Confirm, the COD option remains selected, and they can proceed to place the order.

If they click Cancel, the pop-up closes, and the checkout automatically switches back to the previously selected payment method (for example, PayPal or Credit Card).

By adding a confirmation pop-up, your customers can confidently choose their preferred payment method, reducing accidental COD orders and ensuring a smoother checkout experience for everyone. To take your checkout customization even further, consider removing the default pre-selected payment method in WooCommerce.  This allows customers to make a deliberate choice every time they place an order.