Woocommerce: Mostrar las subcategorías de una categoría en su propia página.

En ocasiones he tenido que hacer frente en algún proyecto a necesidades de usabilidad que el propio WordPress no te facilita por defecto.

Este es el caso de conseguir mostrar las subcategorías de una categoría principal en su propia página, a modo de menú desde el que poder acceder a las diferentes subcategorías directamente.

Para ello, simplemente debemos introducir este código en el archivo functions.php de nuestro tema:

function mostrar_subcategorias( $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 subcategoria">';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
echo $term->name;
echo '</a>';

echo '</li>';

}

echo '</ul>';

}
}
add_action( 'woocommerce_before_shop_loop', 'mostrar_subcategorias', 1 );

Y nos quedaría algo así dependiendo del nombre de las subcategorías y de sus estilos:

Ya solo quedaría añadirle los estilos CSS deseados, por ejemplo:

ul.product-cats {
  list-style-type: none;
  text-align:center;
}
ul.product-cats li {
  height: 25px;
  margin-right: 0px;
  border-right: 1px solid #aaa;
  padding: 0 20px;
  display:inline;
}
ul.product-cats li:last-child {
  border-right: none;
}
ul.product-cats li a {
  text-decoration: none;
  display:inline-block;
}

Y nos quedaría un menú horizontal: