将字体真棒图标添加到 Woocommerce 3 中的自定义添加到购物车按钮

Question

I changed the style of my Add To Cart with the help of LoicTheAztec,

but how to add a font awesome icon in front of button text using the followin code

// 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');

// HERE set your button STYLING (when product is not on stock)
$color = "#777";      // Button text color
$background = "#aaa"; // Button background color


// Changing and disbling 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 );
}

Answer 1

First, if font awesome icons are not enabled in Wordpress for your theme, you might need to add Better Font Awesome plugin.

You can select any Icon code in this fontawesome.com gallery of icons

Now making a very small change to your code you will be able to add your desired Icon and size:

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');

    // HERE set your button STYLING (when product is not on stock)
    $color = "#555";      // Button text color
    $background = "#aaa"; // Button background color

    // HERE set your fontawesome icon code and size
    $icon = 'fa-ban';
    $size = 'fa-lg'; // large - To disable size use an empty value like $size = '';

    // Changing and disbling 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"><i class="fa %s %s"></i> %s</a>', $style, $icon, $size, $button_text );
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

You will get something like:

Font awesome possible sizes values:

• smallest: fa-xs
• smaller: fa-sm
• larger: fa-lg
• largest (multiplicator) : fa-2x , fa-3x … to fa-10x

Answer 2

SOLVED

Add font awesome icon to custom add to cart button in Woocommerce 3 Copy Below Code and paste it to your theme functions.php

/*STEP 1 - REMOVE ADD TO CART BUTTON ON PRODUCT ARCHIVE (SHOP) */

function remove_loop_button(){
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
}
add_action('init','remove_loop_button');

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action('woocommerce_after_shop_loop_item','replace_add_to_cart');
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode('<a href="'.$link.'" class="button addtocartbutton"><i class="fa fa-shopping-bag"></i></a>');
}