Etiquetas personalizadas (sale badge) en WooCommerce

Si tienes una tienda WooCommerce y quieres que ciertos productos destaquen a simple vista, las etiquetas personalizadas WooCommerce —también conocidas como sale badges— son una de las estrategias visuales más efectivas que puedes aplicar sin tocar código. Con el plugin gratuito Product Labels for WooCommerce, puedes crear etiquetas con colores, textos y posiciones a tu elección, y asignarlas a productos individuales o a grupos enteros. El resultado es inmediato: más atención visual en la tienda y, con ello, más clics hacia el carrito.

En este tutorial te muestro paso a paso cómo instalar el plugin, configurar tus primeras etiquetas y sacarle el máximo provecho según el tipo de producto que quieras resaltar.

¿Por qué usar etiquetas personalizadas en WooCommerce?

WooCommerce incluye por defecto una etiqueta "Oferta" en rojo que aparece automáticamente cuando configuras un precio rebajado. Funciona, pero es genérica, inamovible y visualmente plana. El problema real es que cuando todos los productos tienen la misma etiqueta roja, ninguno destaca de verdad.

Las etiquetas personalizadas te permiten ir mucho más allá: puedes crear un badge que diga "Nuevo", "Más vendido", "Solo por hoy" o "Edición limitada" con los colores exactos de tu marca, colocarlo en la esquina que más te convenga y asignarlo solo a los productos donde tenga sentido. Esa diferenciación visual es lo que convierte un vistazo casual en un clic.

Consejo: No limites las etiquetas solo a los productos en oferta. Úsalas también para resaltar novedades, productos con envío gratis o los más vendidos de la temporada — cualquier información que acelere la decisión de compra.

Instalación del plugin Product Labels for WooCommerce

El plugin se llama Product Labels for WooCommerce y está disponible de forma gratuita en el repositorio oficial de WordPress. Para instalarlo, ve al panel de administración de tu sitio, entra en Plugins → Añadir nuevo, busca el nombre exacto del plugin y haz clic en Instalar y luego en Activar.

Una vez activado, aparece un nuevo elemento en el menú lateral de WordPress desde donde puedes crear y gestionar todas tus etiquetas. No necesitas configuración adicional para empezar — el plugin está listo para usar desde el primer momento.

🎓 ¿Quieres dominar WooCommerce dentro de Divi?
En uxdivi.com/cursos tenemos contenido premium donde trabajo la tienda completa con Divi y WooCommerce: páginas de producto, carrito, checkout y más. Accede como suscriptor y construye tu tienda paso a paso.

Cómo crear y personalizar tus etiquetas

Desde el panel del plugin puedes crear una etiqueta nueva en segundos. Estos son los campos principales que vas a configurar:

Texto de la etiqueta

Es lo primero que el visitante va a leer, así que tiene que ser corto y directo. Palabras como "Nuevo", "Popular", "Solo hoy" o "Últimas unidades" funcionan mucho mejor que frases largas. El plugin también permite usar variables dinámicas para mostrar el porcentaje de descuento automáticamente — útil si los precios de tus productos cambian con frecuencia.

Colores y tipografía

Puedes definir el color de fondo, el color del texto y el tamaño de la fuente. Mi recomendación es usar los colores de tu marca para que las etiquetas se sientan parte del diseño de la tienda, no como elementos ajenos pegados encima. Un verde para "Nuevo", un naranja para "Oferta flash" y un azul para "Más vendido" es una combinación que funciona bien sin saturar.

Posición en la imagen del producto

El plugin te deja elegir en qué esquina de la imagen aparece la etiqueta: arriba a la izquierda, arriba a la derecha, abajo a la izquierda o abajo a la derecha. La esquina superior izquierda es la posición más natural para la lectura occidental y suele tener el mayor impacto visual. Si ya tienes una etiqueta predeterminada de WooCommerce en esa posición, considera mover la nueva a la esquina opuesta para que no se superpongan.

Consejo: Si tu tienda muestra los badges tanto en el listado de productos como en la página individual del producto, revisa que la etiqueta se vea bien en ambas vistas. A veces el tamaño de fuente que funciona en el grid queda demasiado grande en el detalle de producto.

Asignar etiquetas a productos individuales o grupos

Una vez creada la etiqueta, tienes dos formas de asignarla:

1. Producto individual: desde la ficha del producto en WordPress, en el panel lateral de edición, encuentras la sección del plugin donde seleccionas qué etiqueta quieres mostrar. Útil para productos puntuales o lanzamientos específicos.
2. Por categoría o grupo: puedes asignar una etiqueta a una categoría completa de productos, lo que te ahorra tener que ir producto por producto cuando quieres marcar, por ejemplo, "toda la colección de verano" como novedad.

Esta flexibilidad es lo que hace al plugin realmente práctico en tiendas con catálogos medianos o grandes. En lugar de editar decenas de productos uno a uno, configuras la etiqueta una sola vez y la aplicas en bloque.

Casos de uso: qué tipo de etiqueta conviene en cada situación

Para ayudarte a decidir cuándo y cómo usar cada badge, aquí tienes una tabla de referencia rápida:

Si tu tienda está construida con Divi, también puedes personalizar el botón de añadir al carrito para que el diseño completo de la tarjeta de producto sea coherente: badge, imagen, precio y CTA con el mismo lenguaje visual.

🎓 ¿Quieres aprender más sobre diseño de tiendas con Divi?
En uxdivi.com/cursos tenemos formación específica sobre WooCommerce con Divi donde cubrimos la página de tienda, las fichas de producto y el flujo de compra completo. Accede como suscriptor y aplica todo lo que ves acá directamente en tu proyecto.

Errores comunes al usar etiquetas en WooCommerce

Con el tiempo he visto patrones que se repiten cuando alguien empieza a usar badges en su tienda. Estos son los más frecuentes:

• Saturar la tienda de etiquetas: si el 80% de tus productos tienen un badge, ninguno destaca. Las etiquetas funcionan por contraste — cuantos menos productos las lleven, más llamará la atención cada una.
• Usar textos demasiado largos: un badge no es un párrafo. Si el texto no entra en dos o tres palabras, hay que reformularlo.
• Ignorar el comportamiento en móvil: las etiquetas que se ven perfectas en escritorio a veces tapan parte de la imagen del producto en pantallas pequeñas. Siempre revisa en móvil antes de publicar. Para ese tipo de ajustes responsive, las herramientas de pruebas de diseño responsive te dan una vista rápida en múltiples tamaños sin tener que sacar el celular.
• Dejar etiquetas de "Nuevo" indefinidamente: un producto que lleva seis meses publicado ya no es nuevo. Programa una revisión periódica para eliminar o actualizar las etiquetas que han perdido relevancia.
• No probar la superposición con la etiqueta de oferta de WooCommerce: si activas tanto el badge nativo de WooCommerce como el del plugin en el mismo producto, pueden superponerse. Verifica siempre que uno esté desactivado o que la posición de cada uno sea diferente.

Consejo: Cuando termines de configurar tus etiquetas, accede al listado de productos como lo haría un cliente — abre una pestaña de incógnito — para ver exactamente cómo se ve la tienda sin estar logueado como administrador. El caché y los estilos de admin a veces ocultan problemas que los visitantes reales sí ven.

Y si en algún momento quieres ir un paso más allá y permitir que tus clientes añadan productos directamente desde el listado sin pasar por la ficha, también puedes crear una URL directa para añadir al carrito en WooCommerce y combinarla con una etiqueta que diga "Compra directa" para acelerar aún más el proceso.

Preguntas frecuentes sobre etiquetas personalizadas en WooCommerce

¿El plugin Product Labels for WooCommerce es compatible con todos los temas?

En general sí — el plugin funciona a nivel de WooCommerce y se apoya en los hooks estándar de visualización de productos. Puede haber incompatibilidades menores con temas muy personalizados que reescriban las plantillas de producto de WooCommerce, pero en la mayoría de los casos funciona sin ajustes adicionales.

¿Puedo usar el plugin junto con la etiqueta de "Oferta" que ya incluye WooCommerce?

Sí, pero hay que tener cuidado con la superposición. Lo más limpio es ocultar la etiqueta predeterminada de WooCommerce mediante CSS o con la opción que incluye el propio plugin, y gestionar todo desde Product Labels. Así tienes control completo sobre qué se muestra y dónde.

¿Las etiquetas afectan el rendimiento de la tienda?

El impacto es mínimo. El plugin añade una imagen o un elemento HTML encima de la foto del producto, sin consultas pesadas a la base de datos. En una tienda bien optimizada no notarás diferencia en la velocidad de carga.

¿Puedo mostrar el porcentaje de descuento dinámicamente en la etiqueta?

Sí. El plugin incluye una variable para calcular y mostrar el porcentaje de descuento de forma automática según el precio original y el precio rebajado del producto. Así no tienes que actualizar el texto de la etiqueta cada vez que cambias un precio.

Conclusión

Las etiquetas personalizadas en WooCommerce son una de esas mejoras visuales que parece pequeña pero que tiene un impacto directo en la forma en que los visitantes perciben y recorren tu tienda. Con Product Labels for WooCommerce la configuración es simple, el control es total y el resultado se ve desde el primer día. Si combinás esto con un diseño de tienda bien construido en Divi, tienes una experiencia de compra mucho más profesional y efectiva.

🎓 ¿Quieres construir tu tienda WooCommerce completa con Divi?
En uxdivi.com/cursos encontrarás formación donde cubrimos desde la configuración de WooCommerce hasta el diseño de cada pantalla del flujo de compra usando Divi. Accede como suscriptor y construye una tienda que convierta de verdad.