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

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

mejoras woocommerce

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

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando...