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

【问题标题】：Add font awesome icon to custom add to cart button in Woocommerce 3将字体真棒图标添加到 Woocommerce 3 中的自定义添加到购物车按钮
【发布时间】：2018-10-20 01:19:54
【问题描述】：

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

但是如何使用以下代码在按钮文本前面添加一个很棒的字体图标

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

【问题讨论】：

标签： php wordpress button woocommerce font-awesome

【解决方案1】：

已解决

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

【讨论】：

它正在添加图标，但并未删除现有的添加到购物车按钮。有什么想法，为什么？
分享我的网址，我会帮助你，也许版本问题woocomerce

【解决方案2】：

首先，如果您的主题没有在 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

【讨论】：