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.
¿Aún con dudas?, en el siguiente video se detalla la implementación de este 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