如何将WooCommerce优惠券链接改为AJAX触发 无需刷新购物车页面

1. 后端新增AJAX处理接口 #

将以下代码添加到主题functions.php文件或自定义功能插件中，完成AJAX接口的注册与优惠券应用逻辑处理：

// 注册登录/未登录用户均可访问的AJAX接口
add_action('wp_ajax_apply_custom_coupon', 'ajax_apply_custom_coupon');
add_action('wp_ajax_nopriv_apply_custom_coupon', 'ajax_apply_custom_coupon');
function ajax_apply_custom_coupon() {
    // 安全校验
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'apply_coupon_nonce')) {
        wp_send_json_error(['message' => '安全校验失败，请刷新页面重试']);
    }
    if (!function_exists('WC') || !WC()->session) {
        wp_send_json_error(['message' => '购物车功能未启用']);
    }
    $coupon_code = sanitize_text_field($_POST['coupon_code']);
    if (empty($coupon_code)) {
        wp_send_json_error(['message' => '优惠券代码无效']);
    }
    WC()->session->set_customer_session_cookie(true);
    // 检查优惠券是否已应用
    if (WC()->cart->has_discount($coupon_code)) {
        wp_send_json_error(['message' => '该优惠券已应用到您的购物车']);
    }
    // 应用优惠券
    $applied = WC()->cart->add_discount($coupon_code);
    if ($applied) {
        wc_clear_notices();
        WC()->cart->calculate_totals();
        // 获取更新后的购物车总计区域
        ob_start();
        woocommerce_cart_totals();
        $cart_totals = ob_get_clean();
        wp_send_json_success([
            'message' => '优惠券应用成功',
            'cart_totals' => $cart_totals,
            'fragments' => WC()->cart->get_refreshed_fragments()
        ]);
    } else {
        // 提取官方错误提示
        $notices = wc_get_notices('error');
        $message = !empty($notices) ? wp_strip_all_tags(reset($notices)['notice']) : '优惠券应用失败，请检查优惠券是否有效';
        wc_clear_notices();
        wp_send_json_error(['message' => $message]);
    }
}

你原本的coupon_links函数可以保留，用于兼容旧版本带查询参数的优惠券链接，不影响新的AJAX功能。

2. 前端添加AJAX交互脚本 #

将以下JS代码添加到主题自定义JS文件中，或通过wp_footer钩子注入到页面底部：

jQuery(function($) {
    // 拦截优惠券链接点击事件
    $(document).on('click', '.apply-coupon-link', function(e) {
        e.preventDefault();
        const $link = $(this);
        const couponCode = $link.data('coupon');
        const nonce = $link.data('nonce');
        // 添加加载状态，与WooCommerce默认交互效果对齐
        $link.addClass('loading').prop('disabled', true);
        // 移除历史提示
        $('.woocommerce-error, .woocommerce-message').remove();

        $.ajax({
            url: wc_add_to_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'apply_custom_coupon',
                coupon_code: couponCode,
                nonce: nonce
            },
            success: function(res) {
                if (res.success) {
                    // 全局更新购物车相关DOM片段
                    if (res.data.fragments) {
                        $.each(res.data.fragments, function(key, value) {
                            $(key).replaceWith(value);
                        });
                    }
                    // 更新购物车总计区域
                    if ($('.cart_totals').length && res.data.cart_totals) {
                        $('.cart_totals').replaceWith(res.data.cart_totals);
                    }
                    // 输出官方样式的成功提示
                    $('.woocommerce').prepend('<div class="woocommerce-message" role="alert">' + res.data.message + '</div>');
                } else {
                    // 输出官方样式的错误提示
                    $('.woocommerce').prepend('<div class="woocommerce-error" role="alert">' + res.data.message + '</div>');
                }
            },
            error: function() {
                $('.woocommerce').prepend('<div class="woocommerce-error" role="alert">请求失败，请刷新页面重试</div>');
            },
            complete: function() {
                // 移除加载状态
                $link.removeClass('loading').prop('disabled', false);
            }
        });
    });
});

3. 优惠券链接改造 #

将你原本的优惠券跳转链接调整为以下结构，替换CODE123为实际优惠券码即可：

<a href="javascript:void(0)" class="apply-coupon-link" data-coupon="CODE123" data-nonce="<?php echo wp_create_nonce('apply_coupon_nonce'); ?>">点击领取10元优惠券</a>

改造完成后点击链接将无刷新完成优惠券应用，提示样式、页面更新逻辑与WooCommerce原生移除优惠券的交互效果完全一致。

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