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

Question

我在LoicTheAztec的帮助下改变了我的添加到购物车的风格，

但是如何使用以下代码在按钮文本前添加字体真棒图标

chosen

Answer 1

  

首先，如果Wordpress中没有为您的主题启用字体真棒图标，则可能需要添加Better Font Awesome插件。

您可以在此fontawesome.com gallery of icons

中选择任何图标代码

现在对代码进行非常小的更改，您将能够添加所需的图标和大小：

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

代码进入活动子主题（或活动主题）的function.php文件。经过测试并正常工作。

你会得到类似的东西：

  

字体很棒的可能尺寸值：

     

  
• 最小： fa-xs
  
• 较小： fa-sm
  
• 更大： fa-lg
  
• 最大（乘数）： fa-2x ， fa-3x ... fa-10x
  

Answer 2

已解决

在Woocommerce 3中将字体真棒图标添加到自定义添加到购物车按钮 复制以下代码并将其粘贴到您的主题函数中。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>');
}