如何在WooCommerce 3自定义加入购物车按钮前添加Font Awesome图标

Hey there! I see you've already tweaked the out-of-stock add-to-cart button style with LoicTheAztec's help, and now you want to add a Font Awesome icon before the button text. Let's get this sorted smoothly.

First off, make sure Font Awesome is properly loaded on your site—if it's not, the icon won't show up. You can add it via your theme's functions.php, use an official Font Awesome plugin, or include the CDN link in your theme's header.

Next, we'll modify your existing code to insert the icon right before the button text. Below is the updated code with clear explanations of the changes:

// For Woocommerce version 3 and above only
add_filter( 'woocommerce_loop_add_to_cart_link', 'filter_loop_add_to_cart_link', 20, 3 );
function filter_loop_add_to_cart_link( $button, $product, $args = array() ) {
    if( $product->is_in_stock() ) return $button;
    
    // HERE set your button text (when product is not on stock)
    $button_text = __('Not available', 'woocommerce');
    
    // Add your Font Awesome icon here - adjust the class to match your desired icon
    $icon = '<i class="fa-solid fa-ban"></i> '; // The space after the icon keeps it separated from text
    $button_text = $icon . $button_text;
    
    // HERE set your button STYLING (when product is not on stock)
    $color = "#777"; // Button text color
    $background = "#aaa"; // Button background color
    
    // Changing and disabling the button when products are not in stock
    $style = 'color:'.$color.';background-color:'.$background.';cursor:not-allowed;';
    return sprintf( '<a class="button disabled" style="%s">%s</a>', $style, $button_text );
}

Quick Tips: #

• Icon Customization: I used fa-solid fa-ban (a ban icon) as an example, but you can swap this for any Font Awesome icon that fits your needs—like fa-solid fa-cart-slash for a more cart-specific visual. Just update the class in the $icon line.
• Version Compatibility: If you're using Font Awesome 4.x instead of 5+/6+, the class format is different (e.g., fa fa-ban instead of fa-solid fa-ban). Adjust the class to match your installed version.
• Spacing Control: The space after the icon tag ensures a clean gap between the icon and the "Not available" text—feel free to remove it if you prefer the icon right up against the text.

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