Вывод характеристик в каталоге Woocommerce

В этой статье рассмотрим варианты вывода отдельных характеристик товаров на страницах списков, категорий, тегов. В карточке товара будет выводиться блок с атрибутами товаров, если хотя бы один из атрибутов у товара указан. Также в блоке с атрибутами будет показываться кнопка ПОДРОБНЕЕ.

Приведенные ниже коды размещаются в файле function.php активной темы. В кодах используется хук для вывода блока с атрибутами woocommerce_before_shop_loop_item, он влияет на порядок блока в коде. Ознакомиться со списком хуков можно здесь. Несмотря на расположение хуков сверху вниз, из-за стилей и скриптов темы визуально «верхние хуки» могут находится внизу карточки товара и наоборот.

Рассмотрим несколько вариантов вывода характеристик:

• для всех товаров
• для товаров из указанной категории
• для простых товаров
• для вариативных товаров

для всех товаров

add_action( 'woocommerce_before_shop_loop_item', 'show_attributes', 20 );
function show_attributes(){
global $product;
$color = $product->get_attribute( 'pa_color' );
$dlina = $product->get_attribute( 'pa_dlina' );
if ( $color || $dlina ) {
echo '<div class="product-attributes">';
if ( $color ) {
echo '<span class="product-label"><strong>Цвет: </strong><br>' . $color . '</span><br>';
}
if ( $dlina ) {
echo '<span class="product-label"><strong>Длина: </strong><br>' . $dlina . '</span><br>';
}
echo '<span class="button-more"><a id="links" href="'. get_the_permalink() .'" >ПОДРОБНЕЕ</a></span></div>';
}
}

Ярлык для характеристики (атрибута) берем из списка атрибутов (Товары / Атрибуты)

для товаров из указанной категории

add_action( 'woocommerce_before_shop_loop_item', 'show_attributes', 20 );
function show_attributes(){
global $product;
$color = $product->get_attribute( 'pa_color' );
$dlina = $product->get_attribute( 'pa_dlina' );
if ( $color || $dlina ) {
echo '<div class="product-attributes">';
if( has_term( 'ярлык категории', 'product_cat' ) ) {
if ( $color ) {
echo '<span class="product-label"><strong>Цвет: </strong><br>' . $color . '</span><br>';
}
if ( $dlina ) {
echo '<span class="product-label"><strong>Длина: </strong><br>' . $dlina . '</span><br>';
}
}
echo '<span class="button-more"><a id="links" href="'. get_the_permalink() .'" >ПОДРОБНЕЕ</a></span></div>';
}
}

Ярлык категории – берем со страницы редактирования категории (Товары / Категории)

для простых товаров

add_action( 'woocommerce_before_shop_loop_item', 'show_attributes', 20 );
function show_attributes(){
global $product;
$color = $product->get_attribute( 'pa_color' );
$dlina = $product->get_attribute( 'pa_dlina' );
if ( $color || $dlina ) {
echo '<div class="product-attributes">';
if( $product->is_type( 'simple' ) ) {
if ( $color ) {
echo '<span class="product-label"><strong>Цвет: </strong><br>' . $color . '</span><br>';
}
if ( $dlina ) {
echo '<span class="product-label"><strong>Длина: </strong><br>' . $dlina . '</span><br>';
}
}
echo '<span class="button-more"><a id="links" href="'. get_the_permalink() .'" >ПОДРОБНЕЕ</a></span></div>';
}
}

для вариативных товаров

add_action( 'woocommerce_before_shop_loop_item', 'show_attributes', 20 );
function show_attributes(){
global $product;
$color = $product->get_attribute( 'pa_color' );
$dlina = $product->get_attribute( 'pa_dlina' );
if ( $color || $dlina ) {
echo '<div class="product-attributes">';
if( $product->is_type( 'variable' ) ) {
if ( $color ) {
echo '<span class="product-label"><strong>Цвет: </strong><br>' . $color . '</span><br>';
}
if ( $dlina ) {
echo '<span class="product-label"><strong>Длина: </strong><br>' . $dlina . '</span><br>';
}
}
echo '<span class="button-more"><a id="links" href="'. get_the_permalink() .'" >ПОДРОБНЕЕ</a></span></div>';
}
}