WooCommerce已加购产品显示购物车数量及无需刷新页面修复问题

原代码仅在页面加载时渲染按钮文本，未适配WooCommerce AJAX加购的异步逻辑，所以才需要手动刷新生效，以下是完整可直接使用的修复后代码：

// 修改加入购物车按钮文本，同时适配列表页和详情页
add_filter( 'woocommerce_product_add_to_cart_text', 'wcpt_modify_add_to_cart_text', 9999, 2 );
add_filter( 'woocommerce_product_single_add_to_cart_text', 'wcpt_modify_add_to_cart_text', 9999, 2 );

function wcpt_modify_add_to_cart_text( $text, $product ) {
    // 购物车为空直接返回默认文本
    if ( WC()->cart->is_empty() ) return '加入报价单';

    // 遍历购物车匹配商品
    foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
        $product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );
        $qty = $cart_item['quantity'];
        // 匹配到对应商品返回带数量的文本
        if ( $product->get_id() == $product_id ) {
            return sprintf( '%d - 已添加', $qty );
        }
    }

    // 购物车非空但无当前商品返回默认文本
    return '加入报价单';
}

// AJAX加购后同步更新按钮文本，无需刷新页面
add_filter( 'woocommerce_add_to_cart_fragments', 'wcpt_update_cart_button_text_fragment', 9999 );
function wcpt_update_cart_button_text_fragment( $fragments ) {
    global $product;
    
    // 仅在商品相关页面生效，可根据需求调整生效范围
    if ( ! is_shop() && ! is_product_category() && ! is_product() ) {
        return $fragments;
    }
    
    // 生成更新后的按钮文本
    $new_text = wcpt_modify_add_to_cart_text( '', $product );
    // 选择器匹配所有加购按钮，若主题按钮类名特殊可自行调整此处
    $fragments['.single_add_to_cart_button, .add_to_cart_button[data-product_id="'.$product->get_id().'"]'] = '<button type="submit" class="single_add_to_cart_button button alt">' . $new_text . '</button>';
    
    return $fragments;
}

使用方法 #

将上述代码复制到当前使用的WordPress主题functions.php文件末尾，或者自定义功能插件的代码文件中即可。如果主题加购按钮的CSS类名和默认样式不一致，自行调整代码中选择器部分即可适配。

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