Módulos de carrito y finalizar compra en Divi

¡Hola Divi Lovers! Traemos en primicia nuestros comentarios de la nueva actualización de Divi: Nuevos módulos para página de carrito y finalizar compra de WooCommerce con Divi (finalmente 😱) ¡Atención a las novedades!

Durante años, una de las grandes frustraciones de quienes usábamos Divi junto con WooCommerce era que las páginas de carrito y de finalizar compra quedaban fuera del alcance del constructor visual. Podíamos diseñar la página de inicio, las fichas de producto y la tienda completa con todo el poder de Divi, pero al llegar al carrito y al checkout chocábamos con un muro: esas pantallas usaban los estilos crudos de WooCommerce y quedaban con ese look genérico que no combinaba con el resto del sitio. Esta actualización cambia esa historia por completo.

En palabras de Elegant Themes:

Hoy, nos complace lanzar 8 nuevos módulos de Divi WooCommerce y la capacidad de personalizar las páginas de carrito y de finalizar compra de WooCommerce utilizando el constructor visual de Divi y su gama completa de opciones de diseño. Ahora puedes controlar toda la experiencia del usuario, desde la visualización de un producto hasta su compra.

Nick Roach de ET.

Los nuevos módulos de carrito y finalizar compra en Divi

Esta actualización agrega ocho nuevos módulos a Divi. Cada uno de estos nuevos módulos representa una parte del carrito y checkout de WooCommerce usando sus hooks para poder editarlos. Ahora tendrás el control total de la estructura y el diseño de cada una de estas páginas usando todo el poder del Divi Builder. Estos ocho nuevos módulos incluyen:

• Productos Woo Cart: este módulo muestra la lista de productos que un usuario tiene actualmente en su carrito.
• Totales de Woo Cart: este módulo muestra el subtotal actual, el envío y el precio total de los productos en el carrito de un usuario.
• Woo Cart Cross Sells: este módulo muestra las ventas cruzadas y productos relacionados en la página del carrito.
• Facturación de Woo Checkout: este módulo muestra el formulario de detalles de facturación utilizado durante el pago.
• Envío de Woo Checkout: este módulo muestra el formulario de detalles de envío utilizado durante el pago.
• Woo Checkout Information: este módulo muestra el formulario de información adicional utilizado durante el pago.
• Detalles de Woo Checkout: este módulo muestra los detalles del pedido, incluidos los productos que se compran y sus precios, durante el pago.
• Pago de Woo Checkout: este módulo muestra la selección del tipo de pago y los detalles del formulario de pago durante el pago.

Lo interesante de que cada parte del flujo sea ahora un módulo independiente es que tienes granularidad total. Antes, el checkout era un bloque monolítico que tomabas o dejabas. Ahora puedes reordenar las secciones, ponerlas en columnas, esconder las que no necesitas y resaltar las que más importan. Por ejemplo, en un negocio digital sin envío físico simplemente no usas el módulo de "Envío de Woo Checkout": tu checkout queda más corto, reduce fricción y mejora la conversión.

Personalización de tu carrito y páginas de pago

Cuando habilitas el Divi Builder en una página de carrito de WooCommerce o en una página de finalizar compra, Divi convierte automáticamente la página en una colección de los nuevos módulos Divi utilizando los ocho nuevos módulos de carrito y finalizar compra que se agregan en esta actualización.

Puedes personalizar sus diseños, moverlos por la página y combinarlos con otros módulos Divi para crear un carrito o checkout totalmente a tu medida. Como estas páginas están compuestas por módulos Divi, no hay límites para lo que puedes hacer: cada módulo viene cargado de opciones de diseño que te permiten controlarlo todo.

Cómo activar el Divi Builder en el carrito y checkout

El proceso es directo y no requiere conocimientos técnicos. Asegúrate de tener WooCommerce instalado y tus páginas de carrito y finalizar compra ya creadas (WooCommerce las genera durante su instalación). Luego entra a editar la página del carrito y haz clic en "Usar el Divi Builder": Divi detecta que es una página de WooCommerce y la transforma en su versión modular, mostrándote cada componente como un módulo editable que puedes arrastrar, soltar y configurar.

A partir de ahí, el flujo es el mismo que al diseñar cualquier otra página con Divi: seleccionas el módulo, abres sus opciones y ajustas colores, tipografías, espaciados, bordes y sombras. La diferencia es que los cambios se reflejan en la pantalla real que verán tus clientes al momento de comprar.

Consejo: Antes de tocar el checkout en tu sitio en vivo, duplica la página o trabaja sobre una copia de prueba. El proceso de compra es la parte más sensible de cualquier tienda, así que conviene probar cada cambio sin riesgo de romper una venta real.

Mira el resultado del ejemplo que hicimos en el tutorial:

Por qué un carrito y checkout bien diseñados aumentan tus ventas

Más allá de la estética de tener una tienda coherente de principio a fin, hay una razón comercial poderosa detrás de personalizar estas páginas: el abandono de carrito. La tasa promedio de abandono en el comercio electrónico ronda el 70%, y buena parte se debe a fricciones en el proceso de pago. Cuando el carrito o el checkout se ven desordenados, poco confiables o desalineados con el resto del sitio, el usuario duda, y la duda mata la venta.

Con estos módulos puedes atacar ese problema directamente: reforzar la confianza colocando tus sellos de seguridad y métodos de pago junto a los totales, simplificar el formulario para que parezca menos abrumador y usar los colores de tu marca en el botón de "Finalizar compra" para que destaque. Todo eso, que antes requería contratar a un desarrollador, ahora lo haces tú mismo desde el constructor visual.

En Latinoamérica esto cobra aún más relevancia, porque la confianza al comprar en línea sigue siendo un factor crítico: muchos compradores todavía dudan en poner los datos de su tarjeta en un sitio que se ve genérico o improvisado. Una tienda que mantiene su identidad visual hasta el último clic transmite seriedad, y eso se traduce directamente en más conversiones.

Ideas prácticas para sacarle provecho a los nuevos módulos

Checkout de dos columnas

Una de las disposiciones que mejor convierte es el checkout en dos columnas: a la izquierda los formularios de facturación e información, y a la derecha, fijo y visible, el resumen del pedido y el botón de pago. Así el usuario ve siempre cuánto va a pagar mientras llena sus datos, lo que reduce la ansiedad de "no saber el total final" que tanto contribuye al abandono. Con los módulos de Detalles y Pago de Woo Checkout en una columna lateral, logras este efecto fácilmente.

Ventas cruzadas estratégicas en el carrito

El módulo de Woo Cart Cross Sells es una mina de oro que muchos ignoran. En la página del carrito, justo antes de avanzar al pago, puedes mostrar productos complementarios que aumenten el valor del pedido. La clave está en presentarlos de forma elegante: con buen diseño, espaciado generoso y un título tipo "Completa tu compra" en lugar de un agresivo "Compra más".

Consejo: Si vendes productos digitales o servicios sin envío físico, elimina por completo el módulo de envío del checkout. Cada campo que el usuario no necesita llenar es un obstáculo menos entre él y el botón de pago. Menos campos, más conversiones.

Móvil primero, siempre

Una porción enorme de las compras en línea en Latinoamérica ocurre desde el celular, así que revisa obsesivamente la vista móvil con las opciones responsivas de Divi: botones grandes para tocar con el dedo, formularios que respiren y el botón de pago siempre a la vista. Un checkout cómodo en escritorio pero incómodo en móvil te cuesta ventas todos los días.

Preguntas frecuentes

¿Necesito un plugin de terceros para personalizar el carrito y checkout en Divi?

No. Esa es precisamente la gracia de esta actualización. Antes había que recurrir a plugins externos o a CSS manual; ahora, con los ocho módulos nativos de Divi, tienes todo lo necesario para diseñar estas páginas desde el constructor visual, sin instalar nada adicional ni depender de terceros.

¿Estos módulos afectan la funcionalidad del proceso de compra de WooCommerce?

No. Los módulos usan los hooks nativos de WooCommerce, lo que significa que toda la lógica de compra, cálculo de impuestos, métodos de pago y procesamiento del pedido sigue funcionando exactamente igual. Lo único que cambias es la capa visual, es decir, cómo se ve cada parte del flujo. La maquinaria interna de WooCommerce permanece intacta.

¿Puedo combinar estos módulos con otros módulos de Divi en la misma página?

Sí, y es muy recomendable. Puedes agregar módulos de texto, imágenes, testimonios, badges de confianza o lo que necesites alrededor de los módulos del carrito y checkout. Esa libertad de combinar es justamente lo que te permite construir páginas de compra realmente persuasivas en lugar de un formulario seco y aislado.

¿Qué pasa si quiero volver al diseño por defecto de WooCommerce?

Es completamente reversible. Si en algún momento desactivas el Divi Builder en esas páginas, WooCommerce retoma su diseño estándar sin perder ninguna funcionalidad. Por eso te recomiendo experimentar con tranquilidad: siempre puedes regresar al punto de partida.

Conclusión

La llegada de los ocho módulos de carrito y finalizar compra a Divi cierra una de las brechas más importantes que tenía el ecosistema Divi + WooCommerce. Por fin podemos diseñar la experiencia de compra completa, de principio a fin, manteniendo la coherencia visual de la marca en cada pantalla y eliminando esa molesta dependencia de plugins externos o de código CSS hecho a mano.

Particularmente creo que es una actualización justa, necesaria y bastante buena para todos los usuarios de Divi. Lo más valioso es que pone en tus manos el control sobre la parte del sitio donde realmente se decide la venta. Aprovéchala para reducir fricciones, reforzar la confianza y diseñar un checkout que acompañe al usuario hasta el final en lugar de hacerlo dudar.

¿Qué te parece esta actualización? ¿La vez útil? ¡Déjalo acá abajo en los comentarios y no olvides compartir este contenido!

🎓 ¿Quieres dominar WooCommerce con Divi y construir tiendas que de verdad venden? En el curso de WooCommerce básico te llevo paso a paso desde la configuración inicial hasta el diseño completo de tu tienda. Mira todos los planes de membresía y empieza hoy mismo.