В архивах woocommerce выводит категории и товары в один список (если включить настройку выводить категории и товары). Но нам, например, необходимо категории оформить по другому. Для этого нужно отделить категории от товаров разделив список.

Разделение

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

Включаем такой хук:

// Отделяем категории от товаров
function tutsplus_product_subcategories( $args = array() ) {

$parentid = get_queried_object_id();

$args = array(
'parent' => $parentid
);

$terms = get_terms( 'product_cat', $args );

if ( $terms ) {

echo '<ul class="product-cats">';

foreach ( $terms as $term ) {

echo '<li class="category">';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
woocommerce_subcategory_thumbnail( $term );

echo '<h3>'.$term->name.'</h3>';
echo '</a>';
}

echo '</ul>';

}

}
add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 );

Функция создает новый список с категориями перед товарами. Стили можно позаимствовать/объединить с товарными, для этого ul нужно добавить класс products, а li product. Также можно задать для категорий отдельные стили и верстку.

Еще можно вывести количество товаров в каждой категории, добавить:

echo '<p class="count">'.$term->count.'</p>';

В шаблоне результатов поиска выводятся все родительские категории товаров, независимо от того какие товары мы ищем — это неправильно. Чтобы этого избежать добавим внутри функции проверку if ( !is_search() ) { }

Отдельные шаблоны

Бывает необходимо разделить вывод категорий и товаров в разные шаблоны.

Подкатегории в боковой панели (sidebar)

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

<?php $args = array(
    'post_type'      => 'product',
    'posts_per_page' => -1,
	'product_cat' => get_queried_object()->slug,
	'meta_query'   => array( 
		'relation' => 'AND',
		array(
			'key'  => '_stock',
			'value'   => 0,
			'compare' => '>'
		),
		array(
			'key'  => '_regular_price',
			'value'   => 0,
			'compare' => '>'
		),		
	),
	'fields' => 'ids'
);

$loop = query_posts( $args );

wp_reset_query();
	
foreach ($loop as $id) {
	$terms = get_the_terms( $id, 'product_cat' );
	$cur_terms[] = $terms[0]->term_id;
}
	
$cur_terms_uniq = array_unique($cur_terms);

if ($cur_terms_uniq): ?>  

<div id="podcat-list">
	<?php foreach ($cur_terms_uniq as $cur_term) : ?>
	<?php $term = get_term( $cur_term, 'product_cat' ); ?>
	<div class="podcat-line"><a href="<?php echo get_tag_link($term->term_id);?>">
		<?php woocommerce_subcategory_thumbnail( $term ); ?>	
		<p><?php echo $term->name; ?></p>
		</a></div>
	<?php endforeach; ?>
</div>

<?php endif; ?>

Стили:

/* Подкатегории */

#podcat-list {margin-bottom: 30px;}

.podcat-line a {display: flex; align-items: center; border: 1px solid #eee; border-radius: 3px; margin-bottom: 7px; color: #333; padding: 7px;}

.podcat-line a:hover {margin-left: -15px; margin-right: 15px;}

.podcat-line.podcat-parent a {margin-bottom: 15px;}

.podcat-line a img {width: 15%; margin-right: 5%;}

.podcat-line p {padding-left: 15px;}

.podcat-line i {color: #e7c68f; font-size: 0.8rem;}

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