En este nuevo tutorial aprenderemos a crear un Sticky Add to Cart para WooCommerce utilizando Divi 5, sin necesidad de instalar plugins adicionales.
La idea es sencilla pero muy útil: cuando un usuario está viendo un producto y hace scroll hasta dejar atrás el botón original de Añadir al carrito, aparecerá automáticamente una barra fija en la parte inferior de la pantalla desde la que podrá continuar con su compra.
Pero no vamos a crear simplemente un botón flotante.
Nuestro Sticky Add to Cart estará conectado directamente con WooCommerce y mostrará de forma dinámica la información del producto que el usuario está visualizando.
¿Qué es un Sticky Add to Cart?
En una página de producto tradicional, el botón Añadir al carrito normalmente se encuentra junto a la información principal del producto.
El problema aparece cuando tenemos páginas de producto más largas.
El usuario puede desplazarse para consultar fotografías, descripción, características, opiniones u otra información y, cuando finalmente decide comprar, el botón de compra puede haber quedado varios scrolls atrás.
Un Sticky Add to Cart mantiene las principales opciones de compra accesibles mientras el usuario continúa navegando por la página.
En nuestro caso, la barra aparecerá únicamente después de que el usuario haya dejado atrás el formulario original de compra.
Cuando vuelva a la parte superior y el botón original sea nuevamente visible, la barra desaparecerá automáticamente.
Una barra completamente dinámica
Una de las partes más interesantes del ejercicio es que no tendremos que crear una barra diferente para cada producto.
Todo estará integrado dentro de nuestra plantilla de producto.
El sistema detectará automáticamente información como:
- Imagen del producto.
- Nombre.
- Precio.
- Disponibilidad.
- SKU.
- Cantidad.
- Variaciones disponibles.
- Estado del botón Añadir al carrito.
Por lo tanto, podremos utilizar el mismo diseño para todos los productos de nuestra tienda.
Si estamos viendo una chaqueta, la barra mostrará los datos de esa chaqueta.
Si posteriormente visitamos un suéter, automáticamente mostrará la información correspondiente al suéter.
Compatible con productos simples y variables
No quería que el tutorial funcionara únicamente con productos simples.
También aprenderemos a trabajar con productos variables de WooCommerce.
Por ejemplo, si tenemos un producto con:
Color: Beige, Negro, Azul
Talla: Small, Medium, Large
estas opciones aparecerán automáticamente dentro de nuestra barra Sticky Add to Cart.
Y aquí está una de las partes importantes del tutorial: no vamos a crear un sistema de variaciones paralelo a WooCommerce.
La barra estará sincronizada con el formulario original del producto.
Cuando seleccionemos una variación desde nuestra barra, será WooCommerce quien determine si esa combinación existe, cuál es su precio, qué imagen corresponde, cuál es su disponibilidad y si puede añadirse al carrito.
De esta forma mantenemos toda la lógica de compra en WooCommerce.
Precio, imagen y stock según la variación
La barra tampoco será estática cuando trabajemos con productos variables.
Supongamos que seleccionamos:
Color: Beige
Talla: Medium
Si esa combinación tiene una imagen diferente, la imagen de nuestra barra podrá actualizarse.
Si tiene otro precio, también podremos mostrar el precio correspondiente.
Y si WooCommerce devuelve información sobre disponibilidad, podremos mostrarla directamente dentro del Sticky Add to Cart.
Todo esto ocurre dinámicamente mientras el usuario selecciona sus opciones.
Cantidad sincronizada con WooCommerce
También incluiremos el selector de cantidad.
Si el usuario selecciona:
Cantidad: 2
y posteriormente pulsa Añadir al carrito, WooCommerce utilizará esa cantidad junto con el producto o variación seleccionada.
No estamos simulando un botón de compra. La barra utiliza el formulario real de WooCommerce para realizar la operación.
Diseñado para escritorio y dispositivos móviles
Otro punto importante del ejercicio será el diseño responsive.
En escritorio podemos aprovechar el espacio disponible para mostrar más información:
Imagen + producto + precio + stock + SKU + variaciones + cantidad + botón de compra.
En dispositivos móviles cambiaremos completamente la prioridad.
En lugar de ocupar una gran parte de la pantalla con información que el usuario ya ha visto, mantendremos únicamente los controles necesarios para completar la compra.
De esta forma tendremos una interfaz mucho más compacta:
Variaciones + cantidad + Añadir al carrito.
El objetivo no es simplemente hacer que la barra “quepa” en móvil, sino adaptar su interfaz a la experiencia de compra en una pantalla pequeña.
Compatible con Divi Theme Builder
Durante el tutorial trabajaremos con Divi 5 y WooCommerce.
Además, hemos tenido en cuenta tanto la estructura estándar de una página de producto de WooCommerce como las plantillas personalizadas creadas utilizando Divi Theme Builder.
Esto es especialmente importante cuando utilizamos módulos dinámicos de Divi como:
- Woo Product Title.
- Woo Product Price.
- Woo Product Images.
- Woo Add To Cart.
- Woo Product Meta.
Nuestro código localizará la información necesaria y la utilizará para construir dinámicamente la barra.
¿Cuándo aparece el Sticky Add to Cart?
No quiero que la barra esté permanentemente ocupando espacio en pantalla.
Utilizaremos JavaScript para detectar la posición del formulario original de compra.
Mientras el botón original sea visible, la barra permanecerá oculta.
Cuando el usuario haga scroll y deje atrás el formulario:
Sticky Add to Cart → aparece.
Si vuelve hacia arriba:
Sticky Add to Cart → desaparece.
Esto permite que ambos elementos nunca compitan innecesariamente entre sí.
¿Por qué puede ser interesante implementar esta función?
En páginas de producto extensas, mantener disponible la acción de compra puede ayudar a reducir pasos innecesarios.
El usuario puede seguir consultando la información del producto y, cuando esté preparado para comprar, tendrá las opciones principales disponibles en la parte inferior de la pantalla sin necesidad de regresar manualmente al inicio.
Además, desde el punto de vista del desarrollo, este ejercicio nos sirve para aprender algo todavía más interesante: cómo ampliar WooCommerce utilizando nuestra propia interfaz sin intentar sustituir su lógica interna.
Nosotros crearemos la experiencia visual.
WooCommerce continuará encargándose del producto, las variaciones y el proceso de añadir al carrito.
Tutorial exclusivo para suscriptores
Este videotutorial forma parte de mis tutoriales exclusivos.
El artículo es público para que puedas conocer qué vamos a construir, cómo funciona y qué posibilidades ofrece esta implementación.
Los suscriptores tendrán acceso al videotutorial completo paso a paso y a los códigos utilizados durante el ejercicio, listos para implementar y personalizar en sus propios proyectos.
Si trabajas creando tiendas online con Divi 5 y WooCommerce, este tutorial puede ser especialmente interesante porque no solo terminaremos con una funcionalidad útil: también veremos una forma práctica de llevar WooCommerce más allá de las opciones que tenemos directamente desde el constructor.
0 comentarios