Реализация виджета текущих подкатегорий и если есть родительская категория выводить и ее с отдельным стилем. Неплохое решение для навигации: в этом случае целесообразно в основном блоке выводить все записи категории (с записями из подкатегорий), а не сами подкатегории.

Подкатегории товаров woocommerce

Данный код вставляем в сайтбар. Если есть дочерние категории — будет их выводить (проверка). Если есть родительская категория — выведет и её (проверка).

<?php
$term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) );
$parthermid = wp_get_term_taxonomy_parent_id( $term->term_id, $taxonomy );
$partherm = get_term( $parthermid, $taxonomy );
?>

<?php if (term_is_ancestor_of($partherm, $term->term_id, $taxonomy) == true): ?>
<div id="podcat-list">

<a href="<?php echo get_tag_link($partherm->term_id); ?>">
<div class="podcat-line podcat-parent">

<div class="cat-image-min"><?php woocommerce_subcategory_thumbnail( $partherm ); ?></div>
<h2 class="podcat-line-title"><?php echo $partherm->name ?></h2>

</div>
</a>

</div>
<?php endif; ?>

 

<?php
$term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) );

$childterms = get_terms( array(
'taxonomy' => 'product_cat',
'parent' => $term->term_id,
'hide_empty' => false // Показывать пустые подкатегории
) );
?>
<?php if ($childterms): ?>

<div id="podcat-list">
<?php foreach ($childterms as $childterm) : ?>

<a href="<?php echo get_tag_link($childterm->term_id);?>">
<div class="podcat-line">

<div class="cat-image-min"><?php woocommerce_subcategory_thumbnail( $childterm ); ?></div>
<h2 class="podcat-line-title"><?php echo $childterm->name ?></h2>

</div>
</a>

<?php endforeach; ?>
</div>

<?php endif; ?>

Также можно добавить ссылку Вернутся в КАТАЛОГ, когда мы находимся в верхней рублике. Для этого добавим подусловие

<?php elseif($parthermid === 0): ?>

<div class="widget">

<a href="<?php echo get_site_url(); ?>/shop/">
<div class="podcat-line podcat-parent"><i class="fa fa-chevron-left" aria-hidden="true"></i> Назад в Каталог</div>
</a>

</div>

Примечание: в более поздней версии верстки заменил #podcat-list на .widget

Стили CSS

/* Виджет дочерние категории */

#podcat-list {
    margin: 0 0 20px 0;
}

.podcat-line {
    width: 100%;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 5px;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
}

.podcat-parent {
    background-color: #50aaff;
    color: #fff;
}	
	
.cat-image-min {
    width: 20%;
}

.cat-image-min img {
    float: left;
    border-radius: 50px;
    border: 1px solid #fff;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
}

.podcat-line-title {
    padding: 15px 0 15px 55px;
    font-size: 14px;
}

Подкатегории стандартной Категории

<?php
$current_cat = get_query_var('cat');
$childcats = get_categories('child_of='.$current_cat.'&hide_empty=0');
?>

<?php if ($childcats): ?>

<div id="podcat-list">

<?php foreach ($childcats as $childcat) : ?>

<?php $img_arr = get_field('mini-thumb', 'category_'.$childcat->cat_ID); ?>
<a href="<?php echo esc_url( get_category_link($childcat->cat_ID) ) ?>" title="<?php echo $cat->cat_name ?>">
<div class="podcat-line">

<?php
if($img_arr!="")
{ echo '<div class="cat-image-min"><img src="'.$img_arr['sizes']['square-xs'].'" alt="'.$img_arr['alt'].'" /></div>'; }
else
{ echo '<div class="cat-image-min"><img src="'.get_bloginfo("template_url").'/images/img-default-square.jpg" /></div>'; }
?>

<h2 class="podcat-line-title"><?php echo $childcat->cat_name ?></h2>

</div>
</a>

<?php endforeach; ?>

</div>

<?php endif; ?>

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