• 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 / Mostrar categorías y etiquetas en lista de productos WooCommerce

Mostrar categorías y etiquetas en lista de productos WooCommerce

Mostrar categorías y etiquetas en lista de productos WooCommerce

[ 19 agosto 2021 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

En un artículo anterior habíamos visto cómo mostrar la descripción corta en la página de tienda de WooCommerce, en este artículo veremos algo similar, pero mostraremos las categorías y etiquetas que tiene un producto cuando se muestra una lista de productos.

 

Resultado final

Al final lo que queremos obtener es algo similar a lo que se muestra en la siguiente imagen.

Mostrar categorías y etiquetas en lista de productos resultado

 

Código para mostrar la categoría en lista de productos

En el código anterior:

  • Utilizamos uno de los hooks de WooCommerce para agregar contenido a los productos de una lista
  • El hook hace referencia a la función dcms_categories_item_product()
  • Dentro de la función obtenemos los datos del producto actual, el dato que nos interesa es el ID o IDs de las categorías
  • Luego recorremos todas las categorías y por cada ID obtenemos datos adicionales de la categoría con la función get_term_by()
  • Formamos el enlace con el nombre de la categoría y la imprimimos

 

 

Código para mostrar etiquetas en lista de productos

En el código anterior:

  • Utilizamos uno de los hooks de WooCommerce para agregar contenido a los productos de una lista
  • El hook hace referencia a la función dcms_tags_item_product()
  • Dentro de la función obtenemos los datos del producto actual, el dato que nos interesa es el ID o IDs de las etiquetas
  • Luego recorremos todas las etiquetas y por cada ID obtenemos datos adicionales de la etiqueta con la función get_term_by()
  • Formamos el enlace con el nombre de la etiqueta y la imprimimos

 

Código CSS complementario

En el código anterior hemos usado como contenedor algunas clases, con el siguiente código estilizamos las etiquetas y categorías.

.item-categories {
  margin: 10px;
}

.item-categories a {
  margin-right: 10px;
}

.item-tags a {
  display: inline-block;
  background-color: lightgrey;
  color: grey;
  padding: 0 8px;
  border-radius: 8px;
  margin-right: 10px;
}

.item-tags {
  margin: 10px;
}

 

Conclusión

Tal como hemos visto, puedes mostrar datos adicionales en la lista de productos, como categorías y etiquetas de manera simple a través de código. Además puedes condicionarlo para que sólo se muestren en determinadas partes de tu sitio, por ejemplo sólo en la página de tienda.
 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Guía visual de Hooks para StoreFront y WooCommerceGuía visual de Hooks para StoreFront y WooCommerce
  • Agregar el campo de cantidad en la lista de productos de WooCommerceAgregar el campo de cantidad en la lista de productos de WooCommerce
  • Mostrar la descripción corta del producto en la página de tienda de WooCommerceMostrar la descripción corta del producto en la página de tienda de WooCommerce
  • REST API WoocommerceCómo usar la REST API de WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 4,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Jorge Cancino

    13 octubre, 2021

    Hola buenas amigo, muy bueno el video, solo una consulta, como hacerlo en caso de querer mostrar solo una categoria o etiqueta, agradecido.

    • Jhon Marreros Guzmán

      13 octubre, 2021

      Hola, dentro del bloque del foreach(), puedes poner un break; de esta forma sólo hará una iteracción.
      Saludos.

  2. Maria

    20 abril, 2022

    Hola!!
    El código va perfecto, pero me gustaría utilizarlo sólo en una categoría y, ya lo siento pero no sé muy bien lo que es un break. La categoría en mi caso es “perfume”

    • Jhon Marreros Guzmán

      20 abril, 2022

      Hola, en tu caso entiendo que quieres mostrar las etiquetas sólo de una determinada categoría, en este caso realiza una comprobación adicional antes de la función print(), por ejemplo asumiendo que la categoría de perfume tiene un ID = 11

      
          $category_ids = $product_data['category_ids'];
          if ( ! in_array(11, $category_ids ) ) return;
      
      

      Saludos.

  3. Piter

    4 mayo, 2022

    y si lo que quiero mostrar es datos creados con advance custom fields? como se tendria que hacer?

    • Jhon Marreros Guzmán

      8 mayo, 2022

      Hola, tendrías que usar la función get_field(), https://www.advancedcustomfields.com/resources/get_field/ , el segundo parámetro es el ID del producto, por lo que puedes pasar ese parámetro. Revisa este artículo de referencia: https://decodecms.com/campos-personalizados-en-productos-de-woocommerce/

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

Agregar Whatsapp flotante en WordPress

Agregar efecto de partículas en WordPress

Cómo usar los campos Personalizados en WordPress

Geolocalización en WooCommerce con MaxMind

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