Barra de envío gratis de WooCommerce: progreso hacia el objetivo

Un cliente que sabe exactamente cuánto le falta por añadir para conseguir el envío gratis se comporta de forma distinta a uno que no lo sabe. El primero tiene una meta y un motivo para seguir comprando; el segundo tiene, en el mejor de los casos, un recuerdo vago de una regla escondida en algún lugar de las condiciones. El envío gratis es uno de los motivos más potentes para meter otro artículo en el carrito, pero solo funciona como motivación cuando la meta es visible justo en el momento en que el cliente decide. Una barra de progreso de envío convierte una regla estática en una meta viva, que cuenta hacia atrás y aparece directamente en el carrito y en el checkout. Esta guía explica qué hace una barra así, por qué mueve carritos, qué distingue una barra útil de una perjudicial y cómo lo resuelve Nudge.

Qué es una barra de progreso de envío y por qué cuenta

Una barra de progreso de envío es un pequeño indicador de progreso que muestra a los clientes cuánto más deben gastar para desbloquear el envío gratis. A medida que los artículos entran y salen del carrito, la barra se llena y el importe que falta cuenta hacia atrás. Al alcanzarse el umbral, pasa de un mensaje de «esto es lo que falta» a un mensaje de éxito que confirma que se ha cumplido la meta.

El motivo por el que esto cuenta está en el comportamiento, no en la estética. «Envío gratis a partir de 50 euros», escondido en sus condiciones de envío, no logra nada para un cliente que tiene el carrito justo en 42 euros, porque no tiene la cifra ante los ojos y no la va a buscar a propósito. Muestre esa misma regla como «Añade 8,00 euros más para el envío gratis» justo encima de los totales del carrito, y habrá fijado una meta concreta y alcanzable, justo en el instante en que alguien sopesa si añade algo más. La distancia entre «casi lo consigues» y «desbloqueado» es precisamente el empujón que eleva el valor medio de pedido, sin ningún descuento.

Hay una cara B que conviene nombrar con honestidad: una barra de progreso solo ayuda si la cifra que muestra es correcta. Una barra que muestra el umbral equivocado, va por detrás del carrito o parece permanentemente completada es peor que ninguna, porque enseña a los clientes a ignorarla. Por eso los detalles de implementación de más abajo son tan importantes como la idea misma.

En qué debería fijarse

No toda barra de progreso de envío ayuda. Algunas propiedades distinguen una que se gana su sitio de otra que perjudica la página en silencio:

• Un umbral correcto. El importe de la barra debe coincidir con la regla real de envío gratis. La forma más segura de lograrlo es leerlo directamente del método de envío de WooCommerce, de modo que la cifra de la barra y la cifra que realmente concede el envío gratis nunca diverjan tras un cambio de precio o de regla.
• Actualizaciones en vivo. La barra debería volver a renderizarse con cada cambio del carrito y no mostrar una cifra obsoleta de la carga de página. Si un cliente añade un artículo y el importe que falta no se mueve, la barra ha perdido su confianza.
• Sin desplazamiento del diseño. Una barra que entra de golpe solo después de montarse la página empuja el contenido hacia abajo y perjudica los Core Web Vitals. La barra debería reservar su espacio antes de renderizarse, para que nada salte.
• Frontend ligero. Una barra de progreso no necesita una biblioteca de JavaScript pesada. JavaScript puro mantiene la tienda rápida y no carga otra dependencia sobre la página del carrito.
• Accesibilidad. Un rol de barra de progreso real con valores ARIA, no solo una franja de color, para que los lectores de pantalla transmitan la misma meta que ven los clientes videntes.
• Estado vacío con sentido. Cuando no hay ninguna meta configurada, el carrito está vacío o la función se ha desactivado, la barra debería ocultarse en lugar de mostrar algo defectuoso o permanentemente completado.
• Adaptación sencilla al tema. Los colores y tamaños deberían poder ajustarse mediante CSS, sin editar el marcado, para que la barra encaje con su marca y tenga en cuenta el modo oscuro.

Cómo lo resuelve Nudge

Nudge for WooCommerce es un plugin gratuito y de código abierto que se centra exactamente en este problema, y la edición gratuita es una barra de progreso de envío completa, no una demo recortada. Cada una de las siguientes funciones forma parte del plugin gratuito.

• Umbral automático desde WooCommerce. En el modo automático predeterminado, Nudge lee el pedido mínimo de sus métodos de envío gratis activados y usa el importe más pequeño de todas sus zonas de envío, de modo que no tiene que mantener la cifra en dos sitios. Si prefiere fijar una cifra fija, puede teclear un importe fijo en el modo manual, y ese mismo importe sirve además de reserva si el modo automático no encuentra un método de envío adecuado.
• Actualizaciones en vivo con un script diminuto. La barra se vuelve a renderizar con el carrito y anima el ancho con fluidez entre estados, con un script pequeño que no trae jQuery propio. Para los clientes que tienen fijado prefers-reduced-motion, el movimiento se suprime.
• Carrito y checkout, clásico y bloques. Nudge se renderiza en las plantillas clásicas de carrito y checkout y en los bloques de carrito y checkout de WooCommerce. Usted activa cada ubicación de forma independiente en los ajustes, de modo que puede mostrar la barra en el carrito, en el checkout o en ambos sitios.
• Accesible por defecto. Nudge proporciona un role=progressbar real con aria-valuenow, aria-valuemin y aria-valuemax, además de un mensaje de texto legible, de modo que el progreso se anuncia y no se deja como una franja de color muda.
• Cero desplazamiento del diseño. La barra reserva su altura antes de renderizarse, de modo que añadir la barra no aporta ningún CLS a la página.
• Adaptable al tema y compatible con modo oscuro. Los colores y tamaños se exponen como propiedades personalizadas de CSS (--nudge-*), y la barra se adapta a los esquemas de color oscuros, de modo que su tema puede recolorearla sin tocar el marcado.
• Mensajes editables con un marcador de posición. Usted escribe los mensajes de progreso y de éxito. El mensaje de progreso admite el marcador de posición {amount}, que se sustituye por el importe que falta en la moneda de su tienda, de modo que «¡Añade {amount} más para el envío gratis!» se convierte en el frontend en «¡Añade 8,00 euros más para el envío gratis!».
• Silenciosa cuando no hay nada que mostrar. Si la barra está desactivada, el carrito está vacío o no se puede determinar ningún umbral, Nudge no renderiza absolutamente nada, y con la función desactivada sus estilos y scripts ni siquiera se cargan en el frontend.
• Autónomo y limpio. Nudge no hace peticiones HTTP externas: sin analítica, sin fuentes remotas, sin llamadas de licencia. Solo guarda dos opciones en su propia base de datos, incluye un archivo POT para la traducción, elimina sus opciones al desinstalarlo y declara compatibilidad con HPOS y con los bloques de carrito y checkout.

Si no hay ningún objetivo de envío gratis configurado, Nudge oculta la barra en lugar de mostrar una defectuosa o permanentemente completada, y se mantiene así del lado correcto de la regla de que una barra incorrecta es peor que ninguna.

Cómo configurarla

Poner una barra funcional en marcha solo lleva unos minutos:

1. Instale el plugin desde Plugins → Añadir nuevo, o súbalo a /wp-content/plugins/nudge. WooCommerce debe estar instalado y activo.
2. Actívelo. Nudge se distribuye activado, con las ubicaciones de carrito y checkout encendidas por defecto.
3. Vaya a WooCommerce → Nudge. Compruebe que la barra está activada y elija dónde aparece: en el carrito, en el checkout o en ambos sitios. En ambos a la vez, la meta queda a la vista durante todo el proceso de compra.
4. Deje la fuente del umbral en Automático si tiene un método de envío gratis de WooCommerce, para que la barra siga su regla real. Cambie a Manual e introduzca un importe fijo si prefiere fijar la cifra a mano; ese importe sirve además de reserva automática.
5. Edite si lo necesita los mensajes de progreso y de éxito. La página de ajustes muestra una vista previa en vivo de cada mensaje, de modo que ve lo que leerán los clientes.

La página de ajustes ofrece bajo cada campo una ayuda contextual y una vista previa de los mensajes, de modo que no tiene que consultar documentación mientras configura.

Consejos prácticos

La barra aporta el mecanismo; cómo la utilice decide si realmente eleva los carritos.

• Prefiera el modo automático. Leer el umbral de su método de envío es con diferencia la mejor forma de mantener honesta la barra. En cuanto teclea una cifra fija, ha creado un segundo sitio que debe actualizar cada vez que cambie la regla de envío, y el día en que ambas no coincidan, la barra empieza a mentir a los clientes.
• Fije un objetivo que la gente pueda alcanzar de verdad. Un objetivo de envío gratis muy por encima de su valor medio de pedido frustra más de lo que motiva. Apunte algo por encima de su carrito típico, para que «un artículo más» se sienta alcanzable y no como una segunda compra.
• Muéstrela al menos en el carrito. El carrito es donde se toma la decisión de añadir otro artículo. El checkout es un refuerzo útil, pero es en el carrito donde la barra se gana el pan.
• Escriba un mensaje que nombre la recompensa. «¡Añade {amount} más para el envío gratis!» es más claro que una cifra a secas, y el mensaje de éxito es un pequeño momento de recompensa que merece la pena redactar bien.
• Haga que la barra encaje con su marca. Como los colores son propiedades personalizadas de CSS, unas pocas líneas de CSS hacen que la barra parezca nativa en lugar de sobrepuesta, tanto en temas claros como oscuros.

Nudge frente a WooCommerce estándar

WooCommerce puede ofrecer envío gratis a partir de un umbral, pero no le dice al cliente lo cerca que está de conseguirlo. Esta es la diferencia específica para la barra de progreso:

Función	WooCommerce estándar	Nudge (gratuito)
Envío gratis a partir de un umbral	Sí, como método de envío	Usa exactamente ese método de envío
Muestra cuánto falta todavía	No	Sí, el importe que falta en vivo
Umbral mantenido sincronizado	N. d.	Leído automáticamente del método de envío
Actualización al cambiar el carrito	No	Sí, en vivo
Ubicación en carrito y checkout	N. d.	Ambos, clásico y bloques
Desplazamiento del diseño (CLS)	N. d.	Cero, la barra reserva la altura
jQuery obligatorio	N. d.	No, script diminuto de JavaScript puro
prefers-reduced-motion respetado	N. d.	Sí
Barra de progreso accesible	N. d.	Sí, role=progressbar con ARIA
Mensajes editables	N. d.	Sí, con marcador de posición {amount}
Estado vacío sin objetivo	N. d.	La barra se oculta, los archivos no se cargan
Coste	Gratuito (el núcleo no tiene barra)	Gratuito; PRO añade barra flotante, objetivos por zona, recompensas escalonadas, análisis

Gratuito frente a PRO

La edición gratuita es una barra de progreso de envío completa: umbral automático o manual, actualizaciones en vivo, ubicación en carrito y checkout, marcado accesible, mensajes editables, adaptación al tema y un estado vacío limpio están todos incluidos.

Nudge PRO es un complemento de pago aparte que requiere el plugin gratuito instalado y activo; amplía el plugin gratuito en lugar de sustituirlo y se distribuye a través de Freemius. PRO añade una barra flotante de minicarrito que se muestra en cada página de la tienda (no solo en carrito y checkout), de modo que la meta acompaña a los clientes mientras navegan, con ubicación arriba o abajo y con su propio mensaje y sus propios colores. Añade umbrales específicos por zona, de modo que el modo automático puede usar el importe mínimo de envío gratis de la zona de envío correspondiente al cliente en lugar del importe más pequeño de todas las zonas. Añade recompensas escalonadas, que encadenan hasta tres hitos de valor de carrito con sus propios mensajes y marcas a lo largo del carrito, el checkout y la barra flotante. Y añade un análisis de conversión, que reúne las visualizaciones de la barra y los umbrales alcanzados por ubicación en WooCommerce → Nudge Analytics. Estas funciones están reservadas a PRO; la edición gratuita cubre un único umbral de envío gratis en el carrito y en el checkout.

En resumen

Una barra de progreso de envío funciona cuando muestra el importe que realmente falta, se actualiza en vivo, sigue siendo accesible y no provoca desplazamiento del diseño. La configuración más limpia lee el umbral directamente de su método de envío de WooCommerce, de modo que la cifra nunca diverge, y oculta la barra cuando no hay una meta real que mostrar. Nudge hace todo esto gratis en el carrito y en el checkout, y PRO añade una barra flotante, objetivos por zona, recompensas escalonadas y análisis cuando quiera ir más lejos.