WordPress 6.2.2：无法在加入购物车按钮中显示FontAwesome图标

算力阿峰

2026-7-18

解决WooCommerce加入购物车按钮FontAwesome图标被转义的问题

问题根源在于woocommerce_product_single_add_to_cart_text过滤器返回的文本会被WooCommerce自动转义HTML标签，导致图标代码被转换成实体字符无法正常渲染。以下是两种可行的解决方法：

方法一：直接修改按钮HTML（推荐）

使用woocommerce_add_to_cart_button_html过滤器直接修改按钮的完整HTML内容，绕过自动转义机制：

add_filter( 'woocommerce_add_to_cart_button_html', 'custom_add_to_cart_button_with_icon' );
function custom_add_to_cart_button_with_icon( $button_html ) {
    // 替换默认按钮文本，插入FontAwesome图标
    $icon_text = '<i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to Cart';
    $button_html = str_replace( esc_html__( 'Add to Cart', 'woocommerce' ), $icon_text, $button_html );
    return $button_html;
}

方法二：自定义渲染加入购物车按钮

移除默认的按钮渲染动作，手动输出包含图标的按钮代码：

remove_action( 'woocommerce_single_product_add_to_cart_button', 'woocommerce_single_product_add_to_cart_button', 30 );
add_action( 'woocommerce_single_product_add_to_cart_button', 'custom_single_add_to_cart_button_with_icon', 30 );
function custom_single_add_to_cart_button_with_icon() {
    global $product;

    if ( ! $product->is_purchasable() ) {
        return;
    }

    // 输出自定义按钮HTML
    echo '<button type="submit" name="add-to-cart" value="' . esc_attr( $product->get_id() ) . '" class="single_add_to_cart_button button alt">';
    echo '<i class="fa fa-shopping-cart" aria-hidden="true"></i> ' . esc_html__( 'Add to Cart', 'woocommerce' );
    echo '</button>';
}