Слова на русском «Добавить в корзину» и «Распродажа» в некоторых шаблонах смотрятся слишком громоздко. Внешний вид Woocommerce изначально заточен под английский язык. Слова Sale, New или Add to cart занимают немного места на кнопках и ярлыках. Но для других языков есть простые решения. Можно, конечно, создать свой локальный файл перевода. Но это не совсем удобно, так как Woocommerce постоянно дорабатывается и после обновлений легко забыть синхронизировать шаблон с кастомным переводом. Поэтому лучше поменять название кнопок и ярлыков Woocommerce при помощи очень удобного конструктора ярлыков или вручную с помощью кода.
Данные функции можно применить и на мультиязычном сайте, так как мы создадим поле для перевода. Вставлять их надо в файл functions.php.
Изменим слово «Распродажа» на «Скидка» на бейдже в Woocommerce
Если мы снижаем цену на товар, то на карточке товара выводится стандартный ярлык (бейдж) со словом «Распродажа». Его можно сменить на любое удобное слово, например, «Акция» или «Скидка».
/*Смена названия Распродажа на Скидка*/
add_filter('woocommerce_sale_flash', 'vs_change_sale_content', 10, 3);
function vs_change_sale_content($content, $post, $product){
$content = '<span class="onsale">'.__( 'Скидка', 'woocommerce' ).'</span>';
return $content;
}
Процент вместо слова «Распродажа»
Эта функция заменит слово «Распродажа» на процент скидки. Процент рассчитается автоматически. Вы можете изменить слово Sale на любой другое слово или символ.
/**
* Меняем ярлык "Распродажа" на процент скидки
*/
add_filter( 'woocommerce_sale_flash', 'add_percentage_to_sale_badge', 20, 3 );
function add_percentage_to_sale_badge( $html, $post, $product ) {
if( $product->is_type('variable')){
$percentages = array();
// Get all variation prices
$prices = $product->get_variation_prices();
// Loop through variation prices
foreach( $prices['price'] as $key => $price ){
// Only on sale variations
if( $prices['regular_price'][$key] !== $price ){
// Calculate and set in the array the percentage for each variation on sale
$percentages[] = round(100 - ($prices['sale_price'][$key] / $prices['regular_price'][$key] * 100));
}
}
$percentage = max($percentages) . '%';
} else {
$regular_price = (float) $product->get_regular_price();
$sale_price = (float) $product->get_sale_price();
$percentage = round(100 - ($sale_price / $regular_price * 100)) . '%';
}
return '<span class="onsale">' . esc_html__( 'SALE', 'woocommerce' ) . ' ' . $percentage . '</span>';
}
Если используете сгруппированные товары, то воспользуйтесь этой функцией.
/**
* Меняем ярлык "Распродажа" на процент скидки в том числе и для сгруппированных товаров
*/
add_filter( 'woocommerce_sale_flash', 'add_percentage_to_sale_badge', 20, 3 );
function add_percentage_to_sale_badge( $html, $post, $product ) {
if( $product->is_type('variable')){
$percentages = array();
// Get all variation prices
$prices = $product->get_variation_prices();
// Loop through variation prices
foreach( $prices['price'] as $key => $price ){
// Only on sale variations
if( $prices['regular_price'][$key] !== $price ){
// Calculate and set in the array the percentage for each variation on sale
$percentages[] = round( 100 - ( floatval($prices['sale_price'][$key]) / floatval($prices['regular_price'][$key]) * 100 ) );
}
}
// We keep the highest value
$percentage = max($percentages) . '%';
} elseif( $product->is_type('grouped') ){
$percentages = array();
// Get all variation prices
$children_ids = $product->get_children();
// Loop through variation prices
foreach( $children_ids as $child_id ){
$child_product = wc_get_product($child_id);
$regular_price = (float) $child_product->get_regular_price();
$sale_price = (float) $child_product->get_sale_price();
if ( $sale_price != 0 || ! empty($sale_price) ) {
// Calculate and set in the array the percentage for each child on sale
$percentages[] = round(100 - ($sale_price / $regular_price * 100));
}
}
// We keep the highest value
$percentage = max($percentages) . '%';
} else {
$regular_price = (float) $product->get_regular_price();
$sale_price = (float) $product->get_sale_price();
if ( $sale_price != 0 || ! empty($sale_price) ) {
$percentage = round(100 - ($sale_price / $regular_price * 100)) . '%';
} else {
return $html;
}
}
return '<span class="onsale">' . esc_html__( 'SALE', 'woocommerce' ) . ' ' . $percentage . ' off</span>';
}
Как переименовать слово «Купон» в Woocommerce
Сумма скидки вместо «Распродажа»
С помощью этого кода замените стандартный текст ярлыка на сумму скидки.
/**
* Меняем ярлык "Распродажа" на сумму скидки.
*/
add_filter( 'woocommerce_sale_flash', 'add_custom_discount_amount_sale_badge', 20, 3 );
function add_custom_discount_amount_sale_badge( $html, $post, $product ) {
if( $product->is_type('variable')){
$amount_off = array();
$prices = $product->get_variation_prices();
foreach( $prices['price'] as $key => $price ){
if( $prices['regular_price'][$key] !== $price ){
$amount_off[] = $prices['regular_price'][$key] - $prices['sale_price'][$key];
}
}
$amount_off_s = "up to -$" . round(max($amount_off));
} else {
$regular_price = (float) $product->get_regular_price();
$sale_price = (float) $product->get_sale_price();
$amount_off_s = "-$" . ($regular_price - $sale_price);
}
return '<span class="onsale">' . esc_html__( 'SALE', 'woocommerce' ) . ' ' . $amount_off_s . '</span>';
}
Изображение вместо фона ярлыка «Распродажа»
Эта функция заменит стандартный бейдж (ярлык) Woocommerce на изображение. В строке $img укажите свой адрес картинки.
//Добавляем изображение вместо слова Распродажа,
add_filter( 'woocommerce_sale_flash', 'my_custom_sales_badge' );
function my_custom_sales_badge() {
$img = '<img src="https://site.com/images/blank-price.jpg">';
return $img;
}
Используйте CSS для очистки фона ярлыка.
span.onsale {
background: none;
box-shadow: none;
}
Стили для ярлыка
Также мы можем задать свой стиль ярлыкам Woocommerce. Например, сделаем анимированный значок. Он будет слегка пульсировать, тем самым привлекая внимание посетителей.
.woocommerce span.onsale {
line-height: 1.7;
width: 2.5rem;
min-width: 0;
height: 2.5rem;
min-height: 1.7em;
padding: 0;
transform: rotate(-20deg);
animation: beat 1s ease infinite alternate;
border-radius: 0;
background: orange;
}
.onsale:before, .onsale:after {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: inherit;
height: inherit;
content: '';
transform: rotate(30deg);
background: inherit;
}
.onsale:after {
transform: rotate(60deg);
}
@keyframes beat {
from {
transform: rotate(-20deg) scale(1);
}
to {
transform: rotate(-20deg) scale(1.1);
}
}
Удалить ярлык «Распродажа»
Если вы не хотите акцентировать внимание покупателей на скидках, то просто удалите ярлык. Скопируйте и вставьте следующий код в ваш файл function.php.
add_filter('woocommerce_sale_flash', 'woo_custom_hide_sales_flash');
function woo_custom_hide_sales_flash()
{
return false;
}
Изменим название кнопки «Добавить в корзину»
Чтобы сменить название кнопки на страницах одиночного товара, вставьте этот код в function.php:
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_single_add_to_cart_text' );
function woo_custom_single_add_to_cart_text() {
return __( 'My Button Text', 'woocommerce' );
}
Для смены названия кнопки на всех остальных страницах Woocommerce, примените этот код:
add_filter( 'woocommerce_product_add_to_cart_text', 'woo_custom_product_add_to_cart_text' );
function woo_custom_product_add_to_cart_text() {
return __( 'My Button Text', 'woocommerce' );
}
Или объединим обе функции в одну, если хотим сменить название кнопки Добавить в корзину на всех страницах. Вместо текста можно вставить иконку.
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' );
add_filter( 'woocommerce_product_add_to_cart_text', 'woo_custom_cart_button_text' );
function woo_custom_cart_button_text() {
return __( 'My Button Text', 'woocommerce' );
}
Способы добавления кнопки «Купить в один клик» в Woocommerce
Кастомный CSS для кнопки «Добавить в корзину»
Вы можете задать свой стиль кнопке «В корзину». Это CSS код анимированной кнопки.
.woocommerce ul.products li.product .button {
transition: background-color .5s linear, color .5s linear;
-webkit-animation: shadowFloat 1.2s linear alternate infinite;
animation: shadowFloat 1.2s linear alternate infinite;
color: #fff;
border: none;
border-radius: 50px;
background-color: #f00;
text-shadow: 0 1px 1px #a91813;
}
@keyframes shadowFloat {
0% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
box-shadow: 0 20px 40px #c7c7c7;
}
100% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
box-shadow: 0 10px 10px #bababa;
}
}
Как изменить поля на странице корзины
С помощью этой функции можно изменить слова: «Просмотр корзины», «Обновить корзину» и «Оформить заказ» на странице /cart/.
/* View Cart, Update Cart, Proceed to Checkout */
function text_strings( $translated_text, $text, $domain ) {
switch ( $translated_text ) {
case 'Просмотр корзины' :
$translated_text = __( 'Проверить корзину', 'woocommerce' );
break;
case 'Обновить корзину' :
$translated_text = __( 'Пересчитать товары в корзине', 'woocommerce' );
break;
case 'Оформить заказ' :
$translated_text = __( 'Перейти к оплате', 'woocommerce' );
break;
}
return $translated_text;
}
add_filter( 'gettext', 'text_strings', 20, 3 );
Очень подробно и полезно!
Полагаю что можно по аналогии изменить слово "Купон" на "Промокод" (не хватает знаний)
Как это сделать есть инфа?
Ден, если не изменяет память, в плагине «Booster for WooCommerce» есть функция переименования купона. Если нет, то посмотрите эту статью: Как переименовать слово купон в Woocommerce.
Спасибо! Ссылка помогла (что это я не увидел статью ранее...)
Осталось разобраться у себя в таблицах))
Пожалуйста, Ден! Вы статью не увидели, потому что ее подготовили к вашему вопросу.
Наталья, ты большая молодец. Статья очень полезная, особенно новичкам
Большое спасибо за добрые слова!
Привет! Вы еще в работе? Если кратко, перепробовали много чего, не могу избавится от ярлыка Распродажа. Переименовать получилось через корень сайта. А вот вообще его убрать не можем. Даже цвет не можем поменять. Если есть возможность помогите пожта.
Спасибо
Привет! Похоже что у вас стоит какой-то плагин предопределяющий настройки ярлыков, например, WOO Stickers by Webline или Advanced Dynamic Pricing for WooCommerce. Также посмотрите настройки темы, возможно есть функция включения/отключения ярлыков. Все хуки вносите в дочернюю тему.
Наталья, спасибо, а как разместить справа % скидки? который вместо слова «Распродажа»
Здравствуйте! Если правильно поняла вопрос: поменяйте местами вывод скидки и процента в функции, в двух следующих строчках, вот таким образом:
$savings = $price . sprintf( __('%s', 'woocommerce' ), '%'. $maximumper );$savings = $price . sprintf( __('%s', 'woocommerce' ), '%'. $percentage );
Подскажите код CSS для изменения цвета распродажи. Просто крик души ..Спасибо зарание!
А пример CSS из статьи не помог (абзац Стили для ярлыка «Распродажа»)? В Woocommerce стандартный class для текста ярлыка - .woocommerce span.onsale, а вот какой class задан у div в который обёрнут span.onsale, посмотрите в своей теме. Если стили не применяются, то попробуйте повысить приоритет с помощью !important.
В вашей теме
.woocommerce ul.products li.product .onsale {color: #ffffff;
background-color: #dd8500;
padding: 0 5px;
}