WooCommerce distintivos de producto: Oferta, Nuevo y Superventas

En una cuadrícula de productos similares, se hace clic en los artículos que destacan. Los distintivos de producto son una de las vías más baratas para lograr exactamente eso: una pequeña etiqueta de Oferta, Nuevo o Superventas sobre la imagen del producto, que llama la atención y le da al cliente un motivo para mirar de cerca. No cuestan nada en la presentación, reflejan hechos que ya tienes de todos modos de cada producto, y actúan justo en el momento en que un visitante repasa una categoría y quiere decidir dónde hacer clic primero. Esta guía explica cómo funcionan los distintivos en WooCommerce, cuáles impulsan realmente las ventas, qué debe poder hacer una buena herramienta de distintivos y cómo el plugin gratuito Marks añade distintivos automáticos y manuales sin perjudicar el rendimiento.

Qué son los distintivos de producto

Un distintivo de producto es una pequeña etiqueta que se coloca sobre la imagen del producto, tanto en las listas como en la página de producto individual. Cada distintivo lleva un mensaje breve y captable de un vistazo que un cliente puede leer sin detenerse. Los distintivos habituales corresponden directamente a lo que le interesa a un cliente:

• Oferta o un porcentaje de descuento, que señala una bajada de precio.
• Nuevo, que marca los productos añadidos recientemente.
• Poco stock, que genera una escasez suave.
• Superventas, que aporta prueba social.
• Envío gratis y Sin stock, que responden a dos preguntas que un cliente tendría que aclarar de otro modo con un clic.

El valor de un distintivo está en que hace visible un hecho en el momento de la decisión. Un cliente que sobrevuela una categoría no lee cada título y cada descripción, sino que se fija en pistas. Un distintivo es una de esas pistas, colocada justo donde la mirada ya se posa.

Por qué aumentan la conversión

Los distintivos funcionan porque la compra online es rápida y visual. La decisión de hacer clic en un producto se toma en uno o dos segundos y la impulsa lo que destaca. Un distintivo bien colocado le da al cliente un motivo para detenerse:

• Urgencia mediante Oferta, Porcentaje de descuento y Poco stock, que animan a una decisión en lugar de a un “quizá luego”.
• Seguridad mediante Superventas, que transmite la confianza de otros compradores sin que el cliente tenga que leer una sola reseña.
• Actualidad mediante Nuevo, que dirige a los visitantes recurrentes directamente hacia lo que ha cambiado desde su última visita.
• Claridad mediante Envío gratis, que despeja un motivo frecuente de duda antes incluso de abrir un producto.

La ganancia surge de la relevancia, no de la decoración. Una tienda que pone distintivos a todo entrena a los clientes para ignorar los distintivos. Una tienda que marca lo cierto y lo útil, el artículo realmente rebajado, el stock realmente escaso, se gana el clic. La disciplina está en mostrar menos distintivos, pero acertados, no más.

Lo automático supera a lo manual

Los distintivos más útiles funcionan por reglas, para que sigan siendo correctos sin que nadie edite productos a mano. Una pegatina manual de “Oferta” que alguien olvidó retirar tras el fin de la promoción es peor que ningún distintivo, porque enseña a los clientes que tus distintivos mienten. Los distintivos basados en reglas lo evitan por completo:

• Oferta aparece en cuanto un producto está rebajado, y desaparece en el momento en que la promoción termina.
• Porcentaje de descuento lee los mismos datos de precio y muestra la magnitud de la bajada.
• Poco stock aparece cuando el inventario cae a un umbral que tú fijas o por debajo.
• Nuevo aparece durante un periodo fijado tras la publicación de un producto y luego se retira por sí solo.
• Superventas aparece en cuanto un producto supera una cifra de ventas que tú eliges.

Los distintivos manuales siguen teniendo su sitio para los casos que no se pueden expresar como regla, por ejemplo una recomendación de empleado seleccionada a mano o una nota estacional sobre un producto concreto. La herramienta adecuada ofrece ambos, con los distintivos automáticos haciendo la mayor parte del trabajo y un distintivo manual disponible allí donde de verdad necesitas anular. Marks for WooCommerce admite ambos: una serie de distintivos automáticos basados en reglas y un distintivo manual por producto.

Qué debe poder hacer una buena herramienta de distintivos

Antes de mirar un plugin concreto, ayuda saber qué distingue una herramienta de distintivos que merece instalarse de una que crea más problemas de los que resuelve. Usa esta lista como criterio de comprobación:

• Automatismo basado en reglas. Distintivos que se calculan solos a partir de datos de producto reales, de modo que siempre estén al día.
• Umbrales configurables. Tú decides qué cuenta como “nuevo”, “poco stock” o “superventas”, porque esas cifras difieren de una tienda a otra.
• Control por distintivo. Enciende o apaga cada tipo de distintivo de forma independiente y fija el texto de la etiqueta, para que la formulación encaje con tu marca y tu idioma.
• Renderizado solo con CSS. Un distintivo es una etiqueta y no necesita JavaScript. Representarlo con CSS no carga ni ejecuta ningún script adicional.
• Sin desplazamiento del diseño. El distintivo debería situarse en un espacio reservado, de modo que nunca desplace la imagen o el título al cargar la página, lo que protege tus Core Web Vitals.
• Control de la ubicación. Decide si los distintivos aparecen en las listas, en las páginas de producto individuales o en ambos sitios.
• Un aspecto que encaje con el tema. Forma, uso de mayúsculas y un límite sensato de cuántos distintivos pueden apilarse sobre una imagen.

Dos cosas quedan deliberadamente fuera de esta lista para una herramienta gratuita y universal: animaciones y personalización extensa por producto. Los distintivos que saltan o aparecen y desaparecen atraen la atención hacia sí mismos en lugar de hacia el producto, y el estilo por producto es un esfuerzo de mantenimiento que los distintivos basados en reglas pretenden precisamente evitar.

Cómo lo resuelve Marks

Marks es un plugin gratuito y de código abierto que coloca distintivos sobre los productos de WooCommerce y está construido en torno a la lista anterior. Todo lo que muestra se calcula en tu propio servidor a partir de datos que WooCommerce ya mantiene, es decir, precio, stock, ventas, datos de producto y clase de envío. No hay, por tanto, nada que sincronizar y nada se envía a ningún sitio.

Los distintivos automáticos

Marks ofrece siete distintivos automáticos: Oferta, Nuevo, Poco stock, Superventas, Porcentaje de descuento, Envío gratis y Sin stock. Cada uno tiene su propio interruptor de encendido/apagado y su propia etiqueta personalizada, de modo que puedas rebautizar “Oferta” como “Promo” o traducir cada etiqueta al idioma de tu tienda. Tres de ellos leen umbrales que tú controlas: la ventana de novedad (30 días por defecto) determina cuánto tiempo se muestra Nuevo, el límite de poco stock fija cuándo aparece Poco stock, y la cifra de ventas de superventas decide a partir de cuándo se activa Superventas. Envío gratis se detecta mediante la clase de envío de un producto. Como todo esto se basa en reglas, los distintivos siguen siendo correctos por sí solos mientras los precios cambian, el stock se mueve y los productos salen de la ventana de novedad.

El distintivo manual

Para los casos que no se pueden representar como regla, Marks añade un único distintivo manual: una etiqueta de toda la tienda con su color, que activas por producto. Fijas la etiqueta y el color una vez en la página de ajustes de Marks y luego los asignas a productos concretos mediante el metadato de producto _marks_manual_text (con un _marks_manual_style opcional). Es la herramienta adecuada para una recomendación de empleado o una nota puntual, mantenida deliberadamente sencilla para que no se convierta en un proyecto de estilo por producto.

Renderizado y ubicación

Cada distintivo de Marks se dibuja con CSS y se sitúa sobre la imagen del producto, de modo que no añade JavaScript ni provoca desplazamiento del diseño al cargar la página. Los distintivos aparecen en la página de producto individual y en las listas de tienda, categoría y etiqueta, y mediante el control de ubicación eliges páginas individuales, listas o ambas. El control de presentación abarca la forma (píldora o rectángulo), el uso de mayúsculas y un límite por contexto, para que una sola imagen no desaparezca nunca bajo cinco distintivos superpuestos. Hay además un ajuste opcional que permite ocultar el propio símbolo de oferta estándar de WooCommerce cuando el distintivo de Oferta de Marks está activo, para que ambos no se estorben.

El shortcode

Si quieres colocar distintivos en un lugar fuera de las plantillas de producto habituales, por ejemplo en una página, en una entrada o en un widget, Marks proporciona el shortcode [marks_badges]. Sin atributos, usa el producto actual dentro de un bucle o en una página de producto individual. Con id te diriges a un producto concreto y con context (single o loop) eliges el estilo de renderizado, por ejemplo [marks_badges id="123" context="loop"].

Configuración

Hasta que los distintivos estén activos pasan solo unos pocos minutos:

1. Instala el plugin desde Plugins → Añadir nuevo o súbelo a /wp-content/plugins/marks. WooCommerce debe estar instalado y activo.
2. Actívalo.
3. Abre el menú superior Marks, activa los distintivos mediante el interruptor global y elige qué distintivos automáticos deben aparecer.
4. Ajusta los umbrales (ventana de novedad, límite de poco stock, cifra de ventas de superventas) a tu tienda, fija las etiquetas deseadas y elige la ubicación y el aspecto.

Esa es toda la configuración. Los ajustes se sanean al guardar y se limitan a valores admisibles, el plugin está listo para traducir con un archivo POT incluido, declara la compatibilidad con HPOS y con los bloques de carrito y caja, y elimina sus datos al desinstalar sin dejar rastro.

Consejos prácticos

Una herramienta aporta el mecanismo, pero cómo la emplees decide si los distintivos ayudan o se convierten en ruido. Unas cuantas indicaciones:

• Muestra menos distintivos, pero ciertos. Resiste la tentación de marcarlo todo. El límite por contexto existe por una buena razón: dos o tres distintivos relevantes se leen con claridad, seis no.
• Ajusta los umbrales a tu tienda. “Poco stock” significa algo distinto para un fabricante que vende diez unidades que para un almacén que coloca miles. Fija el límite de poco stock y la cifra de superventas en valores que de verdad sean significativos para ti.
• Adapta la ventana de novedad al ritmo de tu catálogo. Una tienda que añade productos cada semana quiere una ventana de novedad más corta que otra que renueva un surtido cada temporada, para que Nuevo señale lo que realmente ha cambiado.
• Escribe las etiquetas en tu idioma. El texto de etiqueta personalizado está ahí para que los distintivos suenen a tu tienda y no a un plugin genérico. Mantenlas cortas, un distintivo se lee de un vistazo.
• Cuida el símbolo de oferta estándar. Si activas el distintivo de Oferta de Marks, activa la opción que oculta el símbolo de oferta integrado de WooCommerce, para no mostrar dos marcas en competencia sobre la misma imagen.

Marks frente a WooCommerce estándar

El núcleo de WooCommerce muestra sobre los artículos rebajados un único símbolo de “Oferta” y nada más. Esta es la diferencia específicamente en los distintivos de producto:

Función	WooCommerce estándar	Marks
Tipos de distintivo	Solo Oferta	Oferta, Nuevo, Poco stock, Superventas, Porcentaje de descuento, Envío gratis, Sin stock
Distintivos automáticos basados en reglas	Solo Oferta	Sí, siete reglas con umbrales configurables
Texto de etiqueta personalizado	No	Sí, por distintivo
Distintivo manual	No	Sí, uno por producto
Control de la ubicación	No	Página individual, listas o ambas
Control de presentación	No	Forma, uso de mayúsculas, límite por contexto
Ubicación por shortcode	No	[marks_badges]
Renderizado	Depende del tema	Solo CSS, sin JavaScript
Estabilidad del diseño	no disponible	Sin desplazamiento del diseño
Programación, reglas condicionales, distintivos de imagen, A/B	No	Sí (PRO)
Coste	Gratis (núcleo)	Gratis (GPL); PRO añade campañas, condiciones, distintivos de imagen y A/B

Gratis frente a PRO

El plugin gratuito Marks es una herramienta de distintivos completa, no un reclamo: siete distintivos automáticos con etiquetas y umbrales personalizados, un distintivo manual, control de ubicación y aspecto, el shortcode y el renderizado exclusivamente con CSS están todos incluidos. Marks Pro es un add-on de pago que requiere el plugin gratuito instalado y activo, y se construye sobre él para tiendas impulsadas por promociones y de alto volumen:

• Distintivos programados y segmentados. Una página de administración propia en la que defines distintivos de campaña con una etiqueta, colores personalizados, una ventana opcional de fecha de inicio y fin y un control de segmentación por producto, categoría o etiqueta concretos. Cada distintivo se renderiza automáticamente solo dentro de su ventana temporal y acorde con sus objetivos.
• Reglas de visualización condicionales. Reglas de toda la tienda que renderizan un distintivo con estilo cuando un producto cumple una condición, por ejemplo la pertenencia a una categoría, un precio por encima o por debajo de un umbral, o un stock en o por debajo de una cantidad.
• Distintivos de imagen. Una URL de distintivo de imagen por producto para un certificado o un logotipo de marca, renderizado a una altura fija y conservando la relación de aspecto, de modo que no desplace el diseño.
• Conjuntos de etiquetas para test A/B. Etiquetas de distintivo en competencia que rotan entre visitantes, con cookies persistentes y contadores de impresiones por variante, para que puedas probar qué formulación gana de verdad.

Si tus distintivos son hechos estáticos sobre los productos, el plugin gratuito te cubre. Si realizas campañas de tiempo limitado o quieres probar etiquetas, PRO se gana su sitio.

En resumen

Los distintivos de producto son una pequeña incorporación con gran efecto de palanca: hacen que los productos adecuados destaquen y le dan a los clientes un motivo para hacer clic. Prefiere distintivos automáticos y basados en reglas, para que sigan siendo correctos mientras cambian los precios, el stock y la antigüedad del producto, mantenlos pocos y ciertos, para que conserven su significado, y renderízalos solo con CSS, para que las páginas de listas sigan siendo rápidas y estables. El plugin gratuito Marks te da siete distintivos automáticos, un distintivo manual, etiquetas personalizadas, umbrales y control de ubicación y aspecto, todo solo con CSS, sin JavaScript y sin desplazamiento del diseño. Marks Pro añade campañas programadas, reglas condicionales, distintivos de imagen y conjuntos de etiquetas para test A/B, en cuanto estés listo para realizar promociones y probar qué funciona.