如何延迟WooCommerce结账页购物车更新以保留优惠券错误提示

你的问题出在没有阻止WooCommerce默认的优惠券提交Ajax流程，导致你写的延迟更新代码被默认的即时更新覆盖，所以错误提示还是会快速消失。以下是可行的解决方案：

替换代码 #

把你原来的代码换成这段：

jQuery(function($) {
    // 拦截结账页面的优惠券表单提交事件
    $(document).on('submit', '.checkout_coupon', function(e) {
        e.preventDefault(); // 阻止默认提交行为，避免即时更新购物车

        var $couponForm = $(this);
        var couponCode = $couponForm.find('input[name="coupon_code"]').val();

        // 手动发起优惠券验证请求
        $.ajax({
            url: wc_checkout_params.ajax_url,
            type: 'POST',
            data: {
                action: 'apply_coupon',
                coupon_code: couponCode,
                security: wc_checkout_params.apply_coupon_nonce
            },
            success: function(response) {
                // 先清除之前的错误提示
                $couponForm.find('.woocommerce-error').remove();

                if (response.result === 'success') {
                    // 优惠券有效，立即更新结账信息
                    $(document.body).trigger('update_checkout');
                } else {
                    // 显示无效优惠券的错误提示
                    $couponForm.prepend('<div class="woocommerce-error">' + response.messages + '</div>');
                    // 延迟5秒后再更新购物车，让提示停留足够久
                    setTimeout(function() {
                        $(document.body).trigger('update_checkout');
                    }, 5000); // 可自行修改延迟时长，单位为毫秒
                }
            },
            error: function() {
                // 请求失败时的提示
                $couponForm.find('.woocommerce-error').remove();
                $couponForm.prepend('<div class="woocommerce-error">优惠券验证失败，请稍后重试</div>');
                setTimeout(function() {
                    $(document.body).trigger('update_checkout');
                }, 5000);
            }
        });
    });
});

代码说明 #

1. 阻止默认行为：通过e.preventDefault()拦截WooCommerce自带的优惠券提交流程，避免它立即更新购物车覆盖错误提示。
2. 手动验证优惠券：自己发起Ajax请求验证优惠券，根据返回结果分别处理：
   • 优惠券有效时，立即触发结账信息更新，保持原有正常流程。
   • 优惠券无效时，先显示错误提示，延迟指定时间后再更新购物车，确保用户能看到提示。
3. 适配WooCommerce全局变量：使用wc_checkout_params获取Ajax地址和验证密钥，这是WooCommerce结账页默认提供的全局变量，无需额外配置。

内容的提问来源于stack exchange，提问作者Sujon