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

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

20.10.2019

557

Как делать создание лэйблов налету средствами 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 можно использовать для дополнительной таксономии (например Производитель).

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

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

Upgrade WC

Очередная серия улучшений (upgrade) плагина WC. Буду добавлять по мере изучения новые решения. Поиск по SKU (артикулу) Из коробки WC не ищет по артикулам (SKU). Но достаточно установить плагин Search Читать далее »

/
Заявка на товар

Заявка на товар

Бывает так, что нам не нужно непосредственно продавать товар через сайт, а только лишь получить на него заявку. Данный механизм прост: нам нужно создать форму обратной связи в которую будет Читать далее »

/
Статусы заказов

Статусы заказов

Как и любой интернет-магазин Woocommerce присваивает заказам определенные статусы в зависимости от отплаты и формирования заказа. Существует 7 различных статусов заказа: В ожидании оплаты (Pending payment) Обработка (Processing) На удержании Читать далее »

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

Пока нет комментариев. Будь первым!

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