Cómo crear una página de canasta de WooCommerce Bago con div Div

La página del carrito de WooCommerce es esencial para cualquier WooCommerce (WC) que use una tienda en línea. Pero a menudo, la página de la canasta tiende a sufrir cuando se trata de diseño, porque el diseño de la página generalmente implica personalizar las latas en el exterior y luego estilizar la plantilla de página pura con CSS externo. Pero con los nuevos módulos Woo de Div, ¡este proceso se ha vuelto fácil y agradable! En este tutorial, le mostraremos cómo crear una plantilla de página de carrito de WC para su sitio completo utilizando el creador de temas. Le mostraremos cómo configurar rápidamente una nueva plantilla para la página del carrito de compras y diseñar la plantilla utilizando módulos dinámicos apropiados disponibles en Divi Builder.
¡Vamos a empezar! Mira en ayunas antes y después de aquí una mirada rápida a la página de billetes predeterminada de la división en comparación con la nueva página de canasta que diseñaremos en este tutorial.

Y aquí hay un vistazo más de cerca a la plantilla de la página de la canasta.


Descargue la plantilla de página de canasta gratuita Esta plantilla de página de canasta está disponible para descargar como uno de nuestros conjuntos gratuitos para carrito y canasta. Por lo tanto, no dude en descargarlo desde la publicación que presenta esos conjuntos de plantillas de canasta y pago. Para poner su mano en el diseño de la plantilla de la página de la cesta en este tutorial, primero tendrá que descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico diaria utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá aún más división de amabilidad y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar. No será “read” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue gratis únase al boletín de Divin y le enviaremos una copia del paquete de diseño de la página de buceo, además de muchos otros recursos, consejos y consejos de forma gratuita. Sigue a ti mismo y te convertirás en una división maestra en el menor tiempo. Si ya está suscrito, ingrese su correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a Div Free Weekly Layout Div!
Para importar la apariencia de la plantilla en su sitio, deberá acceder al Builder Divic y utilizar la opción de portabilidad para importar el archivo .json en el generador de temas.
Una vez terminado, la plantilla de canasta estará disponible en temas. Para editar la plantilla, haga clic en el icono de edición en el cuerpo de la plantilla. Pasemos al tutorial, ¿sí? Acerca de la página de WooCommerce y Divic Coș cada vez que instale WooCommerce en su sitio web Div, WooCommerce (WC) generará páginas clave, incluida una página de la tienda, una página de cesta, una página de pago y una cuenta de página. El contenido de la página se implementa utilizando un código corto en el editor de bloques de backend de WordPress.

Si activa Divi Builder en esta página de canasta, cada uno de los elementos de contenido de la página del carrito de WooCommerce se cargará como módulos Woo Divin que se pueden usar para atacar la página.

Los módulos WOO para diseñar una página de canasta en Div Div vienen con una variedad de módulos que son clave para agregar contenido dinámico a una plantilla de página. Algunos de estos incluyen módulos WOO específicos para la página del carrito.

Los módulos que son clave para construir la plantilla de página o carrito incluyen:
Título de publicación: esto mostrará el título de la página de la canasta dinámicamente cuando cree una plantilla de página.

Aviso de Woo: este módulo se puede establecer en diferentes tipos de páginas (página de canasta, página del producto, página de pago). Mostrará dinámicamente notificaciones importantes al usuario, según sea necesario.
Productos de carrito Woo: este módulo muestra la lista de productos que un usuario tiene actualmente en la canasta.
Totales de carrito Woo: este módulo muestra el subtot actual, la entrega y el precio total de los productos en la canasta de un usuario.
Otros módulos opcionales incluyen:
Woo BreadRumbs: esto mostrará la barra de navegación de WooCommerce Breadcrumb.
Woo Cross Sells: esto mostrará dinámicamente cualquier producto de venta cruzada relacionadas con artículos de carrito. Apropiadas una página o plantilla de canasta como mencionamos, podemos usar fácilmente el Woo Div. Si no ve que necesita construir una plantilla personalizada para la página de la canasta. Para este tutorial, construiremos una plantilla de página de canasta utilizando el creador de temas. El diseño de una plantilla de página de cesta de WooCommerce con DIV para esta plantilla de página de carrito de WooCommerce es crear un área de cuerpo personalizada para una plantilla asignada a la página de WooCommerce en el Div. No crearemos un encabezado personalizado o un área de sótano para esta plantilla, pero puede usar fácilmente esta plantilla en su propio sitio web con su propio titular y sótano.
Creación de una plantilla personalizada para que la página de la canasta comience, para hacer lo siguiente:
Vaya al tablero de WordPress y navegue en Divin> Temor Builder.
Luego haga clic en el icono Agregue una nueva plantilla Plus desde el interior de la casa gris vacía para agregar una nueva plantilla.
En la configuración de la plantilla, en la pestaña “Uso activado”, seleccione COș de la lista de páginas de WooCommerce.
Finalmente, haga clic en Crear plantilla.
Una vez que se haya creado la nueva plantilla de COș, haga clic en el área del “cuerpo personalizado” de la plantilla. En la lista emergente, seleccione Built Body Custom.
Creando la estructura y columnas de la sección en el editor de las plantillas, inserte una nueva sección especializada con una estructura de columna de un cuarto, mitad, mitad, con dos barras laterales.
Luego agregue una fila con una columna en el medio de la sección.

La sección de fondo abre la configuración de la sección y agregue un color de fondo de la siguiente manera: Wallpaper: #F7F3F0

Tamaño de sección En la pestaña Diseño, actualice lo siguiente:

El ancho de la canaleta: 2

Ancho interno: 100%
Ancho interno máximo: ninguno

Altura mínima: 100 VH
Espacio de las secciones y luego agregue un poco de espacio a la sección y columnas, como sigue:
Llenado: 0px hacia arriba, 40px izquierdo, 40px a la derecha
Columna 1 Llenado: 90 PX en la parte superior
Llenado en la columna 3: 84 PX

Creando conexiones de navegación personalizadas para este aspecto, crearemos algunos enlaces de navegación personalizados a las páginas clave que conforman una tienda: tienda, canasta y casa. Esto facilitará a los usuarios navegar a través del proceso de compra.
En la columna izquierda, agregue un nuevo módulo de presentación. Se utilizará como un enlace a la página de la tienda en su sitio.
En la configuración de la propaganda modal, actualice el contenido de la siguiente manera:
Título: Tienda

Corp: Deja en blanco
Usa el icono: si

Icono: ver captura de pantalla
En lugar de agregar una URL de enlace estático, podemos agregar un enlace dinámico a la página de la tienda. Aquí le mostramos cómo hacerlo.
Coloque el cursor sobre el cuadro de inserción de URL del enlace en el módulo y haga clic en el icono “Usar contenido dinámico”.
En el menú desplegable, seleccione el enlace de enlace de la lista.
En la forma en que el enlace de la página, seleccione la página de la tienda de la lista vertical.

Luego guarde los cambios.
En la pestaña Diseño, actualice el estilo de icono de la siguiente manera:
Icono de color: RGBA (55,61,75.0.3)
Colocación de la imagen/icono: izquierda
Ancho de imagen/icono: 16px

Luego actualice el texto del título:
Título de la fuente: Roboto
Peso de la fuente del título: Título de texto mediano Título: RGBA (55,61,75,0.3)
Para un toque final, actualice el tamaño y el espacio de la siguiente manera:

Ancho de contenido: 100%
Marja: 10px hacia abajo
Animación de imagen/icono: sin animación
Esto asegurará que la información (o enlace de navegación) se extienda sobre todo el ancho del navegador en la tableta y el teléfono, y cree un espacio entre la siguiente información (la siguiente) que agregaremos.

Para crear los siguientes dos enlaces, duplique el módulo de blurbs existente que acabo de diseñar dos veces, para que haya un total de tres enlaces.
El segundo enlace será el enlace del carrito, que es la página que creamos hoy. Para resaltarlo, abra la configuración para el segundo mensaje y actualice el icono y el color de texto:
Icono de color: #373d4b
Color de texto del título: #373D4B
Ahora todo lo que queda por hacer es actualizar el texto del título y las URL del enlace del módulo, para que cada una tenga sus URL dinámicas de los enlaces a las páginas. Personalización de la configuración ordinaria en el medio de la página, agregaremos el módulo de notificación WOO y los productos de carrito de WOO. Pero antes de agregarlos, debemos optimizar la configuración. Abra el relleno de fila, abra la configuración de la fila y actualice lo siguiente:

Relleno (escritorio): 72px hacia arriba, 6% izquierda, 6% derecho

Llenado: (tableta y teléfono): 0px arriba, 0px izquierdo, 0px a la derecha
Borde
Ancho óseo: 1px

Color del borde: RGBA (55,61,75,0.14)
El ancho de la caja superior: 0px
El ancho del marco inferior: 0px


Diseñar el módulo dinámico de aviso de WOO para la página de la canasta siempre es una buena idea agregar el módulo de notificación WOO a la parte superior de la página para que las notificaciones sean las más visibles para los usuarios al interactuar con la página del carrito. Tenga en cuenta que diseñamos notificaciones que se mostrarán solo cuando sea necesario. Para agregar el módulo de Notificación de WOO, haga clic para agregar un nuevo módulo de Notificación de WOO en una sola columna. La página de la página y el fondo Notic Woo luego, actualice el tipo de página y el fondo del anuncio de WOO, como sigue:
Tipo de página: Canasta de página
Color de fondo: RGBA (153,158,117,0.1)
IMPORTANTE: Asegúrese de seleccionar la página de la canasta como tipo de página para que las notificaciones de WOO funcionen correctamente.
El texto del título de anuncio de WOO en la pestaña Diseño, actualice el estilo de texto del título de la siguiente manera:

Título de la fuente: Roboto

El peso de la fuente del título: promedio
Color de texto del título: #373D4B
Título Tamaño del texto: 14px
Altura de la línea de título: 1.8 em

El botón de aviso de Woo
Use estilos personalizados para el botón: Sí
El tamaño de texto del botón: 14px
El color del texto del botón: #fff
Color de fondo para el botón: #999E75
El ancho del nudo del botón: 0px

El raspador de la mantequilla de botón: 0px
Espacio entre letras: 1px
Fuente para el botón: Roboto
El peso de la fuente del botón: en negrita
El estilo de la fuente del botón: TT
Línea de botones: 0.8em hacia arriba, 0.8em hacia abajo, 1em a la izquierda, 1em a la derecha
Woo Noth Box Shadow Para proporcionar a la barra de notificaciones de WOO un diseño de borde superior, actualice las opciones de sombra de la caja de la siguiente manera:
Box Shadow: Ver captura de pantalla
Caja de sombra de posición vertical: 0px
Intensidad de difuminar la sombra de la caja: 0pxIntensidad para extender la sombra de la caja: 0px
Shadow Color: #999E75
Para eliminar el margen predeterminado de la notificación WOO, vaya a la pestaña avanzada y agregue los siguientes CSS personalizados al elemento principal: Bottom: 0! Importante;

Creando el título de la página de cesta dinámica para crear el título de la página dinámica para la página del carrito de compras, agregue un módulo para el título de publicación en el módulo de notificación WOO.
El contenido del título de publicación en la configuración del título de la publicación, actualice los elementos para mostrar solo el título, de la siguiente manera:
El título del espectáculo: Sí
Muestra meta: no
Muestra la imagen presentada: no
El texto del título de publicación para estilizar el texto de la publicación de publicación, actualice lo siguiente en la pestaña Diseño:

Título de la fuente: pantalla DM Serif

Color de texto del título: #373D4B

Título Tamaño del texto: 80px (escritorio), 60px (tableta), 42px (teléfono)
Altura de la línea de título: 1.2 em
Diseño dinámico de carrito de Woo Ahora que nuestro título de página está configurado, estamos listos para agregar productos de carrito Woo, otro elemento clave para la plantilla de la página de la canasta. Bajo el módulo de título de publicación, agregue un módulo de productos Woo Cart.
El módulo debe mostrar contenido falso, a menos que ya tenga productos en el carrito. Esto lo ayudará a ver el proceso de diseño. Texto y enlaces de productos de Cart Woo Podemos apuntar a los enlaces de título del producto, texto de precio y texto subtotal personalizando las opciones de texto del cuerpo en productos de carrito de Woo. Abra el módulo de configuración de productos Woo Cart y, en la pestaña de diseño, actualice lo siguiente:

Fuente del cuerpo: Roboto
Color de texto de enlace: #373d4b
Nota: El texto del enlace se dirigirá a la línea de título del producto en la columna del producto. El Tabel de los productos de carrito de Woo, la celda de la tabla y el icono de eliminación, como puede notar, los productos en la canasta se organizan dentro de una estructura de masa. Podemos apuntar al estilo de la tabla y las celdas de la tabla con las opciones construidas del módulo. Para este ejemplo, actualice lo siguiente:
Restimir los canales y los bordes de la mesa: Sí
Llenado de celda de mesa: 0px

Luego actualice el color del icono de eliminación (“x”) en el lado izquierdo de cada producto, de la siguiente manera:

Elimine el color del texto del icono: #373D4B
Woo Cart produce campos también, podemos apuntar a los productos de campo en la canasta utilizando las opciones de campo construidas del módulo. Esto se dirigirá a cosas como los cuadros de campo para la cantidad y el cuadro de campo para el código de cupón. En Opciones de campo, actualice lo siguiente:
Color de fondo de campo: transparente
Llenado de campo: 10px hacia arriba, 10px hacia abajo

Esquinas de campo redondeadas: 0px
El ancho del marco de campo: 1px
Campo de color de la tarjeta: RGBA (0.0,0,0.16)
Botones de producto Woo Cart Módulo de productos Woo Cart Contiene dos botones (“Aplicar cupón” y botón “Actualizar el carrito”) que se pueden personalizar con el botón integrado. Debido a que ya hemos creado un botón en el módulo de notificación WOO, abra la configuración del módulo de notificación WOO y busque la opción para el botón. Luego, haga clic en el botón Switch o haga clic en el icono “Tres puntos” para abrir el menú más configuración. Allí, seleccione los estilos de los botones de copia.
Con los estilos de traseros ahora copiados, abra el módulo de productos de CART WOO y abra el menú más configuración en la opción de botón y seleccione Pegar los estilos de botones. Esto copiará los estilos del botón en el módulo de notificación Woo. Una vez que los estilos de los botones estén en su lugar, cambie el color de fondo del botón de la siguiente manera:

Color de fondo para el botón: #373D4B
El botón “Actualizar COș” está desactivado tiene una condición deshabilitada cuando no sea necesario. Podemos personalizar el estilo del botón deshabilitado. Por el momento, simplemente copie los estilos de los botones actuales y péguelos en botones deshabilitados utilizando la configuración del menú para hacer clic derecho. Productos de imágenes de Carry Woo también, podemos cambiar el estilo de las imágenes de los productos en este módulo. Por ahora, cambiemos el tamaño de las imágenes de las opciones de tamaño, de la siguiente manera:
Ancho de imagen: 80px
Aspecto de la tabla personalizada Si desea crear más espacio horizontal para la información del producto en la tabla, puede reemplazar la tabla de WooCommerce predeterminada en el original (o automáticamente). Para hacer esto, vaya a la pestaña Avanzada y agregue los siguientes CSS personalizados a la tabla: Table-Layout: Inicial! Importante;
Diseñando el módulo dinámico de cartas de carro woo El último elemento clave que necesitamos para completar la plantilla de la página de la canasta son los módulos de Totes Woo Cart. Este módulo muestra el contenido total del carrito de compras dinámico, así como un botón “proceder a pagar”. Para este aspecto, continúe y agregue la canasta total en la columna derecha de la sección.
El botón Totaluri Coș primero, para copiar los estilos de los botones utilizados para los módulos Notic Woo (como lo hicimos) y pegar los estilos de los botones en el módulo COș total. Esto nos dará un estilo de botón adecuado para el botón “Proceder a pagar”. Por supuesto, puede personalizar fácilmente los estilos de los botones, como desee, utilizando las opciones construidas del módulo.

Título de la fuente: pantalla DM Serif

Título Tamaño del texto: 30px (escritorio), 24px (tableta), 18px (teléfono)

Altura de la línea de título: 1.8 em
El borde de la tabla y el marco de la celda de la tabla tendrán algunos estilos de tabla de forma predeterminada. Puede optar por estilizarlos con las opciones de mesa y mesa construidas del módulo. Para este aspecto, eliminaremos los estilos de borde para ambos. Para hacer esto, actualice lo siguiente:

Mesa de cadena: ninguno
El borde del borde de la celda de la mesa: ninguno

Los campos para Coș Totals para dar al módulo Total Total de COA los mismos estilos de campo utilizados en los productos de CART WOO, copiar los estilos de campo del módulo de producto Woo Cart y pegarlos al módulo COș total.

Agregue más contenido según sea necesario en este momento, tenemos todos los elementos clave para nuestra plantilla de página de canasta. Pero no tienes que parar aquí. Puede agregar cualquier contenido que desee en la página según sea necesario. Aquí hay algunas ideas:

Agregue un módulo Woo Cross vende para mostrar cualquier producto de venta cruzada relacionadas con los productos agregados al carrito.

Agregue una opción de correo electrónico para un descuento en las primeras compras. Agregue una promoción que muestre un código de cupón para estimular la finalización del proceso de compra.
Para nuestra demostración gratuita de este aspecto, incluimos un hermoso correo electrónico de registro bajo los productos en la canasta.
Resultado final para verificar el resultado final de la plantilla de nuestra página de canasta.
Y así es como se ve en tabletas y dispositivos telefónicos.

Pensamientos finales El proceso de diseño de una plantilla personalizada de página de la página de WooCommerce se simplifica drásticamente y se amplifica con el potente generador de temas de Divic y los módulos intuitivos de WOO. En este tutorial, nos centramos en incorporar los elementos clave que forman una página de canasta. Pero, tenga en cuenta que todos los otros poderosos módulos y funciones están disponibles para llevar las páginas del carrito a un nivel completamente nuevo. Esperamos que esto lo ayude a mejorar sus habilidades de diseño de la Divica y, lo que es más importante, lo lleva a más conversiones. Espero con ansias las noticias tuyas en los comentarios. ¡Suerte!