Crear diseño de una página de carrito de WooCommerce con Divi

La página del carrito aparece justo cuando el cliente ya ha elegido qué quiere comprar y está a pocos pasos de terminar el pedido. Por eso, aunque WooCommerce trae un diseño que funciona desde el primer momento, puede tener sentido adaptarlo para que no parezca una sección distinta al resto de la tienda.

Con una página de carrito de WooCommerce con Divi podemos cambiar la forma en la que se muestran los productos, los totales, los cupones o los productos relacionados sin tener que editar directamente las plantillas de WooCommerce.

También podemos aprovechar ese espacio para mantener los mismos estilos que usamos en otras páginas. Botones, tipografías, colores y márgenes pueden seguir la misma línea visual y hacer que todo se sienta más integrado.

Divi facilita bastante esta parte con su Theme Builder y los módulos de WooCommerce. Desde ahí podemos preparar una plantilla global para el carrito y decidir cómo queremos distribuir cada bloque.

Por ejemplo, podemos dejar los productos en una zona amplia, colocar el resumen del pedido al lado y añadir debajo un pequeño apartado sobre envíos, devoluciones o formas de pago. Eso sí, aquí menos suele ser más. El cliente necesita comprobar su pedido, hacer algún cambio si hace falta y seguir hacia el checkout sin perderse entre demasiados elementos.

Es por esto que vamos a ver cómo preparar una página de carrito de WooCommerce con Divi, qué módulos podemos utilizar y cómo ordenar la plantilla para que el proceso de compra siga siendo claro.

Que es una pagina de carrito de WooCommerce con Divi

La página del carrito es uno de esos puntos donde el cliente se detiene un momento antes de pagar. Ahí puede revisar qué productos ha añadido, cambiar cantidades, aplicar un cupón en WooCommerce o comprobar cuánto va a pagar en total.

WooCommerce ya crea esta página de forma automática, pero su diseño puede quedarse algo básico dependiendo del estilo de la tienda. Si utilizamos Divi, podemos darle otra apariencia y hacer que encaje mejor con el resto de la web.

Con el Theme Builder es posible preparar una plantilla específica para el carrito y organizar los elementos sin tener que modificar directamente los archivos de WooCommerce.

Dentro de esa plantilla podemos utilizar módulos como:

• Woo Cart Products: muestra los productos añadidos al carrito.
• Woo Cart Totals: enseña el subtotal, el envío, los impuestos y el total cuando corresponde.
• Woo Notice: muestra avisos relacionados con cupones, stock u otras acciones.
• Woo Cross Sells: permite añadir productos que puedan complementar la compra.

También podemos sumar módulos normales de Divi. Por ejemplo, un texto sobre envíos, iconos con métodos de pago, garantías o alguna información sobre devoluciones. La distribución tampoco tiene que ser la de siempre. Podemos dejar los productos en una columna y colocar el resumen del pedido al lado, o añadir debajo algunos productos relacionados.

Crear una página de carrito de WooCommerce con Divi también nos permite mantener los mismos colores, tipografías y botones que utilizamos en otras partes de la tienda. Eso sí, aquí conviene no pasarnos con el diseño. El cliente ya está bastante cerca de comprar y lo que necesita es revisar el pedido rápidamente y encontrar sin esfuerzo el botón para continuar al pago.

Entendiendo el generador de temas de Divi

El generador de temas de Divi, como ya hemos visto en otros cursos o guías, como por ejemplo la guía de Crear plantilla personalizada para productos de WooCommerce en Divi es un sistema que nos provee el tema Divi para cambiar algunos aspectos de nuestro sitio. Podemos modificar tanto encabezados, footers o pies de página con Divi o directamente plantillas, como lo serían publicaciones, categorías, productos y demás.

Sí aplicamos una plantilla, tenemos que tomar en cuenta que este diseño se nos aplicará solo a donde lo insertemos, en este caso, la página de carrito es solo una, por lo que esta plantilla puede aplicarse a la página del carrito directamente o bien hacerlo por medio de generadores de temas.

Cómo crear una página de carrito de WooCommerce con Divi

En este paso a paso vamos a ver cómo personalizar este diseño nuevo a nuestra página de carrito de WooCommerce con Divi. Utilizando el page builder de Divi, podremos aplicar no solo elementos de carrito sino más elementos que necesitemos para embellecer esta página.

Si necesitamos conocer un poco más sobre las funciones o ajustes que podemos realizar en el complemento de Divi, pudiese ser de interés nuestro curso:
Curso de Divi 4 Básico y Curso de Divi 4.0 Avanzado

Creación de plantilla general

Conociendo lo que es una plantilla de Divi, necesitamos ingresar en Divi > Generador de temas, y una vez dentro vamos a crear una plantilla nueva para aplicarle a esta las opciones del carrito de compra.

Una vez que hacemos clic en esta opción, simplemente agregamos la opción de carrito que nos permite crear la plantilla personalizada del carrito dentro de la sección Páginas de WooCommerce.

Por último, para comenzar a crear nuestra plantilla simplemente vamos a agregar una nueva plantilla personalizada, haciendo clic en el botón central del recuadro que se nos mostró recientemente.

Una vez nos cargue el editor ya podremos agregar los elementos característicos de una página de carrito

Elementos para página de carrito de WooCommerce en Divi

En esta sección vamos a poder agregar los elementos que más nos convenzan para tenerlos en el carrito, aunque por supuesto los elementos fundamentales van a ser siempre mostrar el carrito, así como el botón de proceder con la compra; sin embargo, también nos vamos a encontrar con más posibilidades para la edición del contenido, como serían widgets o barras laterales, productos destacados, entre otros.

Como primer elemento a agregar, es uno de los más importantes y primordiales para que todo el carrito funcione, como lo es Woo Cart Products. Este módulo se agrega para que se pueda mostrar en la página el resumen de productos que el usuario ha ido agregando mientras visitaba nuestra tienda. Uno de los puntos positivos al momento de crear nuestra página de carrito de esta forma es que, al dejar el cursor sobre los elementos existentes de este módulo, podremos editar uno a uno estos mismos.

Si seleccionamos cualquiera de estos elementos, el propio editor del módulo nos llevará a la sección, por ejemplo, al hacer clic en el espacio superior de toda la tabla, nos llevará al editor del header de la tabla. Aquí podemos aplicarle un color a la tabla, incluso modificar bordes para darle un estilo un poco más atractivo que una simple tabla, permitiendo mejoras a los espaciados, fondo, textos, fuentes, entre otras mejoras, solo a esta parte superior de la tabla.

Así mismo, podemos modificar cualquiera de los demás elementos que están dentro de la propia tabla de precios. Luego de que ya tenemos agregado a nuestra plantilla el módulo que nos muestra los productos, lo más importante sería la opción para poder continuar con nuestro pago, es por esto que el módulo que tenemos que agregar ahora es el de Woo Cart Totals. Este módulo nos va a mostrar todo lo referente a precios y opción de finalizar compra.

De igual forma que el módulo anterior, vamos a tener unos lápices azules una vez situemos el cursor sobre los textos o botones del mismo, permitiéndonos modificar los elementos que posee.

Al igual que en otros módulos básicos, podemos seleccionar el color de fondo que va a tener esta sección en general, pero vamos a centrarnos como ejemplo en la modificación del botón de finalizar compra. Para ello simplemente situamos nuestro cursor sobre este y hacemos clic en el lápiz azul, luego de esto ocurrirá algo curioso y es que en algunos ajustes nos solicitará confirmación de que queremos trabajar el elemento de forma personalizada.

Una vez activamos esta opción, se nos va a permitir editar los ajustes que necesitamos de este botón, tanto el tamaño del texto, color de texto, color de fondo, borde, margin y paddings como también lo referente al estilo, como por ejemplo el tipo de fuente, anchura de la misma, tipo de caligrafía, incluso iconos y posicionamientos del mismo en caso de que necesitemos o queramos agregar un elemento de icono al propio botón.

Como podemos ver, es posible cambiar bastante el aspecto inicial que nos provee WooCommerce, de tal forma que nos ayude a mejorar el aspecto visual de nuestro sitio. Igualmente, esto no es todo lo que podemos agregar, forma parte de las dos cosas más importantes que tenemos que agregar para que el carrito funcione correctamente, pero no es todo. Al encontrarnos dentro de nuestro editor de temas, podemos agregar cualquiera de los módulos que tenemos presentes en nuestro sitio.

Por ejemplo, podemos agregar un slider en la parte superior haciendo referencia a la sesión en la que estamos; para esto agregamos un módulo de pantalla completa sobre los elementos, una vez que lo agregamos, insertamos el módulo de control deslizante de anchura completa ya con esto insertado, modificamos a gusto hasta tener el aspecto deseado, puede ser algo parecido a esto.

Luego de esto podemos agregar todo lo que queramos a esta plantilla, en caso de que necesitemos agregar únicamente módulos de WooCommerce, tenemos a disposición varios módulos. Para acceso a ellos solo tenemos que ingresar a la lista de módulos y escribir Woo en el buscador, esto hará que se nos muestren todos los módulos disponibles para la sección de WooCommerce. Por ejemplo, podemos agregar unos productos en oferta por si la persona se interesa en algunos ya al final, antes de completar su compra.

Para ello agregamos el módulo de Woo Products y modificamos el contenido para solo mostrar productos que tengamos en oferta, así como las columnas a cuatro y limitamos la cantidad de productos para que no muestre todos los productos en esta sección, puede ser 4 productos para que sea mas ligero al usuario.

Así podemos ir agregando módulos hasta que tengamos todo lo que queramos en nuestra plantilla, lo más idóneo es no agregar muchos elementos; sin embargo, hay que tener en consideración que tenemos esta última oportunidad para que el cliente o usuario adquiera otro producto antes de finalizar del todo el proceso de pago.

Qué elementos conviene incluir en una página de carrito personalizada

Cuando preparamos una página de carrito de WooCommerce con Divi, no hace falta llenarla de bloques para que funcione bien. Lo importante es que el cliente pueda revisar su compra sin esfuerzo y tenga claro cuál es el siguiente paso. Hay algunos elementos que conviene mantener sí o sí:

• Productos del carrito: deben verse claramente la imagen, el nombre, la cantidad y el precio. Con el módulo Woo Cart Products podemos trabajar esta parte y adaptarla al diseño de la tienda.
• Cantidad: el usuario debería poder subir o bajar unidades desde el propio carrito.
• Eliminar productos: si cambia de opinión, quitar un artículo tiene que ser sencillo.
• Cupones: si solemos trabajar con códigos de descuento, podemos dejar el campo disponible sin darle más protagonismo del necesario.
• Resumen del pedido: subtotal, envío, impuestos y cualquier otro cargo deberían entenderse de un vistazo.
• Botón para continuar al checkout: tiene que ser fácil de encontrar. Esta página es una de las acciones principales.
• Avisos de WooCommerce: con Woo Notice podemos mostrar mensajes sobre cupones, errores o cambios realizados en el carrito.
• Información sobre envíos: si tenemos envío gratis a partir de cierta cantidad, este es un buen sitio para recordarlo.
• Formas de pago y confianza: unos pocos iconos o textos sobre pagos, devoluciones o garantías pueden resolver dudas antes de continuar.
• Ventas cruzadas: con Woo Cross Sells podemos recomendar algún producto relacionado con lo que el cliente ya está comprando.

Esta última parte conviene usarla con algo de cuidado. Si mostramos demasiados productos recomendados justo antes de pagar, podemos conseguir que el usuario se distraiga en lugar de avanzar.

Divi también nos permite jugar con la distribución. En escritorio, por ejemplo, podemos dejar los productos en una columna más amplia y colocar el resumen del pedido a un lado. En móvil la cosa cambia. Ahí merece la pena comprobar que primero aparezca la información importante y que el total y el botón para continuar no queden demasiado abajo o escondidos entre otros bloques.

Una página de carrito de WooCommerce con Divi debería ser fácil de leer y fácil de usar. Si el cliente entiende qué tiene en el carrito, cuánto va a pagar y dónde debe pulsar para seguir, ya tenemos buena parte del trabajo hecho.

Conclusión

Crear una página de carrito de WooCommerce con Divi nos da bastante margen para adaptar esta parte de la tienda sin quedarnos con la estructura predeterminada.

Podemos cambiar la distribución, ajustar estilos y decidir qué información queremos dejar más visible antes de que el cliente pase al checkout. Durante la configuración, no todo se reduce a colores o espacios. También podemos reorganizar los productos, mover los totales, decidir cómo mostrar los cupones, añadir avisos o incluir alguna recomendación relacionada con lo que ya hay en el carrito.

Divi facilita esta parte gracias al Theme Builder y a sus módulos de WooCommerce. Podemos preparar una plantilla global y trabajarla visualmente sin tener que editar directamente los archivos del plugin. De hecho, al crear una tienda WooCommerce con Divi disponemos de módulos específicos para productos, carrito, totales, ventas cruzadas y checkout. Aun así, conviene no perder de vista para qué sirve realmente esta página. El usuario entra para comprobar su pedido, hacer algún cambio si lo necesita y seguir con la compra.

Por eso, elementos como las cantidades, el total, la opción para eliminar productos y el botón para continuar deberían estar siempre fáciles de localizar. Después podemos añadir información sobre envíos, devoluciones o productos relacionados, pero sin llenar la página de bloques que terminen desviando la atención. Lo mismo ocurre al personalizar el checkout de WooCommerce: cuanto más sencillo resulte completar la compra, mejor.

También merece la pena revisar bien la versión móvil. Una distribución en dos columnas puede funcionar muy bien en escritorio y necesitar bastantes ajustes cuando el espacio se reduce. Si mantenemos esa parte bajo control, personalizar una página de carrito de WooCommerce con Divi puede ayudarnos a mantener el mismo estilo del resto de la tienda sin complicar un paso que debería seguir siendo rápido y sencillo.

También te puede interesar:

• Error 403 WordPress
• htaccess WordPress
• Crear un plugin WordPress
• Cambiar el tema en WordPress
• Exportar tema WordPress
• Personalizar dashboard WordPress