WooCommerce优惠券表单移至woocommerce_review_order_before_payment后无法提交如何解决

核心原因 #

• 原生WooCommerce优惠券表单默认渲染在结账主表单外部，自带独立的提交逻辑
• woocommerce_review_order_before_payment 钩子位于结账主表单内部，直接移动表单会出现表单嵌套问题，导致原有AJAX提交逻辑失效

可行解决方案 #

步骤1：移除原有表单挂载，自定义输出适配内部位置的优惠券字段 #

将以下代码添加到站点子主题functions.php文件，或代码片段管理插件中：

// 移除默认位置的优惠券表单
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

// 自定义输出目标位置的优惠券输入区域
add_action( 'woocommerce_review_order_before_payment', 'custom_checkout_coupon_field', 5 );
function custom_checkout_coupon_field() {
    if ( wc_coupons_enabled() ) { ?>
        <div class="checkout-coupon-wrapper">
            <p class="form-row form-row-first">
                <input type="text" name="coupon_code" class="input-text" placeholder="<?php esc_attr_e( '优惠券代码', 'woocommerce' ); ?>" id="custom_coupon_code" value="" />
            </p>
            <p class="form-row form-row-last">
                <button type="button" class="button" name="apply_coupon" id="custom_apply_coupon" value="<?php esc_attr_e( '应用优惠券', 'woocommerce' ); ?>"><?php esc_html_e( '应用优惠券', 'woocommerce' ); ?></button>
            </p>
            <div class="clear"></div>
            <div class="coupon-notice" id="coupon_message" style="display:none;margin:10px 0;"></div>
        </div>
    <?php }
}

步骤2：添加自定义AJAX提交和后端处理逻辑 #

继续添加以下代码实现优惠券提交功能：

// 注入前端AJAX处理脚本
add_action( 'wp_footer', 'custom_coupon_submit_script' );
function custom_coupon_submit_script() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) { ?>
        <script type="text/javascript">
        jQuery(function($){
            // 监听应用优惠券按钮点击
            $('#custom_apply_coupon').on('click', function(e){
                e.preventDefault();
                let couponCode = $('#custom_coupon_code').val().trim();
                if(!couponCode) return;

                $.ajax({
                    type: 'POST',
                    url: wc_checkout_params.ajax_url,
                    data: {
                        action: 'apply_custom_coupon',
                        coupon_code: couponCode,
                        security: wc_checkout_params.apply_coupon_nonce
                    },
                    beforeSend: function(){
                        $('#custom_apply_coupon').text('<?php esc_html_e( '应用中...', 'woocommerce' ); ?>');
                    },
                    success: function(res){
                        if(res.success){
                            $('#coupon_message').text(res.data.message).css('color','#2c8e23').show();
                            // 刷新结账金额汇总
                            $('body').trigger('update_checkout');
                        }else{
                            $('#coupon_message').text(res.data.message).css('color','#cc2424').show();
                        }
                        $('#custom_apply_coupon').text('<?php esc_attr_e( '应用优惠券', 'woocommerce' ); ?>');
                        setTimeout(() => {$('#coupon_message').hide()}, 3500);
                    }
                });
            });
        });
        </script>
    <?php }
}

// 后端处理优惠券应用请求
add_action( 'wp_ajax_apply_custom_coupon', 'handle_apply_custom_coupon' );
add_action( 'wp_ajax_nopriv_apply_custom_coupon', 'handle_apply_custom_coupon' );
function handle_apply_custom_coupon() {
    check_ajax_referer( 'apply-coupon', 'security' );

    if ( empty( $_POST['coupon_code'] ) ) {
        wp_send_json_error( ['message' => __('请输入优惠券代码', 'woocommerce')] );
    }

    $couponCode = wc_clean( $_POST['coupon_code'] );
    $applyResult = WC()->cart->apply_coupon( $couponCode );

    if ( is_wp_error( $applyResult ) ) {
        wp_send_json_error( ['message' => $applyResult->get_error_message()] );
    }
    wp_send_json_success( ['message' => __('优惠券应用成功', 'woocommerce')] );
}

注意事项 #

• 代码添加完成后，请清空站点缓存、浏览器缓存后再进行测试
• 若使用自定义结账页面模板，请确认woocommerce_review_order_before_payment钩子在模板中正常触发
• 不要直接修改父主题的functions.php文件，避免主题更新后代码丢失

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