• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Subcategorías en formato horizontal en página de categorías de WooCommerce

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

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

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

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Mover el precio de variaciones de producto en WooCommerceMover el precio de variaciones de producto en WooCommerce
  • Campo de texto para escribir en productos WooCommerceCampo de texto para escribir en productos WooCommerce
  • Mostrar categorías y etiquetas en lista de productos WooCommerceMostrar categorías y etiquetas en lista de productos WooCommerce
  • Guía visual de Hooks para StoreFront y WooCommerceGuía visual de Hooks para StoreFront y WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Subir archivos en WordPress a través de código

Empaquetar WordPress con install.php

Posts relacionados sin plugins en WordPress

Generar código para WordPress con GenerateWP

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2022 Todos los derechos reservados