Cómo crear una línea de tiempo de flujo de carrito de WooCommerce en Divi

WooCommerce es uno de los complementos de comercio electrónico más populares para WordPress. Para ayudar con esto, Divi lanzó una serie de nuevos módulos centrados en Woo que le brindan más libertad al crear sus páginas estándar de WooCommerce. Trabajaremos en la creación de una línea de tiempo del carrito de WooCommerce para Divi en la publicación de hoy. Diseñaremos una representación visual del viaje del usuario para este período. El viaje del usuario desde la tienda hasta la caja debe mostrarse de forma visible.

Vista previa del diseño

Antes de pasar directamente al diseño, veamos cómo se verá nuestro diseño una vez que hayamos terminado. Aquí está la vista previa de la página del carrito.

Además, así es como se verá nuestra página de pago.

Para descargar la plantilla, haga clic aquí y obtenga el archivo. Luego descomprímelo.

Create Amazing Websites

Con el mejor generador de páginas gratuito Elementor

Empezar ahora

Instalar la plantilla

Vaya a Divi Theme Builder en el backend del sitio web de WordPress para cargar la plantilla.

Luego, aparecerá un icono de dos flechas en la esquina superior derecha. Alternar el icono.

Haga clic en "Importar plantillas de Divi Theme Builder" después de cargar el archivo JSON que descargó de esta publicación en la pestaña de importación.

Verá una nueva plantilla de carrito, pago y tienda cuando haya cargado el archivo. Tan pronto como desee que se activen las plantillas, guarde sus modificaciones en Divi Theme Builder.

Crear la línea de tiempo del carrito de WooCommerce

La siguiente sección de nuestra publicación de blog demostrará cómo volver a crear la línea de tiempo del carrito de WooCommerce para Divi si está buscando un poco más de desafío. Los procedimientos de esta guía se pueden utilizar para crear una línea de tiempo del carrito que sea única para usted. ¡Utilícelo como motivación para sus próximos esfuerzos de WooCommerce y Divi! Así es como se verá la línea de tiempo del carrito de WooCommerce que construiremos:

¡Comencemos ahora que tenemos una representación visual de lo que crearemos!

Configuración del generador de temas Divi

Estas plantillas que desarrollaremos tendrán un impacto en las páginas de pago y carrito de WooCommerce. Por lo tanto, comenzamos a trabajar en nuestro proyecto en Divi Theme Builder.

Dentro de la tarjeta Agregar nueva plantilla, haga clic en el signo más.

Elija Crear nueva plantilla a continuación.

Después de eso, se le mostrará un cuadro modal que enumera todas las diferentes tareas que puede adjuntar a la nueva plantilla que está creando. En este caso, crearemos una plantilla para la página del carrito de la tienda WooCommerce. Por lo tanto, navegue hasta el encabezado WooCommerce en el cuadro modal y haga clic en Carrito. Después de elegir, seleccione Crear plantilla. Al hacer esto, estamos etiquetando la página del carrito con la plantilla recién construida.

Para desarrollar la plantilla de pago, seguiremos un procedimiento similar. Dentro de la tarjeta Agregar nueva plantilla, haga clic en el signo más.

Elija Crear nueva plantilla una vez más.

Debemos desplazarnos hacia abajo en la ventana modal y elegir Pagar en el encabezado de WooCommerce para acceder a la página de pago. Después de elegir, seleccione Crear plantilla.

Ahora podemos guardar nuestro carrito y las plantillas de pago después de crearlas. En la parte superior de Divi Theme Builder, seleccione el botón verde Guardar cambios.

Construyendo el flujo de carrito de WooCommerce

¡La diversión comienza ahora! Vamos a comenzar a redactar el cronograma para el flujo de compras de la página del carrito. Para lograr esto, abrimos la plantilla del carrito que acabamos de crear y seleccionamos el botón Agregar cuerpo personalizado.

Vamos a seleccionar el botón Crear cuerpo personalizado que aparece en el cuadro modal, tal como lo hicimos cuando creamos estas plantillas y sus asignaciones.

Nueva sección y fila

Crearemos una nueva fila ahora que estamos en Divi Builder. Habrá cinco columnas en esta fila.

A las columnas 1, 3 y 5 de su nueva fila, agregue tres módulos de Blurb.

Siga la configuración del módulo de publicidad:

Primera propaganda (columna 1)

• Título: Tienda
• Cuerpo: Dejar en blanco
• Icono de uso: Sí
• Icono: vea la captura de pantalla a continuación
• URL del enlace del módulo: /tienda (o su enlace personalizado a la página de su tienda)

Segunda propaganda (columna 3)

• Título: Reseña
• Cuerpo: Dejar en blanco
• Icono de uso: Sí
• Icono: vea la captura de pantalla a continuación
• URL del enlace del módulo: /cart (o su enlace personalizado a la página de su carrito)

Tercera propaganda (columna 5)

• Título: Pagar
• Cuerpo: Dejar en blanco
• Icono de uso: Sí
• Icono: vea la captura de pantalla a continuación
• URL del enlace del módulo: /pago (O su enlace personalizado a su página de pago)

En este punto, nuestra línea de tiempo de WooCommerce aparecerá de la siguiente manera:

Independientemente de las páginas a las que lleguen los clientes, requerimos un acceso simple a nuestros módulos de Blurb a medida que creamos plantillas para el carrito y la página de pago. La capacidad del usuario final—su cliente—para moverse sin problemas entre las distintas etapas de pago es un componente clave de la línea de tiempo de WooCommerce. Primero ingresaremos la configuración del módulo de la primera publicidad, tienda, para agregar el enlace a las páginas predeterminadas de tienda, carrito y pago del sitio.

Independientemente de las páginas a las que lleguen los clientes, requerimos un acceso simple a nuestros módulos de Blurb a medida que creamos plantillas para el carrito y la página de pago. La capacidad del usuario final—su cliente—para moverse sin problemas entre las distintas etapas de pago es un componente clave de la línea de tiempo de WooCommerce. Primero ingresaremos la configuración del módulo de la primera publicidad, tienda, para agregar el enlace a las páginas predeterminadas de tienda, carrito y pago del sitio.

Cada módulo de Blurb recibirá enlaces a las páginas normales de WooCommerce. Realice los ajustes necesarios en los enlaces personalizados que haya establecido para estas páginas en su instalación de WooCommerce. Primero comenzamos con el Módulo Shop Blurb. Escribimos /comprar en el cuadro URL de enlace del módulo. Esta es la URL estándar de la página de la tienda de WooCommerce. Recuerde reemplazar esta URL con su URL personalizada si la actualizó.

Para guardar sus cambios, haga clic en el botón de marca de verificación verde. En el Módulo de revisión de Blurb vamos a continuación. Este módulo proporciona el enlace a la página del carrito. Una vez más, se selecciona la pestaña Enlace y se agrega la URL/carrito del enlace del módulo a la URL del módulo.

Haremos un enlace al enlace de la página de pago estándar de WooCommerce, que es /checkout, para el último módulo Blurb, el módulo Checkout Blurb.

Módulos de Blurb de estilo

A continuación, se iniciará el estilo de nuestros Módulos de Blurb recién agregados. En los módulos, aplicaremos estilos de desplazamiento. Esto mejora la experiencia de usuario (UX) de la línea de tiempo del carrito de WooCommerce. Deseamos un color diferente para el módulo de Blurb que representa la página en la que nos encontramos ahora. Además, queremos que el ícono cambie de color y crezca a medida que pasamos el mouse sobre él.

Estilo del módulo Blurb

• Color del icono: #eac989
• Color del icono de desplazamiento: #9fa2ce
• Alineación de texto: Centro

Texto del título:

• Texto del encabezado del título: H4

• Fuente del título: Baskerville
• Peso de la fuente del título: Negrita
• Color del texto del título: #354e7c

Transformar:

• Escala de transformación (escritorio): 100%
• Escala de transformación (flotar): 115%

Aplicaremos los parámetros de diseño a los otros módulos de Blurb en nuestra fila después de que hayamos terminado de configurarlos para el primer módulo de Blurb.

Solo los Módulos en nuestra sección son los objetos a los que queremos extender nuestros estilos. Es importante recordar esto, especialmente si está trabajando en una página con contenido existente.

Aplicar estilo al módulo Cart Blurb

Vamos a dar la etapa en la que nuestro usuario se encuentra ahora en un color de icono separado para indicar las diversas etapas del proceso de pago. Por ejemplo, modificaremos el color del Módulo de Blurb que hace referencia a la etapa del carrito del proceso si están en la página del carrito.

Módulo de publicidad de la página del carrito:

• Color del icono (escritorio): #f6c6c5
• Color del icono (desplazamiento): #9fa2ce

Agregar divisores de línea de tiempo

Comenzaremos agregando y personalizando nuestros módulos divisores después de haber construido y diseñado nuestro módulo Blurb. Las columnas segunda y cuarta de nuestra fila incluyen el módulo divisor.

Divisores de línea de tiempo de estilo

A continuación, personalizaremos los módulos divisores. Realice los siguientes cambios en la configuración del divisor.

Visibilidad:

• Mostrar divisor: Sí

Línea:

• Color de línea: #354e7c
• Estilo de línea: Punteado
• Posición de línea: centrado verticalmente

Dimensionamiento

• Peso del divisor: 5px

Copiemos y peguemos los estilos de este módulo divisor en el otro módulo de nuestra fila usando una función Divi realmente inteligente. Luego, haremos clic con el botón derecho en el Módulo divisor que se ha terminado. Luego, seleccionaremos Copiar configuración del módulo. Luego, hacemos clic con el botón derecho en el Módulo divisor, que no tiene estilo en este momento. El último paso es hacer clic en Pegar configuración del módulo. ¡Ahorrar tiempo es ganar tiempo!

CSS personalizado

Nuestra línea de tiempo del carrito de WooCommerce actualmente se ve así:

Vamos a agregar algo de CSS a nuestra fila para asegurarnos de que nuestros módulos divisores estén correctamente alineados y para que nuestro módulo de línea de tiempo responda a dispositivos móviles.

Primero debemos ingresar las opciones de fila para nuestra línea de tiempo del carrito de WooCommerce antes de que podamos agregar nuestro CSS personalizado. Luego elegimos la pestaña Avanzado. Por último, pero no menos importante, incluiremos el siguiente CSS en el elemento principal:

display:flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;

Ahora haga clic en la marca de verificación verde para guardar la configuración.

Configuración de la página de pago

En nuestra página de carrito, hemos sentado las bases para nuestra línea de tiempo de flujo de carrito de WooCommerce. Pero, debemos actualizar nuestra plantilla de página de pago con nuestro trabajo completo para terminar nuestro cronograma. Para simplificar nuestro procedimiento para la página de pago, usaremos el menú contextual, que era una de las funciones originales de Divi. ¡Vámonos!

Copie la línea de tiempo del flujo del carrito desde la página del carrito

Regresaremos a la página del carrito de compras. Sin embargo, no usaremos el Divi Builder para el cuerpo.

Haz clic con el botón derecho en el cuerpo personalizado de la plantilla del carrito. Después de eso, seleccione Copiar en el menú contextual.

Ahora pegaremos el trabajo que completamos dentro de la plantilla del carrito en la plantilla de pago después de haberlo duplicado. En la plantilla de la página de pago, hacemos clic derecho en el botón Agregar cuerpo personalizado para lograr esto. Cuando haya terminado, la opción Pegar aparecerá en el menú. Para copiar el cuerpo personalizado de la plantilla de la página de pago a la plantilla de la página del carrito, haga clic en Pegar.

Ahora puede ver que la plantilla de la página de pago y la plantilla del carrito tienen un cuerpo personalizado. Esto nos permitirá acelerar el procedimiento de diseño del sitio. Gracias, Divi. Haremos clic en el botón verde Guardar cambios en la parte superior del constructor para guardar nuestras modificaciones en la plantilla de pago.

Actualizar página de pago

Después de reducir algo de tiempo del proceso de diseño, hagamos los últimos ajustes en la página de pago para asegurarnos de que se integre a la perfección con el resto de nuestro proyecto. Para editar el cuerpo personalizado de la plantilla de la página de pago, primero, haga clic en el icono del lápiz.

Icono de pago de estilo

Comience a diseñar nuestro ícono de pago ahora. La configuración del módulo del botón de pago se abrirá cuando haga clic en el símbolo de engranaje.

Vaya a la pestaña Diseño del módulo Configuración del módulo. Se debe hacer clic en el título "Icono de imagen &". El color del icono cambiará. Por lo tanto, seleccione el ícono del cuentagotas e ingrese el valor hexadecimal #f6c6c5. Como resultado, el ícono tomará el color de la página actual, que es rosa.

Actualizar icono del carrito

Será necesario volver atrás y cambiar el color del icono del icono del carrito. Vamos a volver a la configuración del módulo para lograr esto. Luego seleccionamos el icono de engranaje del símbolo del carrito.

Navegaremos una vez más a la pestaña Diseño de la configuración del módulo. Después de eso, seleccione la herramienta cuentagotas de la sección Icono de imagen &. Luego ingrese #eac989 en formato hexadecimal.

Una vez que haya salido de Divi Builder, no olvide guardar su configuración y todo su laborioso trabajo.

marge todos juntos

Si bien la línea de tiempo del carrito es el enfoque principal de este tutorial, la plantilla también requiere el uso de módulos adicionales de WooCommerce. Estos módulos adicionales de WooCommerce deben agregarse a cada página de plantilla para que su tienda esté completa.

Plantilla de página de carrito

• Productos de Woo Cart: Esto mostrará el carrito de WooCommerce
• Woo Cart Totals: muestra el subtotal, los impuestos y más con este módulo

Plantilla de página de pago

• Módulo de notificación de Woo: utilizamos este módulo para mostrar cualquier error, información o aviso relacionado con el pago
• Woo Checkout Billing: este módulo coloreará los detalles de facturación de tus clientes
• Detalles de pago de Woo: a diferencia de los totales del carrito, este módulo mostrará los nombres reales de los productos, la cantidad y más
• Woo Checkout Billing: para mostrar los métodos de pago disponibles, hemos agregado este módulo a la página de pago

Terminando

Una línea de tiempo del carrito brinda a los clientes una descripción visual de su viaje a través de su sitio. Tiene la capacidad de modificar y agregar un nuevo componente a su tienda WooCommerce usando Divi . Puede aplicar lo que ha aprendido aquí a sus propios clientes y sitios web personales gracias a las herramientas de Divi. Si utiliza este tutorial fuera del aula, ¡hágamelo saber!