WooCommerce 5.6.0移动优惠券表单后提交刷新丢失数据问题求解

问题根因 #

你调整优惠券表单位置后，表单DOM节点脱离了WooCommerce默认绑定AJAX事件的监听范围，导致提交时触发了原生表单的整页POST提交逻辑，而非默认的无刷新AJAX请求。

解决方案 #

方法一：调整表单挂载钩子（优先使用）

替换你当前functions.php中移动优惠券表单的代码为以下内容，确保表单挂载在WooCommerce订单区块的事件监听容器内：

// 移除顶部默认优惠券表单
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
// 将优惠券表单挂载到订单商品列表下方、支付方式上方的位置
add_action( 'woocommerce_review_order_before_payment', 'woocommerce_checkout_coupon_form', 10 );

修改后WooCommerce会自动为该位置的优惠券表单绑定原有AJAX提交逻辑，无需额外调整即可实现无刷新更新。

方法二：手动绑定AJAX提交事件（方法一无效时使用）

如果调整钩子后仍存在刷新问题，可在主题自定义JS文件中加入以下代码，手动覆盖表单提交逻辑：

jQuery(function($) {
    // 拦截优惠券表单提交事件
    $(document).on('submit', '.checkout_coupon', function(e) {
        e.preventDefault();
        const $form = $(this);
        const couponCode = $form.find('input[name="coupon_code"]').val();

        // 校验优惠券码非空
        if (!couponCode) return;

        $.ajax({
            url: wc_checkout_params.wc_ajax_url.replace('%%endpoint%%', 'apply_coupon'),
            type: 'POST',
            data: {
                security: wc_checkout_params.apply_coupon_nonce,
                coupon_code: couponCode
            },
            beforeSend: () => $form.addClass('loading'),
            success: (res) => {
                $form.removeClass('loading');
                $('.woocommerce-error, .woocommerce-message').remove();
                
                if (res.messages) $form.before(res.messages);
                if (!res.failure) {
                    // 无刷新更新订单信息
                    $(document.body).trigger('update_checkout');
                    $form.find('input[name="coupon_code"]').val('');
                }
            }
        });
    });
});

注意事项 #

• 所有PHP代码请添加到子主题的functions.php文件中，避免主题更新后自定义代码被覆盖
• 操作前建议备份站点文件和数据库，防止配置错误影响站点正常运行
• 测试前请清除站点缓存、浏览器缓存，避免旧代码影响验证结果

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