WooCommerce购物车删除商品确认提示功能异常求助

问题原因分析 #

1. 动态元素绑定失效：原代码仅给页面初始加载的.remove按钮绑定了点击事件，但WooCommerce删除商品后会通过AJAX重新渲染购物车区域，新生成的删除按钮未绑定事件，导致后续操作无提示。
2. 默认行为未彻底拦截：仅使用event.preventDefault()无法完全终止WooCommerce的默认删除逻辑，导致无论点击确认还是取消，商品都会被删除。

修复代码 #

替换原JS代码为以下内容：

jQuery(function($) {
    // 用事件委托绑定，兼容动态生成的删除按钮
    $(document.body).on('click', '.remove', function(event) {
        // 立即阻止默认删除行为与事件冒泡
        event.preventDefault();
        event.stopPropagation();
        
        if (confirm('Are you sure you want to remove product?')) {
            // 用户确认后，手动触发删除链接跳转
            window.location.href = $(this).attr('href');
        }
        // 取消则不执行任何操作
    });
});

代码说明 #

• 事件委托：通过$(document.body).on('click', '.remove', ...)将事件绑定到父元素，确保购物车更新后新生成的删除按钮也能触发提示框。
• 彻底拦截默认行为：先调用event.preventDefault()和event.stopPropagation()，直接终止WooCommerce的默认删除流程。
• 手动触发删除：用户确认后，通过跳转删除链接的方式执行删除操作；取消则直接终止流程。

代码添加方式 #

推荐两种可靠的添加途径：

• 主题自定义JS面板：进入WordPress后台→外观→自定义，找到「自定义JS」或「额外代码」区域，粘贴上述JS代码。
• 主题functions.php添加：在当前主题的functions.php文件末尾添加以下代码（仅在购物车页面加载脚本，优化性能）：

add_action('wp_footer', 'cart_remove_confirm_script');
function cart_remove_confirm_script() {
    if (is_cart()) {
    ?>
    <script>
    jQuery(function($) {
        $(document.body).on('click', '.remove', function(event) {
            event.preventDefault();
            event.stopPropagation();
            
            if (confirm('Are you sure you want to remove product?')) {
                window.location.href = $(this).attr('href');
            }
        });
    });
    </script>
    <?php
    }
}

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