Barra de anuncios de WooCommerce: rebajas, envíos y avisos

Una barra de anuncios de la tienda es una de las formas más sencillas de comunicar algo importante a cada visitante en el momento en que llega. Tanto si lanzas una rebaja de fin de semana, recuerdas un plazo de envío antes de Navidad o señalas un umbral de envío gratis, una única barra en la parte superior de la página llega a todos, sin necesidad de correo ni de popup. El problema es que WooCommerce no incorpora una barra de anuncios propia. Por eso el mensaje suele acabar donde se pasa por alto: enterrado en la portada, escondido en la descripción de un producto o enviado en un correo que la mayoría de los compradores nunca abre. Esta guía explica qué es una barra de anuncios, cuándo usarla, cómo escribir una barra que de verdad se lea y cómo, con el plugin gratuito Notice, añades a WooCommerce una barra limpia, cerrable y accesible.

Qué es una barra de anuncios de la tienda

Una barra de anuncios de la tienda es una franja estrecha, de ancho completo, fijada en la parte superior de cada página, que lleva un mensaje breve para toda la tienda.

Se sitúa por encima de tu cabecera, de modo que es lo primero que lee un visitante, y suele combinar una única línea de texto con un botón opcional de llamada a la acción. El sentido es el alcance: cada página de tu tienda muestra el mismo mensaje, así que no dependes de que los compradores abran un correo o se fijen en un banner escondido en la portada. La barra es para toda la tienda de serie, y precisamente eso la hace útil para las pocas cosas que cada visitante realmente necesita saber.

A diferencia de un popup, una buena barra de anuncios no bloquea la página ni interrumpe la navegación. Se queda al margen, comunica una sola cosa y deja que el visitante la lea y siga adelante. Esa contención es todo el sentido del asunto. Un popup exige una decisión, una barra simplemente informa.

Cuándo usar una barra de anuncios

Una barra de anuncios funciona mejor para un único mensaje urgente y para toda la tienda. Los casos de uso más claros son:

• Rebajas y promociones. Anuncia un descuento, un código de cupón o una venta flash, con un enlace a la página de la rebaja.
• Umbrales de envío gratis. Di a los compradores cuánto tienen que gastar para desbloquear la entrega gratuita.
• Plazos de envío. Advierte a los clientes del último día de pedido para una entrega antes de un festivo o un fin de semana.
• Avisos de servicio. Señala retrasos en el almacén, un cierre temporal o tiempos de envío ampliados en horas punta.
• Cambios importantes de políticas. Remite a condiciones actualizadas, una nueva ventana de devolución o un horario estacional.

La regla general es: una idea por barra. Si intentas comunicar tres cosas a la vez, el comprador no capta ninguna. Una barra es un titular, no un tablón de anuncios.

Cómo escribir una barra que se lea

Una barra que se lee es corta, concreta y termina con una única acción.

1. Empieza por el beneficio o el plazo. “Envío gratis a partir de 200 PLN” o “Pide antes del viernes para recibir antes de las fiestas” supera a un vago “Oferta especial”.
2. Limítate a una línea. La barra es estrecha, sobre todo en el móvil. Así que elimina cada palabra que no aporte su peso.
3. Añade una única llamada a la acción. Un solo botón o enlace a la rebaja, a la categoría o a la página de política basta. Dos enlaces que compiten dividen la atención.
4. Usa cifras y fechas claras. Datos concretos como “ahorra un 20 %” o “hasta el 19 de diciembre” convencen más y son más honestos que los eslóganes.
5. Actualízala cuando cambie la oferta. Una barra caducada de “rebajas de verano” en otoño socava la confianza más rápido de lo que lo haría no tener ninguna barra.

Qué necesita una buena barra de anuncios

Configurar una barra de anuncios en WooCommerce se reduce a tres preguntas: dónde se inserta la barra, cómo se ve y cómo se comporta. Una solución limpia debería cubrir unos cuantos fundamentos, tanto si la construyes a mano como si instalas un plugin:

• Renderizado para toda la tienda. La barra debería aparecer en cada página del frontend mediante el hook wp_body_open del tema, de modo que se muestre por encima de la cabecera sin necesidad de editar archivos de plantilla. La mayoría de los temas modernos admiten este hook.
• Una forma segura de escribir el mensaje. Quieres poder insertar un enlace o algún resaltado sin abrir una puerta por la que cualquier HTML arbitrario llegue a cada página de tu tienda.
• Una llamada a la acción opcional. Un botón con etiqueta, con su propia URL y la opción de abrirlo en una pestaña nueva, para que la barra pueda generar clics y no solo informar.
• Colores acordes a la marca. Colores de fondo, de texto y de acento que decides tú, para que la barra parezca parte de la tienda y no un añadido.
• Un elemento de cierre. Deja que los compradores cierren la barra en cuanto la hayan visto, y recuerda esa decisión para que no moleste en cada visita.
• Recursos solo cuando está activa. Una barra bien construida carga su CSS y cualquier script de cierre solo cuando la barra está realmente encendida, de modo que una barra desactivada no cuesta nada.
• Accesibilidad incorporada. La barra debería ser una región con etiqueta, con un botón de cierre manejable por teclado, estilos de foco visibles y respeto por la preferencia de “movimiento reducido”.

La mayor parte de esto puedes programarlo a mano con un snippet, pero un snippet no te da una pantalla de ajustes, ni una vista previa en vivo, ni un tratamiento de HTML seguro, ni lógica de cierre. Un plugin dedicado te da todo eso sin que tengas que tocar archivos del tema, y mantiene la barra funcional cuando cambias de tema.

La accesibilidad y el rendimiento cuentan

Una barra de anuncios toca cada página, así que su calidad influye en toda tu tienda.

En cuanto al rendimiento, las barras más ligeras se renderizan como HTML puro en el servidor y prescinden por completo de frameworks de JavaScript en el frontend. Cargar la pequeña hoja de estilos solo cuando la barra está activada significa que una barra desactivada no añade nada a tus páginas y que no hay desplazamiento de diseño más allá de la propia altura de la barra. Esa es la diferencia entre una barra que permanece invisible en tus Core Web Vitals y una que ralentiza cada página por una única línea de texto.

En cuanto a la accesibilidad, la barra debería declararse como una región ARIA con etiqueta, para que los lectores de pantalla la anuncien, el botón de cierre debería poder manejarse por teclado, los estilos de foco deberían ser visibles y cualquier animación debería respetar la preferencia de “movimiento reducido” de un visitante. Una barra que falla en estos fundamentos molesta a algunos compradores y excluye a otros. Como la barra es lo primero en la página, una barra no accesible es el primer obstáculo con el que se topa un usuario de teclado o de lector de pantalla.

Cómo lo resuelve Notice

Notice - Announcement Bar for WooCommerce es un plugin gratuito que añade exactamente una barra para toda la tienda en la parte superior de tu tienda, con los controles descritos arriba y nada que no necesites.

Escribes el mensaje en un campo que acepta una pequeña lista blanca de HTML seguro: negrita, cursiva, enlaces y saltos de línea, nada más. Así puedes dar formato y enlazar sin abrir la página a marcado arbitrario. Puedes añadir un botón opcional de llamada a la acción con su propia etiqueta y URL, y definir si se abre en una pestaña nueva. Si dejas vacía la etiqueta del botón, la barra muestra solo texto. Para la apariencia, defines el color de fondo, de texto y de acento con selectores de color nativos, y un panel de vista previa en vivo en la pantalla de ajustes muestra la barra terminada mientras escribes. Así no tienes que guardar y recargar la tienda constantemente para comprobar el resultado.

La barra es cerrable en cuanto lo activas, con un elemento “Recordar durante (días)” con el que decides cuánto tiempo es válida la elección de un comprador. El cierre se guarda en el navegador del visitante mediante localStorage, sin cookies y sin datos personales, y editar el texto del mensaje vuelve a mostrar la barra automáticamente para todos. Así, un anuncio nuevo nunca queda oculto por un cierre antiguo. Pon los días a 0 para recordar el cierre de forma permanente.

Está construida para quedarse al margen. La barra se renderiza en el servidor en wp_body_open, el CSS carga solo cuando la barra está activada y tiene un mensaje, y el script de cierre carga solo cuando la barra es además cerrable. Una barra desactivada, por tanto, no añade nada a tus páginas. El marcado es HTML puro sin framework de JavaScript en el frontend, la barra es una región ARIA con botón de cierre manejable por teclado y estilos de foco visible, y respeta la preferencia de “movimiento reducido”. No hay desplazamiento de diseño más allá de la propia altura de la barra. El plugin está listo para traducción con un archivo POT incluido, elimina sus datos de forma limpia en la desinstalación y es compatible con HPOS y con los bloques de carrito y pago.

Configuración

Poner la barra en marcha lleva unos minutos:

1. Instala el plugin desde Plugins → Añadir nuevo, o súbelo a /wp-content/plugins/notice. WooCommerce debe estar instalado y activo.
2. Actívalo.
3. Ve a WooCommerce → Barra de anuncios, escribe tu mensaje, define tus colores y configura las opciones de enlace y cierre. La vista previa en vivo se actualiza mientras tanto.
4. Activa el interruptor central de activación. Si está apagado, no se renderiza nada en la tienda y no se carga ni CSS ni JavaScript.

Ese es todo el proceso. Hay una pantalla de ajustes, organizada en las tarjetas Mensaje, Enlace, Apariencia y Comportamiento, y la barra aparece en la parte superior de cada página del frontend en cuanto está activada.

Consejos prácticos para una barra que funcione

El plugin aporta el mecanismo, el criterio es tuyo. Unas cuantas indicaciones:

• Trata la barra como un único canal. Decide para qué está la barra esta semana y resiste la tentación de meter un segundo mensaje. Si tienes dos cosas que decir, di la más urgente y encuentra otro sitio para la otra.
• Ajusta los colores a tu marca, no a “llamar la atención”. Una barra que choca con el resto de la tienda se lee como un anuncio, y los compradores han aprendido a ignorar los anuncios. Una barra que usa tu propio color de acento se lee como parte de la tienda.
• Usa la ventana de cierre de forma deliberada. Una ventana corta de “recordar durante” encaja con una promoción de ritmo rápido que quieres que los visitantes recurrentes vuelvan a ver; una larga encaja con un aviso permanente, como un umbral fijo de envío gratis, que no hace falta repetir.
• Edita el texto cuando termine la oferta. Como cambiar el mensaje vuelve a mostrar la barra para todos, actualizar el texto es a la vez la forma de volver a dirigirte a los compradores que habían cerrado la barra anterior. Una barra vacía o desactivada es mejor que una caducada.
• Mantén el enlace honesto. Envía el botón exactamente a la página que promete el mensaje. Un botón de “Ir a la rebaja” que aterriza en la portada general es una pequeña promesa rota que cuesta confianza.

Notice frente a WooCommerce estándar

WooCommerce no tiene barra de anuncios alguna, así que sin plugin el mensaje tiene que vivir en una página, un área de widgets o un correo. Así se ve la diferencia específica para un aviso de toda la tienda:

Función	WooCommerce estándar	Notice
Barra para toda la tienda arriba de cada página	No incluida	Sí, renderizada en wp_body_open
Mensaje con formato seguro	no disponible	Negrita, cursiva, enlaces y saltos de línea
Botón de llamada a la acción	no disponible	Etiqueta, URL y opción de pestaña nueva opcionales
Colores propios con vista previa en vivo	no disponible	Fondo, texto y acento, con vista previa
Cerrable con elección recordada	no disponible	Sí, mediante localStorage, con ajuste de días
Volver a mostrar al cambiar el mensaje	no disponible	Automático cuando cambia el texto
Recursos solo cuando está activa	no disponible	CSS y script cargan solo cuando la barra está encendida
Accesibilidad	no disponible	Región ARIA, cierre por teclado, movimiento reducido
Coste	Gratis (ninguna barra)	Gratis; PRO añade analíticas, segmentación y más

Gratis frente a PRO

La versión gratuita es una herramienta completa para una barra: mensaje, CTA, colores, cierre, además del trabajo en accesibilidad y rendimiento, todo incluido y de sobra suficiente para la mayoría de las tiendas. Notice Pro es un complemento independiente, distribuido a través de Freemius, que requiere la instalación y activación del plugin gratuito y construye sobre su base. Añade analíticas de clics e impresiones en una pantalla de analíticas propia, segmentación por página, de modo que una barra aparezca solo en el catálogo de la tienda, en productos individuales o en carrito y pago, segmentación por rol para invitados, clientes con sesión iniciada o roles seleccionados, segmentación geográfica y por dispositivo por país y por móvil o escritorio, hasta cinco barras funcionando a la vez, cada una con sus propios ajustes, y pruebas A/B que comparan un mensaje y CTA de variante con resultados por variante. Si solo necesitas un mensaje claro para cada comprador, la barra gratuita es toda la respuesta; PRO es para tiendas que quieren dirigir, medir y probar con precisión lo que muestran.

La versión corta

WooCommerce no ofrece forma de poner un mensaje para toda la tienda ante cada visitante, así que las fechas de rebajas, los plazos de envío y los umbrales de envío gratis acaban donde los compradores los pasan por alto. Una buena barra de anuncios lo soluciona con una única franja cerrable y accesible en la parte superior de cada página, que no carga nada cuando está apagada. El plugin gratuito Notice añade exactamente eso: una barra con mensaje de formato seguro, CTA opcional, tus propios colores, un cierre recordado y una vista previa en vivo, renderizada en el servidor y con recursos que solo cargan cuando la barra está activa. Cuando estés listo para dirigir, medir y probar, Notice Pro añade analíticas, segmentación por página, rol, región y dispositivo, varias barras y pruebas A/B por encima.