WooCommerce主题开发：实现弹窗购物车AJAX无刷新删除商品

要解决删除商品时页面刷新的问题，核心是阻止删除按钮的默认跳转，通过AJAX调用WooCommerce的删除接口，再复用你已有的购物车片段刷新逻辑。具体操作步骤如下：

1. 给删除按钮添加购物车项标识的Data属性 #

在cart-popup.php的删除链接代码中，新增data-cart-item-key属性，方便JS获取要删除的购物车项唯一标识：

echo apply_filters('woocommerce_cart_item_remove_link',
    sprintf('<a href="%s" class="cart__item-remove remove" aria-label="%s" data-product_id="%s" data-product_sku="%s" data-cart-item-key="%s">
        X
        </a>',
        esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
        esc_html__( 'Remove this item', 'woocommerce' ),
        esc_attr( $product_id ),
        esc_attr( $_product->get_sku() ),
        esc_attr( $cart_item_key ) // 新增：传递购物车项Key
    ),
    $cart_item_key
);

2. 编写AJAX删除的JavaScript代码 #

在你的主题JS文件中添加以下代码，监听删除按钮点击事件，实现无刷新删除：

jQuery(document).on('click', '.cart__item-remove', function(e) {
    // 阻止默认页面跳转行为
    e.preventDefault();
    
    const $btn = jQuery(this);
    const cartItemKey = $btn.data('cart-item-key');
    const removeUrl = $btn.attr('href');

    // 发送AJAX请求删除商品
    jQuery.ajax({
        url: removeUrl,
        type: 'POST',
        data: {
            'cart_item_key': cartItemKey,
            'action': 'woocommerce_remove_cart_item'
        },
        beforeSend: function() {
            // 可选：添加加载状态，比如按钮置灰
            $btn.addClass('btn-loading').text('...');
        },
        success: function() {
            // 触发WooCommerce内置的购物车片段刷新，复用你已有的更新逻辑
            jQuery(document.body).trigger('wc_fragment_refresh');
        },
        complete: function() {
            // 恢复按钮状态
            $btn.removeClass('btn-loading').text('X');
        },
        error: function() {
            // 可选：错误提示
            alert('删除失败，请稍后重试');
        }
    });
});

3. 确认现有PHP逻辑无需修改 #

你已实现的cart_popup_fragment函数会在购物车任何变更（包括删除）时被WooCommerce自动调用，负责更新.cart__table的内容，这部分逻辑完全适配新的AJAX删除流程，不需要额外修改。

额外注意事项 #

• 确保JS代码在jQuery加载完成后执行，可包裹在jQuery(document).ready(function(){ ... })中
• 可根据主题样式自定义加载状态、空购物车提示等UI细节
• 测试时检查AJAX请求的URL是否正确，避免出现跨域或路径错误

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