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.
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.
Artículos Relacionados
(4 votos, promedio: 4,00 de 5)
Cargando...
Hola buenas amigo, muy bueno el video, solo una consulta, como hacerlo en caso de querer mostrar solo una categoria o etiqueta, agradecido.
Hola, dentro del bloque del foreach(), puedes poner un break; de esta forma sólo hará una iteracción.
Saludos.
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”
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
Saludos.
y si lo que quiero mostrar es datos creados con advance custom fields? como se tendria que hacer?
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/
en mi caso quiero separarlas por comas
Agrega una coma en la impresión de la cadena en la función printf y no uses los estilos CSS.