Меняем стили и название ярлыка «Распродажа», кнопки «Добавить в корзину» и полей страницы корзины

Меняем стили и название ярлыка «Распродажа», кнопки «Добавить в корзину» и полей страницы корзины

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

Процент вместо слова «Распродажа».

Эта функция заменит слово «Распродажа» на процент скидки. Процент рассчитается автоматически. Вы можете сменить знак минус на любой другой знак или слово.

//Меняем распродажа на процент скидки
add_filter('woocommerce_sale_flash', 'theme_woo_savings_on_sales_flash');

function theme_woo_savings_on_sales_flash() {
	global $post, $product;
   $sale_flash = '';
	
	if ($product->is_on_sale() && $product->product_type == 'variable') {
		$available_variations = $product->get_available_variations();								
		$maximumper = 0;
		
	  	for ($i = 0; $i < count($available_variations); ++$i) {
			$variation_id=$available_variations[$i]['variation_id'];
			$variable_product1= new WC_Product_Variation( $variation_id );
			$regular_price = $variable_product1 ->regular_price;
			$sales_price = $variable_product1 ->sale_price;
			$percentage= round((( ( $regular_price - $sales_price ) / $regular_price ) * 100),1) ;
			
		  	if ($percentage > $maximumper) {
				$maximumper = $percentage;
			}
		}
	  
		$savings = $price . sprintf( __('%s', 'woocommerce' ), $maximumper . '%' );
	} else if ($product->is_on_sale() && $product->product_type == 'simple') {
		$percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
		$savings = $price . sprintf( __('%s', 'woocommerce' ), $percentage . '%' );
	}
  
  	if ($product->is_on_sale()) {
  		$sale_flash = '<span class="onsale">-' . $savings . '</span>';
	}
  
  	return $sale_flash;
}

Изображение вместо фона ярлыка «Распродажа» .

Эта функция заменит стандартный бейдж (ярлык) 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' );
}

Кастомный 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 );
СтраUz
Читайте также
Привет! Я Натали Мамбетова.

Занимаюсь разработкой сайтов, блогов, интернет-магазинов, лендингов на WordPress. Оказываю платные помощь и консультации. Являюсь сертифицированным партнером TemplateMonster по CMS системе WordPress, имею сертификат этой компании подтверждающий мои навыки в работе с данной системой.

Добавить комментарий

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

© СтраUz 2018. Все права защищены. Копирование разрешено только с указанием гиперссылки на источник.
Сделано с ❤
Заказать сайт