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