Skip to content

Anchor

Anchor añade una barra adhesiva y ligera de añadir al carrito en las páginas de producto individuales de WooCommerce. Permanece oculta hasta que el comprador pasa de largo el formulario nativo de añadir al carrito. Entonces se desliza desde la parte inferior de la pantalla y muestra el título del producto, el precio y un botón de compra, para que la acción de compra siga a un toque de distancia en una página larga.

La barra queda fijada al borde inferior del viewport y empieza hidden, así que nunca ocupa espacio en el flujo del documento y no provoca Cumulative Layout Shift. En un producto simple y disponible, el botón de la barra es un formulario real de añadir al carrito. En un producto variable, la barra refleja el formulario nativo de variaciones de WooCommerce: hasta que el comprador elige una combinación válida, muestra un botón de Elegir opciones que vuelve a los selectores. Cuando encuentra una variación, copia su precio y su estado de stock y activa el botón de compra.

La edición gratuita es el producto completo bajo GPL, no una prueba con límites ocultos.

  • Una sola barra adhesiva en las páginas de producto individuales, visible cuando el comprador ha pasado el formulario principal de añadir al carrito.
  • Dos ajustes: un interruptor general y un umbral de scroll en píxeles (0-5000, valor por defecto 300). Eso es toda la pantalla de ajustes.
  • Con variaciones, escucha los eventos nativos de WooCommerce found_variation, reset_data y hide_variation; Anchor no incluye su propio jQuery.
  • Accesible, con región ARIA (role="region", aria-label), aria-hidden al mostrarse, un área viva para el precio en productos variables, un foco visible y prefers-reduced-motion.
  • Adaptada a claro y oscuro, los colores cambian según prefers-color-scheme y heredan los colores predefinidos del tema cuando están disponibles.
  • No carga nada fuera de ahí, el CSS y el JS sólo se encolan en is_product() y sólo cuando la barra está activada; el script se carga con defer y en el pie.

La posición de la barra es fija abajo, no arriba. No hay controles por dispositivo, y la barra sólo muestra título, precio y botón, sin miniatura ni campo de cantidad. Es deliberado: así sigue siendo estrecha y correcta sin configuración extra. El punto de aparición es lo único que se ajusta, mediante el umbral de scroll.

  • Free en WordPress.org, la barra adhesiva con el interruptor, el control del umbral de scroll y la sincronización de precio y disponibilidad en variaciones.
  • Pro (Anchor Pro), color y etiqueta del botón personalizados, reglas por producto y categoría, programación y analíticas.

Si usas Polski for WooCommerce con el módulo de barra adhesiva activado, no instales Anchor también. Elige una sola solución para no tener dos barras en la misma página.

  • Primeros pasos, instalar, activar la barra, ajustar el umbral y probarla en la tienda.
  • Configuración, los dos ajustes, lo que queda fijo por diseño y los hooks de extensión.
  • Uso de la barra adhesiva, qué ve exactamente el comprador en productos simples y variables.