En este artículo veremos cómo mostrar las subcategorías de la categoría actual de manera horizontal, por debajo del título de la categoría, lo haremos directamente a través de código.
Resultado Final
Al final lo que obtendremos será algo similar a lo que se muestra en la siguiente imagen.

Código para mostrar Subcategorías en página de Categoría
Puedes agregar el siguiente código en el archivo functions.php de tu tema hijo o usando algún plugin de Snippets
add_action('woocommerce_before_shop_loop', 'dcms_show_subcategories');
function dcms_show_subcategories(){
if ( is_product_category() ){
$parentid = get_queried_object_id();
$cat_args = [ 'parent' => $parentid,
'hide_empty' => false ];
$subcategories = get_terms('product_cat', $cat_args);
if ( count($subcategories ) ){
echo "<ul class='dcms-subcategories'>";
foreach ($subcategories as $subcategory) {
$link = get_category_link($subcategory->term_id);
$name = $subcategory->name;
echo "<li><a href='{$link}'>{$name}</a></li>";
}
echo "</ul>";
}
}
}
En el código anterior:
- Usamos el hook woocommerce_before_shop_loop para mostrar los enlaces antes del contenido, el hook hace referencia a la función dcms_show_subcategories()
- Dentro de la función comprobamos si la página es una categoría de WooCommerce
- Obtenemos el ID de la categoría que se esta visualizando
- Definimos los argumentos para obtener los datos, puedes ocular las categorías que no tienen contenido estableciendo hide_empty a true
- Obtenemos las subcategorías y simplemente las mostramos en una lista HTML
Código CSS para mejorar el diseño de las subcategorías
En el código anterior hemos usado la clase CSS dcms-subcategories en el contenedor de los enlaces, por lo tanto podemos darle algunos estilos para que los enlaces se muestren de manera horizontal.
.dcms-subcategories{
margin:20px 0 30px;
list-style: none;
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
}
.dcms-subcategories li{
display: inline-block;
margin-right: 30px;
margin-bottom: 5px;
}
.dcms-subcategories a{
text-transform: uppercase;
}
Conclusión
Como has podido comprobar puedes darle una mejor apariencia a la navegación de subcategorías mostrándolas en la parte superior y de manera horizontal, hemos visto como realizar esto directamente a través de código.
Hola que tal como haria para cambarle en vez de los enlaces por las imagenes. o ambos la imagen con el enlace debajo. gracias
Hola, dentro del bucle, primero tendrías que obtener el ID de la imagen y luego la url de la imagen en base a ese ID, evaluaré hacer un artículo relacionado con esto.
podrias ayuarme con el codigo ? Gracias
Hola Alfredo, revisa este enlace en donde se explica cómo obtener la imagen de la catogoría: https://stackoverflow.com/questions/12717112/how-to-display-woocommerce-category-image