• 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

[ hace 9 meses ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

mejoras woocommerce

¿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

Comentarios

  1. alfredo

    24 noviembre, 2022

    Hola que tal como haria para cambarle en vez de los enlaces por las imagenes. o ambos la imagen con el enlace debajo. gracias

    • Jhon Marreros Guzmán

      24 noviembre, 2022

      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.

      • Alfredo Herrera

        25 noviembre, 2022

        podrias ayuarme con el codigo ? Gracias

        • Jhon Marreros Guzmán

          26 noviembre, 2022

          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

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

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Cómo modificar una plantilla de WooCommerce

Cómo usar Roles y Capacidades en WordPress

Remover el slug de la página padre en WordPress

Estructura de la base de datos de WordPress

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