实现WooCommerce单品购物车状态变化时按钮文本动态更新

步骤1：优化后端初始状态判断 #

保留你原有的PHP过滤器逻辑，同时改用WooCommerce内置方法优化购物车商品检查效率，确保页面加载时能正确显示初始按钮文本：

add_filter( 'woocommerce_product_single_add_to_cart_text', 'already_in_cart_single_add_to_cart_text', 10, 2 );
function already_in_cart_single_add_to_cart_text( $add_to_cart_text, $product ) {
    // 直接调用内置方法检查商品是否在购物车，替代循环遍历
    $cart_item_key = WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product->get_id() ) );
    
    if ( $cart_item_key ) {
        return __('Product already in Cart. Add again?', 'woocommerce');
    } 
    return $add_to_cart_text;
}

步骤2：添加前端JS实现无刷新更新 #

利用WooCommerce自带的购物车操作自定义事件，监听商品添加/移除动作，实时修改按钮文本。

第一步：注册并加载脚本（添加到主题functions.php）

add_action( 'wp_enqueue_scripts', 'enqueue_cart_update_script' );
function enqueue_cart_update_script() {
    // 仅在单品页加载脚本
    if ( is_product() ) {
        wp_enqueue_script(
            'cart-button-update',
            get_stylesheet_directory_uri() . '/js/cart-button-update.js', // 替换为你的JS文件实际路径
            array( 'jquery', 'wc-add-to-cart' ), // 依赖jQuery与WooCommerce核心脚本
            wp_get_theme()->get('Version'),
            true
        );
        
        // 将商品ID与按钮文本传递给前端JS
        wp_localize_script( 'cart-button-update', 'cartButtonData', array(
            'productId' => get_the_ID(),
            'inCartText' => __('Product already in Cart. Add again?', 'woocommerce'),
            'defaultText' => __('Add to cart', 'woocommerce') // 替换为你的默认按钮文本
        ));
    }
}

第二步：编写JS逻辑（创建cart-button-update.js文件）

jQuery(document).ready(function($) {
    const addToCartBtn = $('.single_add_to_cart_button');
    
    // 监听商品添加到购物车事件
    $(document).on('added_to_cart', function(event, fragments, cart_hash, button) {
        if (button.data('product_id') == cartButtonData.productId) {
            addToCartBtn.text(cartButtonData.inCartText);
        }
    });
    
    // 监听商品从购物车移除事件
    $(document).on('removed_from_cart', function(event, fragments, cart_hash, removed_product_id) {
        if (removed_product_id == cartButtonData.productId) {
            addToCartBtn.text(cartButtonData.defaultText);
        }
    });
});

说明 #

• 后端代码负责页面初始化时的文本判断，同时通过wp_localize_script传递动态数据，避免前端硬编码。
• 前端直接监听WooCommerce原生事件，无需额外AJAX请求，实现无刷新实时更新按钮文本。
• 若不想单独创建JS文件，可将JS代码通过wp_add_inline_script直接嵌入页面。

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