Cerrar video

Personalizar la página de carrito y finalizar compra con divi woocommerce modules

por | Nov 25, 2021 | Tutorial gratuito | 13 Comentarios

En este tutorial gratuito exploraremos la nueva actualización de Divi 4.14.

Esta nueva versión de divi nos ha traído 8 nuevos módulos de woocommerce para el divi builder. Con estos nuevos módulos podemos personalizar la página de carrito y la página de checkout o finalizar compra con el divi builder, algo que anteriormente solamente podíamos editar con CSS.

Personalizar la página de carrito y finalizar compra con divi woocommerce modules

Aquí te dejo el listado de estos nuevos módulos agregados:

Woo Cart Products: Este módulo muestra la lista de productos que un usuario tiene actualmente en su carrito.

Woo Cart Totals: 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.

Woo Checkout Billing: Este módulo muestra el formulario de detalles de facturación utilizado durante el pago.

Woo Checkout Shipping: 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.

Woo Checkout Details: Este módulo muestra los detalles del pedido, incluidos los productos que se compran y sus precios, durante el pago.

Woo Checkout Payment: Este módulo muestra la selección del tipo de pago y los detalles del formulario de pago durante el pago.

Si quieres saber más detalles sobre esta actualización puedes ver el post original de Elegant Themes.

Y si quieres aprender de forma práctica a personalizar cada uno de estos módulos, te invito a darle play al tutorial el cual considero vale completamente la pena 😍

Por cierto, aquí te dejo las páginas que diseñamos en el ejercicio del tutorial, las puedes descargar completamente gratis:


Descargar JSONs

Tutoriales Relacionados

13 Comentarios

  1. jeff

    ¡Hola amigo!

    Quisiera hacer un botón que me lance un pop-up, como lo hiciste tú en este tutorial *Botón: Descargar JSONs*
    .
    Que se pase directamente al CHECKOUT, ¡Quedo muy agradecido con tu respuesta!

    Responder
    • Oscar Viedma

      Hola Jeff, eso es otro tipo de funcionalidad avanzada que requiere de código personalizado o algún plugin. El pop up para descargar el JSON lo he realizado desde gumroad, es un sitio para publicar productos digitales.

      Responder
  2. gabriel quintero

    hola óscar, muy buenas tardes por aca -. primero que todo desearte un feliz año. sabes Soy uno de tus suscriptores de tutoriales premium , . no supe por donde escribirte asi que tome este tutorial gratuito disculpa.. Sabes que estoy teniendo un problema con el formulario de datos y un plugin para agregar un nuevo campo personalizado ( rut exactamente ) ya probé otro tipo de campo personalizado y de igual manera me arroja un error «Facturación Rut es un campo requerido.» la unica forma de que no me salga la nota es quitandole el campo abligatorio. no se si es el plugin o divi.. O si existe alguna manera para que me deje hacer las compras.

    la web es http://www.tienda.tuzonaonline.cl

    quedo atento y muy agradecido desde ya . Feliz año

    Responder
    • Oscar Viedma

      Hola Gabriel qué tal, muchas gracias igualmente deseo lo mejor para ti.

      La verdad desconozco el plugin que mencionas, podría ser una incompatibilidad con divi. Lo mejor debe ser que te pongas en contacto con el desarrollador del plugin considero que es más tema de ellos 🙁

      Lamento no poderte ayudar Gabriel pero es algo que se sale de mis manos. Lo siento.

      Responder
  3. Antonia

    Hola Oscar, gracias por el diseño de la pagina del carrito y checkout. Me he descargado el diseño y en la vista telefono no se ven las lineas del tiempo. Al principio de descargarlo me salia descentrado y al centrarlo ya no se ve.
    Si puedes indicarme que me ha podido pasar.
    Gracias

    Responder
    • Oscar Viedma

      Hola Antonia, ¿me puedes compartir la url de tu ejercicio? Quiero darle un vistazo.

      Saludos.

      Responder
  4. Antonia

    Hola Oscar, ya lo he resuelto. Tenia la linea muy abajo y no la veia. Gracias por responder.
    Mi pagina web es https://www.parafarmaciacardenas.com
    Soy de España. Me gustaria ver el tutorial del mini carrito, pero es premium.. Como se haria el pago?
    Gracias

    Responder
    • Oscar Viedma

      Hola Jose, disculpa por responder hasta ahora. ¿Cómo te fue con ese problema que comentas?

      Responder
  5. AlejandroVerjel

    Oscar un placer saludarte…aplique los archivos json a la pagina de checkout y funciona bien lo único es que cuando se efectua la compra la pagina de resultado de la venta aparece dentro del modulo donde esta las formas de pago. hay manera de mandar el resultado a una pagina nueva?

    Responder
    • Oscar Viedma

      Hola Alejandro, en ese caso debes crear una redirección, en este tutorial (premium) hacemos una página de agradecimiento personalizada 🙂

      Responder
  6. Robert Rubio

    Hola Oscar,
    Un placer en saludarte despues del tutorial en el módulo lista de producto me aparece un texto bajo la propiedad junto al control de actualizar carrito y no se como ocultarlo me puedes ayudar o decirme el porque sucede?

    Responder
    • Oscar Viedma

      Hola Robert, no sé exactamente a que texto te refieres. ¿Tienes alguna captura?

      Responder

Trackbacks/Pingbacks

  1. Personalizar la página de carrito y la página de finalizar compra con Divi WooCommerce Modules – Como Criar Um Site de Vendas - […] ➡️ Enlace al post del blog (descarga el json): https://ovdivi.com/personalizar-la-pagina-de-carrito-y-finalizar-compra-con-divi-woocommerce-modules… […]

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$10 USD / mes

Pin It on Pinterest