WooCommerce加入购物车按钮文本添加CSS类的正确方法是什么？

失效原因说明 #

你之前的写法无法生效是因为 woocommerce_product_single_add_to_cart_text 和 woocommerce_product_add_to_cart_text 两个过滤器的返回值默认会被WooCommerce做HTML转义，直接插入HTML标签会被解析为纯文本显示，直接输出echo还会打乱按钮原生的DOM结构，导致样式错位。

最规范的实现方案是给已加入购物车的按钮额外添加独立CSS类，配合你原有的文本修改逻辑，通过外部CSS控制样式，不需要往按钮文本中插入HTML标签。

完整实现代码 #

1. 保留原有文本修改逻辑（无需调整） #

// 商品详情页加购按钮文本修改
add_filter( 'woocommerce_product_single_add_to_cart_text', 'ts_product_add_cart_button' );
function ts_product_add_cart_button( $label ) {
    foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
        $product = $values['data'];
        if( get_the_ID() == $product->get_id() ) {
            $label = __('Already added to Cart', 'woocommerce');
        }
    }
    return $label;
}

// 商店列表页加购按钮文本修改
add_filter( 'woocommerce_product_add_to_cart_text', 'ts_shop_add_cart_button', 99, 2 );
function ts_shop_add_cart_button( $label, $product ) {
    if ( $product->get_type() == 'simple' && $product->is_purchasable() && $product->is_in_stock() ) {
        foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
            $_product = $values['data'];
            if( get_the_ID() == $_product->get_id() ) {
                $label = __('Already added to Cart', 'woocommerce');
            }
        }    
    }
    return $label;    
}

2. 新增按钮自定义CSS类注入逻辑 #

// 商品详情页加购按钮添加自定义类
add_filter( 'woocommerce_product_single_add_to_cart_args', 'ts_add_custom_cart_button_class', 10, 2 );
function ts_add_custom_cart_button_class( $args, $product ) {
    foreach( WC()->cart->get_cart() as $cart_item ) {
        if( $product->get_id() == $cart_item['data']->get_id() ) {
            // 给已加购的按钮添加自定义类 added-to-cart-btn
            $args['class'] .= ' added-to-cart-btn';
            break;
        }
    }
    return $args;
}

// 商店列表页加购按钮添加自定义类
add_filter( 'woocommerce_product_add_to_cart_args', 'ts_add_shop_custom_cart_button_class', 10, 2 );
function ts_add_shop_custom_cart_button_class( $args, $product ) {
    if ( $product->get_type() == 'simple' && $product->is_purchasable() && $product->is_in_stock() ) {
        foreach( WC()->cart->get_cart() as $cart_item ) {
            if( $product->get_id() == $cart_item['data']->get_id() ) {
                $args['class'] .= ' added-to-cart-btn';
                break;
            }
        }
    }
    return $args;
}

3. 添加自定义CSS样式 #

将以下样式添加到WordPress后台「外观」→「自定义」→「额外CSS」中即可，可根据需求调整样式规则：

/* 已加入购物车按钮样式 */
.woocommerce .added-to-cart-btn {
    background: yellow;
    /* 可自行添加其他样式：字体颜色、边框、圆角等 */
    color: #000;
}

如果确实需要在按钮文本中嵌套HTML标签，可以使用woocommerce_loop_add_to_cart_link（列表页）和对应详情页按钮输出过滤器直接改写整个按钮的HTML结构，但是上述加自定义类的方案兼容性更高，不会破坏WooCommerce原生的按钮功能和结构。

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