La insignia predeterminada "¡Rebajas!" de WooCommerce indica a los compradores que un producto tiene descuento, pero no cuánto están ahorrando. Un descuento del 10% y un descuento del 40% pueden verse exactamente igual en la página de la tienda, aunque representen ahorros muy diferentes.
Ese contexto adicional es importante cuando los compradores buscan activamente valor. Según la Encuesta de Compras Navideñas 2025 de Deloitte, el 89% de los consumidores encuestados planeaba buscar ofertas para estirar sus presupuestos. Mostrar el descuento real les proporciona información más útil de un vistazo que una etiqueta de rebajas genérica.
Con Advanced Promo Kit, puedes hacer que WooCommerce muestre insignias de porcentaje de descuento utilizando datos de productos en vivo, por lo que el número se actualiza cuando cambia el precio. También puedes mostrar la cantidad ahorrada, limitar las insignias a descuentos mayores y mostrar ofertas de cupones o "Compra uno y llévate otro gratis" directamente en la cuadrícula de productos.
Lo que la insignia de rebajas predeterminada de WooCommerce puede y no puede mostrar
De serie, WooCommerce muestra una etiqueta genérica de "Oferta" en los productos que están actualmente en oferta. Puede aparecer en las páginas de la tienda y de los productos, pero la etiqueta predeterminada no informa a los compradores del tamaño del descuento.
Eso es intencional. WooCommerce decide si un producto está en oferta y, a continuación, la etiqueta predeterminada muestra un texto genérico de "¡Oferta!". No calcula el porcentaje ni la cantidad ahorrada para el comprador, y no representa los descuentos de cupones.
Si tu tema no ofrece el texto de etiqueta que necesitas, dos opciones comunes son un fragmento de código que reescribe el texto de la etiqueta de oferta o un plugin de etiquetas que genera el texto a partir de los datos del producto. Ambos enfoques se explican a continuación.
El método de fragmento de código y sus límites
Un enfoque común de fragmento de código para las plantillas clásicas de WooCommerce se engancha al filtro `woocommerce_sale_flash` y reemplaza "¡Oferta!" con un porcentaje calculado. La salida de la etiqueta de oferta basada en bloques más reciente utiliza `woocommerce_sale_badge_text` en su lugar, por lo que un fragmento de código de plantilla clásica puede no afectar a todas las superficies de la etiqueta. En cualquier caso, el código lee los datos de precios, calcula un porcentaje y lo devuelve como texto de etiqueta.
Para un producto simple con un par de precios, este enfoque funciona bien.
Un fragmento de código básico se complica en tres áreas:
- Productos variables y agrupados: no hay un único precio regular y de oferta para todo el producto. El código tiene que decidir cómo representar múltiples precios o variaciones en una sola etiqueta, por lo que un solo porcentaje puede ser engañoso.
- Actualizaciones del tema: si añades el fragmento de código directamente al archivo `functions.php` de un tema principal, una actualización del tema puede sobrescribirlo. Un tema hijo o un plugin de fragmentos de código mantiene el código personalizado separado.
- Cupones: un fragmento de código básico de precio de oferta solo compara los precios de los productos. No conoce automáticamente un cupón de descuento del 20% o una oferta "compra uno y llévate otro gratis" almacenada en la configuración del cupón.
Añade un umbral ("solo etiqueta artículos con más del 25% de descuento") o una fecha de finalización programada, y el fragmento de código se vuelve más complejo de mantener.
Cómo Advanced Promo Kit genera etiquetas de descuento
Advanced Promo Kit genera el texto de la etiqueta a partir de marcadores de posición que se resuelven contra los datos del producto cuando la página se carga. Escribes la etiqueta una vez, con `{discount_percent}` donde va el número, y el marcador de posición calcula la cifra a partir de los datos de precios actuales del producto cuando se resuelve.
Tres funciones son especialmente útiles para este flujo de trabajo:
- Los marcadores de posición se resuelven en vivo: `{product_price}`, `{regular_price}`, `{sale_price}`, `{discount_percent}` y `{discount_amount}` se extraen del producto en el momento de la renderización, formateados con la configuración de moneda de tu WooCommerce. En productos simples, cambiar el precio actualiza automáticamente los marcadores de posición de descuento.
- Los marcadores de posición vacíos ocultan la etiqueta: si un marcador de posición se resuelve como vacío (por ejemplo, `{discount_percent}` en un producto que no está en oferta), toda la etiqueta se oculta en ese producto. Nunca obtendrás una etiqueta que diga "Ahorra !" en un artículo a precio completo.
- Las condiciones deciden dónde se muestra: la pestaña Condiciones incluye En oferta (Sí / No) y una condición de Porcentaje de descuento con los operadores Igual a, Distinto de, Mayor que, Mayor o igual que, Menor que y Menor o igual que, agrupados con lógica Y/O.
Advanced Promo Kit también tiene una integración opcional con Advanced Coupons. Con el plugin gratuito Advanced Coupons activo, el marcador de posición {ac_coupon-COUPONCODE} muestra el descuento de un cupón de Advanced Coupons, incluidas las ofertas 2x1. Eso está fuera de lo que maneja un fragmento de precio de oferta básico.
Esta guía asume que ya has creado una etiqueta básica. Si no lo has hecho, empieza con nuestra guía para crear distintivos de producto personalizados y vuelve. A partir de aquí, solo se trata de marcadores de posición y condiciones.
Paso 1: Mostrar un distintivo de porcentaje en artículos en oferta
Para productos simples, puedes mostrar el porcentaje de descuento en los artículos en oferta con una etiqueta cuyo texto sea -{discount_percent} y cuya única condición sea En oferta con el operador Sí. Aquí está la secuencia.
- Ve a Promo Kit > Crear etiqueta. Dale a la etiqueta un nombre que reconozcas en la lista Administrar etiquetas, como "Porcentaje de descuento".
- En el campo Etiqueta del distintivo, escribe un guion. Luego expande Variable: Producto en el panel Variables debajo del campo y haz clic en {discount_percent}. Los marcadores de posición distinguen entre mayúsculas y minúsculas, así que usa el panel o copia el código exacto en minúsculas.
- Comprueba la Vista previa del distintivo a la derecha. Sin ningún producto elegido, se lee -25%, a partir de valores de ejemplo fijos (39,99 € precio normal, 29,99 € precio de oferta). Elige un producto del menú desplegable encima de la vista previa, y se resolverá con los precios en vivo de ese producto en su lugar.
- Abre la pestaña Condiciones y añade En oferta con el operador Sí. No requiere ningún valor.
- Elige un estilo y posición de distintivo en la pestaña Estilo (más sobre esto a continuación). Las nuevas etiquetas comienzan como Inactivas, así que cambia el interruptor en la parte superior de la pantalla a Activo, y luego Guarda.
Selecciona un producto real en la vista previa, y luego confirma el mismo valor en la tienda después de guardar.
Visita una categoría con algunos artículos simples en oferta. Cada uno muestra su propio porcentaje, y los artículos a precio completo no muestran nada, porque {discount_percent} está vacío para ellos. Estrictamente hablando, la condición En oferta es una salvaguarda adicional aquí, ya que la regla de ocultación automática ya evitaría que la etiqueta se muestre en productos a precio completo. Mantenla de todos modos, para que la lista de etiquetas se lea claramente de un vistazo.
Un error fácil es escribir {discount_percent}% de descuento, lo que muestra "25%% de descuento" en la tienda y hace que el marcador de posición parezca roto. El marcador de posición ya incluye el signo de porcentaje, así que escribe -{discount_percent} o {discount_percent} de descuento. Un porcentaje también puede parecer inesperadamente grande en un descuento fijo pronunciado: un descuento de 10 € en un producto de 12 € se muestra como "-83%". Para esos artículos, usa el marcador de posición de cantidad en el Paso 2.
La lista completa de marcadores de posición integrados, con el formato exacto que necesitan y cuándo cada uno se resuelve como vacío, se encuentra en nuestra referencia de marcadores de posición de contenido dinámico.
Paso 2: Mostrar el importe ahorrado o solo por encima de un umbral
Utiliza {discount_amount} cuando quieras enfatizar el importe ahorrado y añade una condición de Porcentaje de Descuento cuando solo quieras insignias por encima de un umbral de descuento específico.
Según Baymard Institute (2022), el 18 % o más de los sitios de comercio electrónico caen en al menos una de las cuatro trampas al mostrar descuentos de precios en la página del producto y, en sus pruebas a gran escala, mostrar tanto el descuento absoluto como el relativo funciona mejor. También señalan la "Regla del 100": un porcentaje para artículos de menos de 100 $ y una cifra en dólares por encima, por lo que "100 $ de descuento" en un artículo de 1000 $ puede sentirse más sustancial que "10 % de descuento". Una segunda etiqueta con el texto Ahorra {discount_amount} se muestra como "Ahorra 10,00 $" en la moneda de tu tienda, y nada más sobre la configuración cambia.
Para un umbral, abre la pestaña Condiciones y añade Porcentaje de Descuento con el operador Mayor o igual que. Por ejemplo, introduce 15 si solo quieres la insignia en productos con al menos un 15 % de descuento. Elige un umbral que se ajuste a tu promoción. Como contexto, el análisis de Adobe de la temporada navideña de 2025 informó descuentos máximos del 30,9 % en electrónica y del 29,6 % en juguetes. Si estás decidiendo qué porcentaje de descuento ofrecer, nuestra publicación de datos sobre el porcentaje de descuento más efectivo lo cubre por separado.
Para productos variables, utiliza texto fijo como "Opciones seleccionadas en oferta", mantén la condición Porcentaje de Descuento y añade una condición de Tipo de Producto. Luego, configura Coincidencia de Producto Variable (Promo Kit > Ajustes > General) en Coincidir cualquier variación, para que la etiqueta aparezca cuando al menos una variación cumpla el umbral.
Aquí tienes cómo se ve esto en la práctica (datos de ejemplo):
| Objetivo | Marcador de posición / condición | Texto de insignia que escribes | Lo que ven los compradores |
|---|---|---|---|
| Porcentaje de descuento en un artículo simple en oferta | En oferta, es + {discount_percent} | -{discount_percent} | -25% |
| Importe ahorrado | {monto_descuento} | Ahorra {discount_amount} | Ahorra 10,00 $ |
| Solo grandes descuentos | Porcentaje de Descuento >= 25 + {discount_percent} | Liquidación -{discount_percent} | Liquidación -40 % |
| Oferta de cupón en la cuadrícula | {ac_coupon-SUMMER20} | {ac_coupon-SUMMER20} de descuento con SUMMER20 | 20 % de descuento con SUMMER20 |
| Cupón 2x1 | {ac_coupon-BOGO2FOR1} | {ac_coupon-BOGO2FOR1} | Compra 1 y llévate 1 gratis |
Texto de ejemplo de insignia. El resultado se genera a partir de los precios en vivo de cada producto y la configuración del cupón.
Paso 3: Mostrar cupones y ofertas 2x1 como insignias
Una insignia de cupón utiliza el marcador de posición {ac_coupon-COUPONCODE}, que muestra el descuento de un cupón específico de Advanced Coupons en las insignias de tus productos. Un fragmento básico de precio de oferta no produce esto porque la oferta reside en el cupón en lugar de en el precio del producto.
- Ve a Promo Kit > Ajustes, abre la pestaña Integraciones y activa la fila Advanced Coupons for WooCommerce. El interruptor aparece en gris si Advanced Coupons no está activo. Aparece una subopción Validar cupón; déjala desactivada por ahora.
- Crea o edita una etiqueta. En el panel Variables, desplázate hasta la sección Advanced Coupons for WooCommerce, escribe al menos dos caracteres del código del cupón, selecciona el cupón en el menú desplegable y haz clic en Insertar variable. El marcador de posición, por ejemplo {ac_coupon-SUMMER20}, se añade al texto de la insignia.
- Construye el texto alrededor, como {ac_coupon-SUMMER20} de descuento con SUMMER20. La vista previa lo resuelve de inmediato.
Lo que imprime el marcador de posición depende del tipo de cupón:
- Cupón de porcentaje: 25%
- Descuento fijo en el carrito: 10,00 $
- Descuento fijo en producto: 5,00 $, y solo en los productos a los que se aplica el cupón
- Oferta 2x1: Compra 2 y llévate 1 gratis, o Compra 2 y llévate 1 al 50% de descuento, y solo en los productos "comprados" de la oferta. La oferta necesita productos específicos o categorías de productos como desencadenante; las ofertas desencadenadas por cualquier producto, o configuradas para dar el mismo producto, no muestran una insignia.
- Reembolso de crédito de tienda (Advanced Coupons Premium): 15% de reembolso o 10,00 $ de reembolso
Las insignias de descuento fijo en producto y 2x1 solo aparecen en los productos que cubre la oferta; en cualquier otro lugar, el marcador de posición está vacío y la etiqueta se oculta, la misma regla que antes. Los cupones de porcentaje, descuento fijo en el carrito y reembolso no comprueban las restricciones de producto, por lo que su insignia se muestra en todos los productos a los que llega la etiqueta. Si un cupón solo cubre una categoría, añade una condición de Categoría de producto coincidente a la etiqueta. Si usas un cupón 2x1 de WooCommerce creado con el plugin gratuito Advanced Coupons, la insignia puede anunciar la oferta donde aparezca un producto "comprado" compatible.
La opción Validar cupón es opcional y está desactivada por defecto. Actívala y Advanced Promo Kit comprobará que el cupón es válido y no ha caducado antes de mostrar la etiqueta, y un cupón que falle la comprobación ocultará la etiqueta. Eso es adecuado para códigos con fechas de caducidad. Déjala desactivada para códigos perennes que quieras anunciar sin importar nada.
Si tu promoción tiene fechas fijas pero quieres que la insignia aparezca antes de que el cupón esté activo, usa la pestaña Programar en su lugar. Cada etiqueta tiene una Fecha de inicio y una Fecha de fin opcionales, comparadas en la zona horaria de tu sitio, y se oculta fuera de esa ventana. Las integraciones relacionadas añaden dos marcadores de posición más: {lp_points} muestra los puntos de fidelidad que un producto gana a través de Advanced Loyalty Program, mientras que {agc_gift_card_value} muestra el valor de un producto de tarjeta regalo a través de Advanced Gift Cards. La referencia tipo por tipo para la salida de cupones está en nuestra guía para mostrar información de descuento de cupones en etiquetas de producto.
Estilo, apilamiento y prueba de tus insignias dinámicas
Los valores dinámicos pueden ocupar más espacio que el texto de marcador de posición que ve en el editor. Para etiquetas como "Ahorra 10,00 €", un punto de partida práctico es de aproximadamente 240 a 280 píxeles de ancho y de 36 a 40 píxeles de alto. Puede ajustar las dimensiones en la pestaña Estilo una vez que vea el texto resuelto.
Doce formas de insignias se encuentran en la pestaña General (Rectángulo Horizontal, Rectángulo Vertical, Píldora, Círculo, Cuadrado, Cinta Izquierda, Cinta Derecha, Etiqueta, Hexágono, Estrella, Banner y una Imagen Personalizada), junto con el color del texto, el tamaño de fuente y el peso. La pestaña Estilo agrega color de insignia, ancho, alto, radio del borde, relleno, opacidad y rotación, todo con una vista previa en vivo. Fondos degradados, sombras, animaciones, una URL en la que se puede hacer clic y una información sobre herramientas al pasar el cursor también están ahí. La ubicación es Sobre la imagen o Fuera de la imagen, en cualquiera de las cuatro esquinas con compensaciones de píxeles. Para obtener ideas de formas y colores, nuestro resumen de diseños de insignias de rebajas que convierten tiene quince ejemplos prácticos.
El apilamiento está activado por defecto. Las etiquetas máximas por producto tienen un valor predeterminado de tres, y el espaciado de etiquetas tiene un valor predeterminado de cinco píxeles; ambos se pueden ajustar en Configuración > General. La prioridad es un orden de arrastrar y soltar en Configuración > Orden de prioridad, donde las etiquetas más altas en la lista se muestran primero, así que arrastre "Porcentaje de descuento" por encima de "Oferta de cupón".
Antes de darlo por terminado, comprueba cinco productos tanto en la cuadrícula de la tienda como en la página de producto individual:
- Producto simple en oferta: muestra su propio porcentaje
- Producto variable con descuentos mixtos: muestra tu etiqueta de texto fijo si una variación califica
- Producto a precio completo: no muestra nada en absoluto
- Producto al que tu cupón no se aplica: sin insignia de 2x1 o de producto fijo, y sin insignia de porcentaje, carrito fijo o reembolso si lo limitaste con una condición
- Producto que califica para todas las etiquetas: respeta tu configuración de Etiquetas máximas por producto y el orden de prioridad que estableciste
Preguntas frecuentes
¿Cómo muestro el porcentaje de descuento en la insignia de rebajas de WooCommerce?
La insignia de rebajas predeterminada de WooCommerce no muestra el porcentaje de descuento. Para añadir una, puedes usar código o un plugin de etiquetas. Para productos simples en Advanced Promo Kit, crea una etiqueta con el texto -{discount_percent} y añade una condición "En rebajas" con el operador "Es". El porcentaje se recalcula a partir de los precios en vivo del producto cada vez que se carga la página.
¿Puede la insignia de rebajas mostrar la cantidad ahorrada en lugar del porcentaje?
Sí. Usa el marcador de posición {discount_amount}, que imprime la diferencia entre el precio normal y el de rebajas formateada en la moneda de tu tienda, por lo que "Ahorra {discount_amount}" se mostrará como "Ahorra 10,00 €". Baymard señala la "Regla de los 100": cuando solo muestras un formato, los ahorros en porcentaje pueden parecer más atractivos por debajo de 100 €, mientras que los ahorros en dólares pueden parecer más atractivos por encima de 100 €. Puedes usar una etiqueta de cada tipo con una condición de "Precio del producto" para dividirlas.
¿Puede una insignia de WooCommerce mostrar un cupón o una oferta de "Compra uno y llévate otro gratis"?
Sí, a través de la integración de Advanced Coupons en Advanced Promo Kit. Actívala en Promo Kit > Ajustes > Integraciones, y luego inserta {ac_coupon-TUCODIGO} en una etiqueta. Los cupones de porcentaje, carrito fijo, producto fijo, "Compra uno y llévate otro gratis" y reembolso de crédito de tienda (Premium) muestran su propia redacción, como "Compra 2 y llévate 1 gratis". Las etiquetas de producto fijo y "Compra uno y llévate otro gratis" solo aparecen en los productos que cubre la oferta; para los cupones de porcentaje, carrito fijo y reembolso, añade una condición para limitar dónde se muestra la etiqueta.
¿Se actualizará la insignia cuando cambie el precio?
Sí. En productos simples, los marcadores de posición de precio se resuelven con el precio normal y de rebajas actual del producto cuando se renderiza la página, por lo que editar un precio cambia la insignia sin necesidad de editar la etiqueta. Si eliminas por completo el precio de rebajas, {discount_percent} se resolverá como vacío y la etiqueta desaparecerá de ese producto por sí sola.
Preparando tus insignias de descuento
El objetivo es mantener cada insignia alineada con la promoción que describe. Los marcadores de posición dinámicos reducen el texto de la insignia que necesitas actualizar manualmente cuando cambian los precios de los productos.
Esto es lo que debes hacer a continuación:
- Lo que la insignia de oferta predeterminada de WooCommerce puede y no puede mostrar: decide si la etiqueta predeterminada "¡Oferta!" proporciona a los compradores suficientes detalles de descuento.
- El método del fragmento y sus límites: si ya usas un fragmento, compruébalo en un producto variable antes de confiar en él.
- Mostrar una insignia de porcentaje en artículos en oferta: crea la etiqueta de porcentaje y recuerda que el marcador de posición lleva su propio signo %.
- Mostrar el importe ahorrado o solo por encima de un umbral: añade una etiqueta de importe y un Porcentaje de descuento >= umbral.
- Poner ofertas de cupones y 2x1 en la cuadrícula: activa la integración y pon tu mejor cupón como insignia.
Si desea que WooCommerce muestre el porcentaje de descuento sin un fragmento personalizado que mantener, configure las insignias de oferta dinámicas de Advanced Promo Kit y mantenga el texto de su insignia vinculado a los datos de su producto.
