Cómo personalizar el carrito de compra con Elementor

¿Alguna vez has intentado diseñar y modificar la página del carrito de WooCommerce utilizando la interfaz visual de Elementor?

Ahora puedes personalizar completamente tu página de carrito con el nuevo widget de carrito de Elementor para asegurarte de que refleja el estilo de tu marca y está configurado para maximizar las ventas.

En la versión de noviembre de 2021 de Elementor Pro se añadieron nuevas funciones al constructor de WooCommerce de Elementor, incluyendo widgets específicamente diseñados para las páginas de pago de tu tienda, mi cuenta y el carrito de la compra.

Anteriormente, tenías que depender de tu tema de WooCommerce para gestionar estas páginas. Con Elementor, ahora puedes gestionar el aspecto, la usabilidad y el contenido de estos componentes de forma independiente.

En este tutorial nos centraremos en el uso de un solo elemento: el nuevo widget Cart de Elementor. Aprenderás a gestionar y mejorar la página del carrito de tu tienda sin salir de Elementor utilizando el nuevo widget del carrito en Elementor Pro.

Actualiza a Elementor Pro

Elementor Pro es el plugin de construcción de sitios web más avanzado para WordPress, que te permite diseñar visualmente formularios, entradas, WooCommerce, diapositivas y mucho más.

Más info sobre Elementor

Cómo funciona el widget de Carrito de Elementor

El carrito de la compra en tu negocio es un componente crucial de la experiencia del usuario en tu sitio web de comercio electrónico. Los carros de la compra facilitan a los consumidores la realización de pagos y simplifican a los clientes el almacenamiento de las cosas que les interesan.

Con el nuevo widget de carrito de Elementor, puedes personalizar completamente la página de tu carrito para asegurarte de que se adhiere a la marca del resto de tu tienda y está configurada para maximizar las ventas.

Puedes personalizar el widget del carrito de varias maneras:

• Elegir varios diseños de carrito, como el de una o dos columnas.
• Para cada artículo del carrito, puedes cambiar el tipo de letra y la combinación de colores.
• Ajustar el espacio entre filas de cierta información del carrito, por ejemplo, para afinar la disposición y el espaciado de cada pieza de contenido.
• Editar el texto de los botones y las etiquetas de las secciones importantes de la página del carrito.
• Los formularios de tu cesta, incluido el formulario de descuento y el estimador de tarifas de envío, pueden personalizarse.

Al igual que con todos los diseños de Elementor, también tendrás opciones únicas para alterar la apariencia de tu cesta en varias pantallas, lo que te permitirá garantizar que cada cliente tenga una experiencia de compra positiva tanto si utiliza un ordenador de sobremesa como una tableta o un dispositivo móvil.

Cómo utilizar el widget de carrito de Elementor

Empecemos con las instrucciones para configurar el widget del carrito de Elementor en tu tienda WooCommerce.

1.Utiliza Elementor para cambiar la página del carrito por defecto de tu tienda.

WooCommerce construirá automáticamente una página de carrito para tu negocio cuando establezcas una tienda WooCommerce que haga uso del shortcode de carrito de WooCommerce.

Utilizarás el diseño de esta página ya existente para este ejemplo. Pero para acceder a todas las posibilidades de diseño de Elementor, editarás esta página con Elementor en lugar de utilizar simplemente el estilo predeterminado de tu tema.

Para empezar, localiza la página Cart en la lista de páginas de tu panel de control. Tiene que estar etiquetada como "Página del carrito".

Una vez que la hayas localizado, abre el editor de WordPress haciendo clic en el botón Editar. Después, en el editor, selecciona Editar con Elementor para abrir la interfaz de Elementor.

2. Utiliza el Elementor Cart Widget, en lugar del WooCommerce Cart Shortcode.

El shortcode [woocommerce cart] se muestra en un widget del Editor de Texto de Elementor cuando ves por primera vez la página del carrito existente de tu tienda en Elementor.

Deberías reemplazar este widget/shortcode actual con el nuevo widget de carrito de Elementor antes de comenzar tu diseño. Una vez hecho, puedes empezar a modificar el aspecto de la página del carrito.

Para ello, visita el front-end de la tienda, añade unos cuantos productos a tu cesta y luego actualiza la interfaz de Elementor. Cuando reinicies Elementor, esas cosas deberían aparecer en tu cesta de la compra mientras sigues trabajando en tu diseño.

Puedes simplemente eliminar esas cosas de tu cesta en el front-end de tu sitio y luego refrescar la interfaz de Elementor si quieres probar cómo aparece una cesta vacía.

3. Ahora sí: personaliza el carrito a tu gusto

Puedes actualizar la configuración de tu carrito en la barra lateral como cualquier otro widget de Elementor, lo que te da un control total sobre el diseño, la apariencia y otros aspectos del widget.

Para empezar, puedes seleccionar un diseño de una o dos columnas en el menú desplegable de Diseño de la configuración general. Cuando se utiliza un estilo de dos columnas, los totales del carrito se mueven a la parte superior, lo que hace que sean más fáciles de ver cuando se utiliza un dispositivo más grande para navegar.

Activando la opción Columna fija derecha, también puedes hacer que la columna de los totales del carrito se mantenga fija al desplazarse. Para asegurarte de que no se cruce con otra información, es posible que desees proporcionarle adicionalmente un desplazamiento.

A continuación, si es necesario, puede modificar el texto del botón "Actualizar carrito" mediante la configuración del Resumen de pedidos. Las opciones para cambiar las etiquetas y la alineación de numerosos elementos del carrito, como el texto del botón "Proceder a la compra", están disponibles en la configuración de los totales.

Puedes cambiar la configuración del widget si has activado la opción de calculadora de envíos de WooCommerce. Dirigiéndote a Configuración de WooCommerce Opciones de envío y marcando la casilla para permitir la calculadora de envíos en la página del carrito, puedes activar la calculadora de envíos en la configuración de WooCommerce.

Por último, tienes la opción de activar las actualizaciones automáticas del carrito en la configuración de Opciones adicionales. Al activar esta opción se actualizará el carrito automáticamente sin obligar a los usuarios a recargar la página, en lugar de requerir que los usuarios hagan clic en el botón Actualizar para implementar sus cambios.

4. Modifica el aspecto de tu cesta

Ahora, navegando a la pestaña de Estilo en la configuración del widget, puede personalizar el aspecto de su carrito. Puedes cambiar una variedad de ajustes en esta área, incluyendo los de las secciones, la tipografía, los formularios y más.

Las posibilidades generales para el estilo de cada área son las siguientes:

• Totales: tiene control de diseño sobre la sección "Totales del carrito", que incluye un desglose del precio total del pedido del cliente.
• Botón de pago: Usted tiene el control sobre la apariencia del botón de pago. Dado que esta es la actividad que quiere que realicen los clientes, querrá hacerla atractiva para que no se la pierdan.
• Secciones: El estilo general de cada uno de los tres elementos del widget del carrito es ajustable. Por ejemplo, puede añadir una sombra de caja o aplicar un fondo a todo el carrito.
• Formularios: Si has habilitado el cálculo de envío en la página del carrito, puedes dar estilo al formulario del campo de cupón y al formulario de los campos de envío. Por ejemplo, puede añadir algo de distancia entre los campos del formulario utilizando el parámetro Espacio entre filas.
• Tipografía: Para las etiquetas importantes como los títulos, las descripciones, los enlaces, etc., puede modificar algunas de las tipografías y colores generales.
• Otros botones: Aplicar Cupón y Actualizar pueden ser estilizados usando todas las opciones de estilo estándar de Elementor.
• Resumen del pedido: tiene opciones de estilo tanto para los artículos del carrito de la compra como para el resumen del pedido.
• Personalizar: puede tener un control más preciso sobre los totales, los cupones y el resumen del pedido. Recibirá más ajustes con énfasis en ciertas áreas si añade estas opciones. Por ejemplo, puedes usar esto para crear un color de fondo distinto, una sombra de caja, un borde, etc. para tu sección de "totales" para que se destaque del resto de tu carrito.

5. Personalice la versión móvil de su cesta

Tu carrito de la compra será automáticamente adaptado a los dispositivos móviles si utilizas el widget Elementor Cart. Para asegurarte de que todos los clientes tengan la mejor experiencia posible, puedes entrar y editar manualmente cómo debe aparecer tu carrito en varios dispositivos, al igual que haces con otros widgets y diseños de Elementor.

Abre el modo de edición responsive en Elementor y verás iconos de dispositivo movil. Por ejemplo, puedes modificar el tamaño de la fuente de ciertos elementos o alterar el espacio entre filas en función de si alguien está utilizando un dispositivo de escritorio o móvil.

6. Modifica los ajustes de WooCommerce en la configuración del sitio

El último paso es opcional, pero es importante tener en cuenta que la sección de Ajustes del sitio de Elementor también te permite gestionar importantes asignaciones de páginas de WooCommerce.

Por ejemplo, puedes indicar a WooCommerce que utilice tu nueva página desde los Ajustes del sitio de Elementor si has generado una nueva página para tu carrito con Elementor en lugar de modificar la que ya existía.

Estos ajustes son accesibles desde la pestaña de WooCommerce en la sección estándar de Ajustes del Sitio. La sección de Ajustes tendrá una opción de WooCommerce.

Elementor Pro: ahorra horas de trabajo

Ahora ya sabes cómo crear y configurar tu página de compra sin salir de Elementor gracias al nuevo widget de carrito de WooCommerce en Elementor Pro.

Puedes modificar la apariencia de cualquier elemento, seleccionar un nuevo diseño, ajustar las etiquetas y mucho más utilizando las opciones de Elementor. Con este control adicional sobre la página de tu carrito, podrás asegurarte de que su diseño complementa el resto de tu tienda y optimizarlo para aumentar las ventas.

Además, Elementor Pro incluye ahora nuevos widgets para otras páginas cruciales de tu tienda, como las páginas de pago y Mi cuenta. Ya no es necesario emplear los shortcodes de WooCommerce gracias a estos widgets, que te permiten un mayor control de tu negocio que antes.

La opción de personalización de la página de producto único de WooCommerce y otras capacidades que ya tienes en WooCommerce Builder se amplían con estos widgets adicionales.

Pues hasta aquí el artículo. Actualiza a Elementor Pro si aún no lo estás usando para recibir acceso al nuevo widget de Carrito, WooCommerce Builder y todas sus fantásticas características.

Actualiza a Elementor Pro

Elementor Pro es el plugin de construcción de sitios web más avanzado para WordPress, que te permite diseñar visualmente formularios, entradas, WooCommerce, diapositivas y mucho más.

Más info sobre Elementor