Barra de compra fija en WooCommerce: botón siempre visible

En una página de producto larga de WooCommerce, el botón del carrito suele ser lo primero que se sale del campo visual al hacer scroll. Para cuando un cliente ha leído la descripción, revisado la galería, ojeado una tabla de datos técnicos y repasado las reseñas, el precio y el botón de compra quedan muy por encima del área visible. El cliente ha hecho todo el trabajo de decisión, y entonces la página le pide un poco más: volver a hacer scroll hacia arriba para ejecutar la decisión. Una barra de carrito fija cierra esa brecha manteniendo el precio y el botón al alcance durante toda la visita. Esta guía explica qué es la función, por qué ayuda a una tienda, qué necesita una buena implementación y cómo el plugin gratuito Anchor añade una barra así a WooCommerce.

Qué es una barra de carrito fija

Una barra de carrito fija es una tira estrecha y fijada que mantiene visibles el precio y el botón de compra de un producto al hacer scroll.

Se sitúa por lo general en el borde inferior de la página de producto individual y muestra tres cosas: el título del producto, el precio actual y un botón del carrito. La palabra clave es fijada. Como la barra está fijada al viewport y no a un punto del documento, se mueve con el cliente en lugar de desaparecer hacia arriba durante la lectura. Esté donde esté en la página, la barra se sitúa en el mismo lugar en el borde inferior de la ventana.

La idea es sencilla. El área principal del carrito arriba en la página está perfectamente bien mientras está en pantalla, pero pierde su utilidad en el momento en que el cliente pasa de largo. A partir de ahí, el botón de compra existe, pero es inalcanzable sin volver a hacer scroll. La barra fija es una segunda copia, siempre presente, justo del único botón que más importa, de modo que la decisión de compra puede ejecutarse en cualquier momento, en cuanto se ha tomado.

Vale la pena aclarar lo que la barra no es. No es un reemplazo del formulario principal del producto, y no es un popup ni un interstitial que interrumpe al cliente. Es una superficie secundaria y discreta que solo interviene cuando la primaria ha abandonado la pantalla.

Por qué ayuda a una tienda

La barra elimina un punto de fricción pequeño pero real: tener que hacer scroll hacia arriba para comprar. Esa fricción suena insignificante, y en una sola página lo es, pero afecta justo a aquellas páginas en las que hay más en juego, y por cada paso adicional que exiges, una pequeña parte de los clientes se marcha. Reducir el paso tiende a ayudar más en cuatro situaciones.

• Páginas largas. Las descripciones extensas, las tablas de datos técnicos, las galerías de imágenes y las secciones de reseñas empujan el botón de compra muy hacia arriba. Cuando un cliente llega abajo, puede estar a varias alturas de pantalla de él. La barra lo mantiene a un solo toque o clic de distancia.
• Compra desde el móvil. Las pantallas de los smartphones son pequeñas y se hace scroll constantemente, de modo que el botón principal desaparece del campo visual casi de inmediato. Una barra fija es especialmente valiosa aquí, porque es precisamente aquí donde la distancia entre “lo quiero” y “dónde está el botón” es mayor.
• Compras meditadas. Cuando un cliente lee con cuidado antes de decidir, el momento de la decisión es el momento que hay que aprovechar. Si ejecutar esa decisión exige volver a buscar el botón, surge una pausa en la que puede distraerse, ser interrumpido o entrarle dudas.
• Productos variables. Los clientes comparan opciones y precios mientras hacen scroll. Una barra que refleja la variación elegida mantiene el precio adecuado y el botón correcto a la vista, de modo que la comparación y la compra ocurren en el mismo lugar.

Nada de esto garantiza una tasa de conversión más alta; numerosos factores deciden si una visita se convierte en pedido. Pero mantener el botón de compra alcanzable es un cambio de bajo coste y bajo riesgo, y elimina un punto de fricción que de otro modo solo podrías resolver haciendo más corta cada página de producto.

Qué necesita una buena barra fija

No todas las implementaciones son equivalentes, y una barra fija mal hecha es peor que ninguna: una barra que desplaza el diseño, bloquea el renderizado o tapa contenido te cuesta más de lo que elimina en fricción. Usa lo siguiente como lista de comprobación, tanto si construyes, compras o instalas.

• Sin desplazamiento de diseño. La barra debería estar fijada al viewport y arrancar oculta, para que su aparición no desplace otro contenido ni perjudique tu valor de Cumulative Layout Shift. Una barra que ocupa espacio en el flujo del documento y luego aparece es un problema para los Core Web Vitals.
• Carga esbelta y dirigida. Su hoja de estilos y su script deberían cargar solo en las páginas de producto individuales, no en toda la tienda, y el script debería estar incluido de forma diferida (deferred), para que no bloquee el renderizado de la página.
• Detección de variaciones. En productos variables, la barra debería seguir el formulario de variación nativo de WooCommerce y actualizar el precio, el estado de existencias y el botón de compra en cuanto cambian las opciones, en lugar de mostrar un precio “desde” desactualizado.
• Un disparador sensato. La barra debería aparecer en cuanto el cliente ha pasado de largo el botón principal, de modo que solo reemplace el botón que ha abandonado la pantalla. Un umbral configurable permite adaptar esa distancia a tu plantilla.
• Accesibilidad. Fíjate en una región ARIA con una etiqueta para lectores de pantalla, un estado de foco visible y el respeto de la preferencia prefers-reduced-motion, para que la animación de aparición se pueda desactivar.
• Manejo limpio de los datos. Una herramienta enfocada guarda unos pocos ajustes y nada por producto, mantiene el autoloading desactivado y elimina sus datos cuando la borras. No debería llamar a casa ni cargar recursos desde un CDN externo.

Cómo lo hace Anchor

Anchor - Sticky Add to Cart Bar es un plugin gratuito de código abierto que añade exactamente eso: una barra de carrito fija y estrecha en el borde inferior de las páginas de producto individuales de WooCommerce. Permanece oculta hasta que el cliente pasa de largo el botón principal del carrito, y entonces se desliza a la vista con el título del producto, el precio actual y un botón de compra, de modo que el botón del carrito sigue siendo alcanzable incluso en páginas largas.

Todo el plugin está diseñado para no estorbar. La barra se posiciona con CSS position: fixed y arranca oculta, de modo que queda fuera del flujo del documento y al aparecer no desplaza otro contenido ni provoca un desplazamiento de diseño. Su hoja de estilos y su script cargan solo en las páginas de producto individuales, y el script está incluido de forma diferida, de modo que el coste de rendimiento se limita a las páginas en las que la barra se usa de verdad.

En productos variables, la barra sigue el formulario de variación nativo de WooCommerce. En cuanto el cliente selecciona opciones, el precio, el estado de existencias y el botón de compra se actualizan según la variación elegida. Mientras no se ha elegido ninguna variación, la barra muestra un botón “Elegir opciones” que vuelve a hacer scroll hacia los selectores, en lugar de dejar que el cliente no añada nada al carrito. Para ello, Anchor no carga una copia propia de jQuery; reacciona a los eventos de variación que WooCommerce dispara de todos modos, lo que mantiene pequeño el script y evita conflictos con el tema.

La barra se entrega como una superficie accesible. Está marcada como una región ARIA con una etiqueta para lectores de pantalla y un estado de foco visible, respeta la preferencia prefers-reduced-motion e incluye un estilo de modo oscuro, de modo que encaja en un tema oscuro sin esfuerzo adicional. Anchor declara compatibilidad con HPOS y con los bloques de carrito y pago, de modo que se integra limpiamente en una instalación moderna de WooCommerce.

En el plano de los datos, Anchor no establece ninguna conexión con servicios externos. No envía datos desde tu sitio ni carga nada desde un CDN externo; su hoja de estilos y su script se sirven desde tu propia instalación, y el script del frontend solo lee un pequeño objeto de configuración incrustado en línea con el umbral de scroll. Guarda únicamente dos opciones con el autoloading desactivado, el interruptor de activación junto con el umbral, así como una versión de base de datos, no mantiene datos por producto y elimina ambas opciones cuando borras el plugin. No envía correos ni realiza peticiones HTTP propias.

Configuración

Poner la barra en directo lleva solo unos minutos.

1. Instala y activa Anchor. Instálalo a través de Plugins → Añadir nuevo o súbelo a /wp-content/plugins/anchor. WooCommerce debe estar instalado y activo primero, ya que la barra lee el precio, las existencias y el formulario del carrito del producto desde el propio WooCommerce.
2. Activa la barra. Ve a WooCommerce → Anchor y enciende la barra.
3. Fija el umbral de scroll. En la misma pantalla, define a qué distancia hacia abajo en la página (en píxeles, 0 a 5000) debe aparecer la barra. Una elección habitual es mostrarla en cuanto el cliente ha pasado de largo el botón principal del carrito.
4. Compruébalo en un producto real. Abre una página de producto larga en escritorio y en móvil, haz scroll hacia abajo y confirma que la barra se desliza con el título, el precio y el botón correctos.
5. Prueba un producto variable. Elige distintas opciones y confirma que el precio, la disponibilidad y el botón de la barra se actualizan según la variación elegida y que “Elegir opciones” vuelve a hacer scroll hacia arriba antes de que se fije una variación.

Consejos prácticos

Una barra fija es una función pequeña, pero unas cuantas decisiones hacen que se sienta coherente en lugar de insistente.

• Adapta el umbral a tu plantilla. El valor predeterminado está bien, pero el ideal es “poco después de que el botón principal desaparezca del campo visual”. Si tu área del carrito está muy arriba en la página, un umbral menor muestra la barra antes; con un área hero alta, uno mayor evita que aparezca mientras el botón principal aún es visible.
• No dupliques las llamadas a la acción. La barra fija es la copia secundaria del botón de compra. Evita poner un segundo widget flotante, una burbuja de chat y un popup de cupón en la misma esquina de la pantalla; en el móvil compiten por los mismos pocos píxeles, y la barra sale perdiendo.
• Compruébalo frente a una cabecera fija del tema. Algunos temas fijan una cabecera en el borde superior del viewport. La barra se sitúa abajo, de modo que rara vez chocan, pero merece la pena un vistazo rápido en el móvil, donde el espacio vertical es escaso.
• Ten en cuenta los estados de agotado. Anchor muestra el texto y el enlace adecuados para productos no comprables, de modo que la barra no promete una compra que no puede completarse. Comprueba de forma aleatoria un producto agotado para confirmar que la barra se comporta como esperas.
• Escribe el texto del botón una sola vez, en WooCommerce. Los productos simples usan el propio texto del carrito de WooCommerce, de modo que un cambio ahí mantiene el formulario principal y la barra al unísono.

Anchor frente al estándar de WooCommerce

WooCommerce renderiza un formulario de carrito perfectamente utilizable, pero se sitúa en un punto de la página y se sale de la vista al hacer scroll junto con todo lo demás. Esta es la diferencia específica para la función de barra fija.

Capacidad	WooCommerce estándar	Anchor
Botón de compra tras pasar de largo el formulario principal	Desaparecido hasta que vuelves a hacer scroll	Barra fija fijada al viewport
Punto de aparición configurable	Ninguno	Umbral de scroll en píxeles (0 a 5000)
Precio y existencias de la variación en la barra	n. d.	Sigue el formulario de variación nativo
Desplazamiento de diseño al aparecer la barra	n. d.	Ninguno; fijada y oculta hasta que se necesita
Carga de los recursos	n. d.	Solo en páginas de producto individuales, script diferido
Accesibilidad de la barra	n. d.	Región ARIA, estado de foco, compatibilidad con movimiento reducido
Estilo de modo oscuro	Depende del tema	Estilo de modo oscuro incorporado
Servicios externos	Ninguno	Ninguno; nada abandona tu sitio
Coste	Gratis (sin barra fija)	Gratis; PRO añade aspecto, ubicación, programación y analítica

Gratis frente a PRO

La edición gratuita es una barra fija completa, no un cebo: la barra en sí, el umbral de scroll configurable, la sincronización de precio y existencias consciente de las variaciones, el marcado de accesibilidad y el estilo de modo oscuro están todos incluidos, y la barra no se conecta con nada externo. Anchor Pro es una ampliación que requiere el plugin gratuito y se construye para tiendas que quieren más control. Añade un color propio para el botón de compra y una etiqueta propia como “Comprar ahora”, reglas de ubicación para mostrar la barra solo en productos seleccionados o para ocultarla en determinados productos y categorías, una programación de campañas, de modo que la barra solo aparezca en una ventana de inicio y fin, así como una analítica de conversión por producto que cuenta las visualizaciones de la barra, los clics en el botón y las acciones de carrito. Las opciones PRO se sitúan en la misma pantalla en WooCommerce → Anchor, y la analítica en WooCommerce → Anchor Analytics. Si solo necesitas la barra, la versión gratuita es la función completa.

En resumen

En una página de producto larga de WooCommerce, el botón de compra es lo primero que se sale de la vista, de modo que el cliente que acaba de decidirse a comprar tiene que volver a hacer scroll para ejecutar la decisión. Una barra de carrito fija elimina ese paso fijando el precio y el botón al viewport. Una buena barra aparece solo después de que el botón principal haya abandonado la pantalla, sigue las variaciones, carga solo donde se necesita y nunca desplaza el diseño. El plugin gratuito Anchor hace exactamente eso, con un umbral de scroll que tú defines, con sincronización de variaciones, marcado accesible y sin llamadas externas; Anchor Pro añade aspecto propio, reglas de ubicación, programación y analítica de conversión, si quieres ir más allá.