/ Wordpress / Лэйблы используя PHP

Лэйблы используя PHP

HIT

20.10.2019

1587

2

Как делать создание лэйблов налету средствами jQuery используя post_class описано здесь. В данной статье сделаем вывод подобных лэйблов средствами WordPress (PHP). Данный способ даст более гибкий и универсальный подход к данному функционалу.

Вывод лэйблов

Выводим блок лэйблов, только у тех записей у которых назначены метки. Можно использовать как в категории, так и в шаблоне записи.

<?php if( has_tag() ) { 
echo '<div class="labels">';
$posttags = get_the_tags();
foreach( $posttags as $tag ){
	echo '<div class="label-'.$tag->slug.'">'.$tag->name.'</div>';
}
echo '</div>';
} ?>

Стили:

.labels {
    top: 15px;
    left: 15px;
    position: absolute;
    z-index: 9;
    font-size: 0.8rem;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.labels > div {
    position: relative;
    background: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
    padding: 5px 15px;
}	

Для каждой метки можно настроить индивидуальные стили.

Лэйблы у товаров

Создадим единую функцию для категории и для карточки товара:

// Вывод лэйблов
function insert_labels_product() {
	global $product;
	$producttags = wp_get_object_terms($product->get_ID(), 'product_tag');
	if (!empty($producttags) || $product->is_on_sale() == 1 || $product->is_featured() == 1 ) {
		echo '<div class="labels">';
			if ( $product->is_on_sale() ) { echo '<div class="onsale">Акция!</div>'; }
			if ( $product->is_featured() ) { echo '<div class="onhit">Хит</div>'; }
			foreach( $producttags as $tag ){
				echo '<div class="label-'.$tag->slug.'">'.$tag->name.'</div>';
			}
		echo '</div>';
	}
}

add_action( 'woocommerce_before_shop_loop_item_title', 'insert_labels_product', 10 );
add_action( 'woocommerce_before_single_product_summary', 'insert_labels_product', 10 );

Эта функция включает вывод автоматических меток Распродажа! (on_sale, товар с акционной ценой) и Рекомендуемый (featured). Поэтому стандартный вывод лэйбла Распродажа! отключим в шаблонах:

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

Стили для лэйблов у товаров:

.labels {
    top: 5px;
    left: 0;
    position: absolute;
    z-index: 9;
    font-size: 0.8rem;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.labels > div {
    position: relative;
    background: #5f498b;
    color: #fff;
	box-shadow: 2px 2px 4px rgba(17, 17, 17, 0.5);
    border-radius: 3px 3px 3px 0px;
    width: 75px;
	margin: 5px 50% 5px -10px;
    line-height: 20px;
	font-weight: 600;
	padding: 2px 5px 1px 10px;
}

.labels > div:before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0px;
    border: 10px solid transparent;
    border-bottom: 0;
    border-right: 0;
	border-top-color: #412f65;
}

.labels > div.label-onsale {background: yellow; color: #000;}
.labels > div.label-onsale:before {border-top-color: rgb(221,168,0);}

.labels > div.label-new {background-color: limegreen;}
.labels > div.label-new:before {border-top-color: rgb(41, 119, 9);}

.labels > div.label-onhit {background-color: #F72F2F;}
.labels > div.label-onhit:before {border-top-color: rgb(178, 20, 0);}


@media screen and (max-device-width:480px) { .labels > div {width: 60px; line-height: 14px; margin-bottom: 0;} }
@media screen and (max-device-width:375px) { .labels > div {width: 75px; line-height: 20px; margin-bottom: 5px;} }
Как идея: product_tag можно использовать для дополнительной таксономии (например Производитель).

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Metabox woocommerce

Metabox woocommerce

У плагина woocommerce есть набор дополнительных полей при редактировании товара. При необходимости можно в группы полей WC добавить свои произвольные metabox. Должно получится так: Создание и отображение metabox Первый экшн Читать далее »

/
Колесо удачи для интернет-магазина

Колесо удачи для интернет-магазина

Добавим на интернет-магазин возможность посетителям проверить свою удачу посредством колеса удачи. Колесо представляет собой барабан с секторами с разными вариантами скидок, либо отсутствия их. Lucky Wheel for WooCommerce – Spin Читать далее »

Дополнительные статусы заказа

Дополнительные статусы заказа

Создадим дополнительные пользовательские статусы заказа. Custom Order Status for WooCommerce (10 000) Плагин от Tyche Softwares. Есть бесплатная и Pro версии. Стоимость Pro-версии: Один магазин – $39.00 5 магазинов – $99.00 Безлимит – $149.00 В бесплатной Читать далее »

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

2 комментария

  1. Юлия

    Мега полезный сайт. Потрясающе красивые стикеры для товаров! Но у меня не получается два момента: 1. на витрине магазина с товара не удаляется стандартный лэйбл «распродажа», на странице товара удалился. 2. Когда я вставляю код css, указанный в статье, оба лейбла Акция и Хит окрашиваются в фиолетовый цвет (#5f498b) с цветом текста color: #fff. Ошибку самостоятельно мне найти не удалось((( 

    1. Alexandr

      1. Вы прописали отключение функций вывода «Распродажа!»?:

      remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
      remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

      Они не должны выводится.

      2. Вы же сами добавляете стили, подкорректируйте их. Те стили которые представлены в примере, это конкретный частный случай под определенный шаблон.

Лэйблы используя PHP
Построение записей сайта
Рекомендации для васПостроение записей сайтаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.