Добавить шрифт потрясающий значок на кнопку добавить в корзину в Woocommerce 3 - PullRequest
Новая
       17

Добавить шрифт потрясающий значок на кнопку добавить в корзину в Woocommerce 3

0 голосов
/ 09 мая 2018

Я изменил стиль своего Add to Cart с помощью 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 );
}

Ответы [ 2 ]

0 голосов
/ 23 января 2019

решаемые

Добавить шрифт потрясающий значок в пользовательскую кнопку добавить в корзину в 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>');
}
0 голосов
/ 10 мая 2018

Во-первых, если в Wordpress для вашей темы не включены иконки для шрифтов, вам может понадобиться добавить плагин Better Font Awesome .

Вы можете выбрать любой код иконки в этой fontawesome.com галерее иконок

Теперь, сделав небольшое изменение в своем коде, вы сможете добавить желаемый значок и размер: 

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 вашей активной дочерней темы (или активной темы). Протестировано и работает.

Вы получите что-то вроде:

enter image description here

Шрифт. Возможные размеры:

  • наименьшее: fa-xs
  • меньше: fa-sm
  • больше: fa-lg
  • наибольший (мультипликатор) : fa-2x, fa-3x… до fa-10x
...