在Woocommerce 3中将字体真棒图标添加到自定义添加到购物车按钮 [英] Add font awesome icon to custom add to cart button in Woocommerce 3

问题描述

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

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

推荐答案

首先，如果未在主题主题的Wordpress中启用字体真棒图标，则可能需要添加您可以在 fontawesome.com图标库中选择任何图标代码

现在对代码进行很小的更改，您就可以添加所需的图标和大小:

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

代码进入您的活动子主题(或活动主题)的function.php文件中.经过测试并可以正常工作.

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

您将得到类似的东西:

字体超大可能的尺寸值:

Font awesome possible sizes values:

• 最小: fa-xs
• 较小: fa-sm
• 更大: fa-lg
• 最大的(乘数): fa-2x ， fa-3x …到 fa-10x

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

这篇关于在Woocommerce 3中将字体真棒图标添加到自定义添加到购物车按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！