Mostrar categorías y etiquetas en lista de productos WooCommerce

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

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.