如何在Woocommerce中通过AJAX实现无刷新提交订单功能？

实现前提 #

• 所有操作优先在子主题目录下执行，避免修改官方主题、插件代码导致版本更新后内容被覆盖
• 测试阶段可以临时开启WooCommerce调试模式排查错误，生产环境部署前记得关闭调试

第一步：注册后端AJAX处理接口 #

将以下代码添加到子主题的functions.php文件中：

// 适配登录用户的AJAX请求
add_action('wp_ajax_custom_place_order', 'custom_woocommerce_place_order');
// 适配未登录用户的AJAX请求
add_action('wp_ajax_nopriv_custom_place_order', 'custom_woocommerce_place_order');

function custom_woocommerce_place_order() {
    // 校验请求合法性，防止恶意请求
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'woocommerce-process_checkout')) {
        wp_send_json_error(['message' => '请求校验失败，请刷新页面后重试']);
    }

    // 复用WooCommerce原生结算逻辑，自动完成订单写入、库存扣减、金额校验等操作
    WC()->checkout()->process_checkout();
    wp_die();
}

第二步：添加前端AJAX请求逻辑 #

继续在子主题functions.php文件末尾追加以下代码，注入前端脚本拦截默认提交事件：

add_action('wp_footer', 'custom_checkout_ajax_script');
function custom_checkout_ajax_script() {
    // 仅在结算页加载脚本，其他页面不生效
    if (is_checkout() && !is_wc_endpoint_url('order-received')) :
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        // 拦截提交订单按钮的默认点击事件
        $(document).on('click', '#place_order', function(e) {
            e.preventDefault();
            
            var checkout_form = $('form.checkout');
            // 触发WooCommerce原生表单校验，包含地址、手机号、支付方式选择等校验规则
            checkout_form.trigger('checkout_place_order');
            
            // 表单校验通过后发起AJAX请求
            if (checkout_form.valid()) {
                var form_data = checkout_form.serialize();
                // 追加AJAX动作标识和校验参数
                form_data += '&action=custom_place_order&nonce=' + '<?php echo wp_create_nonce("woocommerce-process_checkout"); ?>';

                $.ajax({
                    type: 'POST',
                    url: '<?php echo admin_url('admin-ajax.php'); ?>',
                    data: form_data,
                    dataType: 'json',
                    beforeSend: function() {
                        // 自定义加载状态，可根据需求修改为加载动画
                        $('#place_order').attr('disabled', true).text('订单处理中...');
                        $('.woocommerce-custom-notice').remove();
                    },
                    success: function(response) {
                        if (response.success) {
                            // 下单成功后跳转至订单支付页/订单详情页，也可自定义成功提示逻辑
                            window.location.href = response.data.redirect;
                        } else {
                            // 显示错误提示，比如库存不足、地址格式错误等
                            $('form.checkout').before('<div class="woocommerce-custom-notice woocommerce-error">' + response.data.message + '</div>');
                            $('#place_order').attr('disabled', false).text('提交订单');
                        }
                    },
                    error: function() {
                        $('form.checkout').before('<div class="woocommerce-custom-notice woocommerce-error">服务器异常，请稍后重试</div>');
                        $('#place_order').attr('disabled', false).text('提交订单');
                    }
                });
            }
        });
    });
    </script>
    <?php
    endif;
}

场景适配优化 #

• 如果你的站点接入了验证码、优惠券校验等扩展功能，需要在表单校验环节追加对应扩展的校验逻辑
• 第三方支付场景下保留代码中的成功跳转逻辑即可正常跳转至支付渠道，如果是站内支付可以在成功回调中追加支付弹窗触发逻辑
• 所有订单数据会复用WooCommerce原生逻辑写入数据库，不需要额外编写订单数据存储、状态更新的代码

测试前请清空WooCommerce缓存和浏览器缓存，避免旧的结算页脚本冲突。如果遇到按钮点击无响应的问题，确认你的主题没有修改默认的结算表单ID和提交按钮ID。

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