Главная / Блог / Как изменить текст кнопки «Добавить в корзину» в WooCommerce

Как изменить текст кнопки «Добавить в корзину» в WooCommerce

Часто требования дизайна заставляют кастомизировать динамические элементы, к счастью в случае с WooCommerce предусмотрены удобные фильтры. Чтобы изменить текст кнопки «Добавить в корзину» необходимо добавить следующие строки в файл functions.php вашей темы:

add_filter('woocommerce_product_add_to_cart_text', 'woo_custom_cart_button_text');
  
	function woo_custom_cart_button_text() {
		return "Текст кнопки";
	}

Как сделать кнопку «добавить в корзину» иконкой

Если вы захотите, например использовать иконку FontAwesome, просто вставить нужную иконку в функцию в таком виде:

add_filter('woocommerce_product_add_to_cart_text', 'woo_custom_cart_button_text');
  
	function woo_custom_cart_button_text() {
		return "<i class="fas fa-shopping-basket"></i>";
	}

у вас ничего не получится, скрипт выдаст её обычным текстом. Чтобы добавить в кнопку иконку FontAwesome необходимо:

1. Подключить FontAwesome к вашей теме

Для этого достаточно добавить эту строку в тег <head> вашей темы:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Или подключить в CSS-файл вашей темы:

@import url('https://use.fontawesome.com/releases/v5.7.2/css/all.css');

2. Отредактировать functions.php

Также как и в первом примере, мы используем такую же функцию но с пустым значением:

add_filter('woocommerce_product_add_to_cart_text', 'woo_custom_cart_button_text');
  
	function woo_custom_cart_button_text() {
		return "";
	}

3. Добавить стиль в css-файл темы

Добавляем в css-файл темы такой стиль, где у параметра content указывает код необходимой иконки FontAwesome. Код нужного символа можно узнать на официальном сайте: https://fontawesome.com/icons/

.add_to_cart_button::before {
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     content: "\f291";
     margin-right: .2em;
  }