Слова на русском «Добавить в корзину» и «Распродажа» в некоторых шаблонах смотрятся слишком громоздко. Внешний вид 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;
    }

}
CSS для кнопки «Добавить в корзину»

Как изменить поля на странице корзины

С помощью этой функции можно изменить слова: «Просмотр корзины», «Обновить корзину» и «Оформить заказ» на странице /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 );
EmailWhatsAppВКонтактеPinterest

Комментарии

21 Комментарий

  1. Спасибо! Я оставлю плагин который мне помог, он очень прост в использование "SiteOrigin CSS" у кого аналогичная ситуация.

    Ответить

    1. Я бы рекомендовала вместо плагинов использовать файл стилей дочерней темы.

      Ответить

  2. Попробовал изменить распродажу на %% не вышло.

    Ответить

    1. Максим, изменила в статье функцию для новой версии Woocommerce. Проверьте и напишите результат.

      Ответить

      1. Наталья, попробовал, без изменений.
        Добавляю в function.php child темы.

        Ответить

        1. Функция будет работать и для дочерней темы. Напишите название родительской темы, проверю. И может у вас ещё не обновился кэш этой статьи, попробуйте сбросить?

          Ответить

          1. Кэш обновился. Тема коммерческая - Catch Responsive Pro. Но есть у них аналогичная бесплатная. Отличается только расширенными настройками.

          2. Установила тему, разместила код в дочернем functions.php - всё работает. Подумала, может у вас сгруппированные товары есть, в статью добавила второй код (для сгруппированных), попробуйте его.

  3. Ответить
Оставьте комментарий

Комментарии, считающиеся спамом или исключительно рекламные по своему содержанию, будут удалены. Допускается включение ссылки на соответствующий контент, но текст должен иметь отношение к теме поста. Также будут удалены анонимные, оскорбительные, содержащие ненормативную лексику, вводящие в заблуждение или клеветнические комментарии.

Для публикации кода в комментариях используйте следующие шорткоды -
[php]ваш код[/php] - для PHP, [css]ваш код[/css] - для CSS, [code lang="js"]ваш код[/code] - для HTML или JS, указав соответствующий lang.

Ваш адрес email не будет опубликован. Обязательные поля помечены *