Subcategorías en formato horizontal en página de categorías de WooCommerce

[ 3 mayo 2022 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

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.

Subcategorías horizontal, página categoría WooCommerce

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