Cómo personalizar la página del carrito de WooCommerce sin codificación (gratis)

La personalización de la página del carrito de WooCommerce ofrece varios beneficios, incluido el abandono de la página del carrito, pero hacerlo sin problemas no es pan comido.

La página del carrito lleva a tomar la decisión final de pagar o abandonar el carrito. No querrás que los compradores abandonen el carrito, ¿verdad? Ahí es donde necesitas personalizar la página de tu carrito de WooCommerce. 

En este blog, encontrará una guía paso a paso sobre cómo personalizar las páginas del carrito de WooCommerce sin ningún tipo de codificación.

Empecemos…

¿Cómo se ve una página de carrito de WooCommerce predeterminada?

WooCommerce proporciona un diseño muy básico de una página de carrito. Aunque diferentes temas agregan diferentes estilos a la página, todavía se ve igual.

Estos son los elementos comunes del diseño de una página de carrito de WooCommerce (incluidos, entre otros):

Puede editar la página del carrito de WooCommerce y personalizar los elementos según sus necesidades. Antes de eso, echemos un vistazo a cómo se ve la página predeterminada del carrito de WooCommerce en diferentes temas.

Así es como se ve el diseño de la página del carrito de WooCommerce en Tema de WordPress Veinte Veinte:

Así es como se ve la página del carrito en el Veinte veintiuno tema de WordPress:

Incluso un tema popular de Elementor como Hola elementor le brindará un diseño de página de carrito de WooCommerce de apariencia muy básica con el mismo diseño anterior.

Creo que estará de acuerdo en que todas las páginas del carrito anteriores tienen el mismo diseño y no ofrecen nada sofisticado ni extraordinario.

➡️➡️ Consultar Cómo agregar un conmutador de divisas al sitio web de WooCommerce en 5 pasos

Por qué personalizar la página del carrito de WooCommerce

Según el informe de noviembre de 2023 de BuiltWith, más de 6,6 millones de sitios web activos utilizan WoCommerce.

WooCommerce le permite crear un sitio web de comercio electrónico completamente funcional y listo para usar con sus plantillas, incluida una página de carrito en poco tiempo. Muchos de estos sitios web utilizan las plantillas predeterminadas de WooCommerce para el carrito y otras páginas.

Pero no querrás que la página del carrito de tu sitio web se parezca a otras, ya que esto probablemente desanimará a tus compradores. Para destacar entre la multitud, las ediciones de la página del carrito de WooCommerce o la personalización del carrito de WooCommerce pueden venir al rescate.

También es un hecho que alrededor  70% de personas abandonan su carrito de compras y nunca proceder a pagar. Esto muestra lo importante que es personalizar la página del carrito de WooCommerce.

Y es un hecho conocido que las personas se sienten atraídas por las cosas que son diferentes y se destacan entre la multitud.

Por lo tanto, no permita que la página de su carrito se pierda entre la multitud; personalícela para que se destaque y le ayude a obtener más pedidos. 

Ahora la pregunta es ¿cómo se puede conseguir una página de carrito que se destaque? Bueno, hay dos formas de crear un diseño de página de carrito de WooCommerce.

1. 1. Editar los archivos de WooCommerce (requiere que sepas codificar)
2. 2. Utilice un complemento de arrastrar y soltar

También puedes consultar nuestro blog 👉 Cómo agregar un conmutador de moneda a WooCommerce

Por qué editar el código para obtener una página de carrito de WooCommerce personalizada no es una buena idea

Si bien editar el código para obtener la página de carrito deseada es una opción, no se recomienda para quienes no codifican. Dado que eligió una plataforma lista para usar como WooCommerce para crear su sitio web, supongo que no está buscando codificar nada a mano.

Estas son algunas de las razones por las que los programadores novatos o los no codificadores deberían evitar editar el código predeterminado para fines de diseño de páginas de carrito de WooCommerce.

• Requiere que seas un programador experto y conozcas HTML, CSS, Javascript y PHP como un profesional.
• Si el código no se edita y optimiza de manera eficiente, puede ralentizar su sitio web.
• Deberá cambiar el código cada vez que desee cambiar su tema de WooCommerce
• Cuando WooCommerce presente una nueva actualización, se le pedirá que realice nuevos cambios para que el código sea compatible con una nueva versión de WooCommerce.
• También puedes perder todo tu código cuando WooCommerce se actualice si no creas un tema secundario.

Además, si estás utilizando plataformas como WordPress y WooCommerce para evite codificar en primer lugar, entonces ¿por qué aprender a codificar solo para editar una página de carrito, verdad?

No hay problema. Tengo otro proceso que puedes utilizar para diseñar de forma personalizada tu página de carrito sin tener que codificar. Ni siquiera una sola línea. ¡Promesa!

¡Veamos cómo editar la página del carrito de WooCommerce sin conocimientos de codificación!

Cómo personalizar la página del carrito de WooCommerce usando un complemento de arrastrar y soltar

Ahora puede diseñar una página de carrito con una sencilla tecnología de arrastrar y soltar. Gracias al complemento WooCommerce PageBuilder TiendaMotor.

ShopEngine es lo último WooCommerce constructor con plantillas prefabricadasy widgets para personalizar sus páginas WooCommerce y módulos con útiles funcionalidades de comercio electrónico. Con este complemento, obtienes control total sobre el diseño de tus páginas de WooCommerce, incluida la página del carrito.

Mientras ShopEngine te ofrece un prediseñado Plantilla de carrito, puede crear su página de carrito desde cero y también puede personalizar el carrito de WooCommerce. En este blog, lo guiaré a través del proceso de cómo editar una página de carrito de WooCommerce para crear una nueva desde cero.

¿Necesita más razones para convencerse de utilizar ShopEngine? Lea nuestro blog en 11 razones para elegir ShopEngine

Paso #1: Instale Elementor y ShopEngine

Para comenzar con el proceso de personalizar la página del carrito en WooCommerce, necesitará dos complementos.

1. Elementor
2. TiendaMotor 

Dado que ShopEngine es un creador de páginas WooCommerce para Elementor y requiere Elementor, asegúrese de instalar Elementor primero. 

Paso #2: cree una plantilla de página de carrito

Una vez que haya instalado ambos complementos, cree una plantilla de carrito. Para crear una plantilla de página de carrito:

• Ir a: Panel de control => ShopEngine => Plantilla de constructores
• Hacer clic en Agregar nuevo para abrir la ventana Configuración de plantilla
• Dar un Nombre de la plantilla de tu preferencia
• Elegir Escribir como carrito desde el menú desplegable
• Encender la opción Establecer predeterminado para anular cualquier página de carrito existente
• Elija la opción en blanco debajo Diseño de muestra 
• Haga clic en Guardar cambios actualizar

Nota: Conseguir un Plantilla de carrito lista para usar, elija la opción "Diseño de muestra 1" mientras crea la plantilla. También puedes editar cada elemento de esa plantilla prediseñada. Elegí el espacio en blanco porque voy a crear uno desde cero.

Paso #3: elija un diseño/estructura

Ahora es el momento de elegir un diseño. Para empezar 

• Ir a ShopEngine => Módulo de constructores
• Coloca el cursor sobre la plantilla del carrito de la lista
• Haga clic en Editar con Elementor

• Una vez que se abre el Editor de Elementor Hacer clic en Agregar nueva sección (+) icono 
• Ahora elige el estructura/diseño te gusta

Paso #4: Diseñe la página del carrito usando los widgets de ShopEngine

ShopEngine proporciona cinco widgets exclusivamente para diseñar un WooCommerce Plantilla de carrito. Junto con los widgets de plantilla de carrito, también puede utilizar el Formulario de cupón widget y más de cinco widgets generales para crear la página de su carrito.

Para este blog, voy a utilizar los siguientes widgets:

• Mesa de carrito: El widget del carrito muestra todos los productos del carrito en formato de tabla con precio, cantidad y subtotal. Los clientes pueden actualizar la cantidad de productos y también borrar el carrito con un solo clic..
• Total del carrito: Este widget muestra todos los métodos de envío disponibles y el total del pedido.
• Volver a la tienda: Este widget proporciona un botón con un enlace que lo lleva de regreso a la página de la tienda.
• Formulario de cupón de pago: Los clientes pueden utilizar su cupón de descuento utilizando este widget.
• Producto de oferta: Este widget le permite mostrar sus productos en oferta en la página del carrito y también con un temporizador de cuenta regresiva que muestra el período de programación de ventas. Este es un widget general de ShopEngine.
• Venta cruzada: La venta cruzada muestra todos los productos de venta cruzada de manera atractiva en la página del carrito.

Primero, necesitas enciende los widgets desea utilizar en la página de su carrito. Encender  

• Ir a Panel de administración => ShopEngine => Widgets. 
• Desplázate y busca el widget que deseas utilizar.
• Permitir los widgets que quieres usar
• Haga clic en Guardar cambios en la parte superior de la página

Ahora es el momento de arrastrar y soltar los widgets en tu diseño. Vuelva al modo editor de la página del carrito:

• Buscar para el widget
• Arrastrar y soltar los widgets (uno por uno)

Nota: Puede ocultar el botón Continuar comprando y el botón Ocultar todo.

Como ShopEngine es totalmente compatible con Elementor, puedes utilizar varios diseños en la misma página. Para la siguiente parte, usemos un diseño diferente. Para hacerlo, agregaré una nueva sección con una estructura diferente y arrastraré y soltaré Venta cruzada y Widgets de productos de oferta.

Nota: Necesitas agregar productos de venta cruzada y poner productos a la venta con horarios desde el panel de administración en la configuración del producto para que los productos de venta cruzada y oferta aparezcan en la interfaz.

Tanto los productos de venta cruzada como los de oferta le ofrecen diferentes configuraciones que puedes personalizar. Entonces, después de arrastrar y soltar el widget, personalice la configuración según sus preferencias.

Con el widget de venta cruzada, obtienes opciones como activar/desactivar Habilitar control deslizante, mostrar/ocultar venta flash, precio de oferta, botón de carrito y la cantidad de productos que se mostrarán en la configuración de contenido. Para los controles deslizantes, obtienes opciones como Diapositivas por vista, Bucle y Reproducción automática. Velocidad de diapositiva, etc. Además, también obtienes la opción Ordenar por y Ordenar en la pestaña avanzada.

Los productos de oferta le proporcionan configuración de contenido como Ordenar, Ordenar por, Fecha, Mostrar producto, Columna, Espacio entre columnas y Espacio entre filas. También obtienes otras configuraciones que incluyen Habilitar venta, Insignia, Insignia de venta, Venta, Límite de palabras del título, Insignia de porcentaje, Reloj de cuenta regresiva y Días.

Paso #5: Personalice los parámetros de estilo de la página del carrito de WooCommerce

No solo estructura, con ShopEngine también obtienes control total sobre el estilo de la página de tu carrito.

Para cambiar los parámetros de estilo de los widgets de ShopEngine, coloque el cursor sobre el widget que desea editar para encontrar una opción Editar en la esquina superior derecha. Haga clic en esa opción para encontrar todas las configuraciones del carrito de WooCommerce para contenido y estilos en el panel Elementor colocado en el lado izquierdo.

Echemos un vistazo a la configuración de estilo que puedes personalizar para cada uno de los widgets utilizados en este blog:

Mesa de carrito: 

Puede cambiar la configuración de estilo del encabezado de la tabla, el cuerpo de la tabla, la imagen del producto y la cantidad. Pie de página de tabla y fuente global. Para más detalles, puedes consultar nuestro documentación en la mesa del carrito.

Volver a la tienda:

Cambia la alineación de los botones, la tipografía, el color del borde, el radio del borde y la sombra del cuadro. Para más detalles, puedes consultar nuestro documentación sobre el widget Volver a la tienda

Formulario de cupón:

Para el formulario de cupón, obtendrá una configuración de estilo para información, descripción, formulario de cupón, botón de aplicación y fuente global. Puede consultar las opciones de estilo en detalle en nuestro documentación en el formulario de cupón.

Total del carrito:

Para el widget Total del carrito, obtienes muchas opciones de estilo para cambiar el estilo de la tabla, la entrada, el botón de actualización de pago y la fuente global. Para obtener configuraciones de estilo de carrito de WooCommerce más detalladas, puede consultar nuestra documentación sobre el total del carrito.

Venta cruzada: 

Para el widget de venta cruzada, obtienes varias opciones de estilo que incluyen estilos para artículos, ventas flash, imagen, carreras de títulos, precio, Agregar al carrito, estilo del control deslizante y fuente global. Para más detalles sobre Cross, estilo Sale consulte la documentación.

Productos de oferta:

Obtiene diferentes opciones de estilo para el envoltorio del producto, la imagen del producto, la insignia del producto, el reloj de cuenta regresiva, el estilo del contenido, la barra de stock y progreso y la fuente global. Para conocer más detalles sobre las opciones de estilo. consulte nuestra documentación sobre el widget Oferta de producto.

Paso #6: Actualizar y obtener una vista previa de la página del carrito personalizado de WooCommerce

Después de cambiar los estilos, haga clic en Actualizar para guardar los cambios y hacer clic en Avance para ver los cambios.

Si ha seguido el diseño y la configuración mencionados en este blog, debe diseñar una página de carrito personalizada en WooCommerce usando ShopEngine como la que se muestra a continuación:

Bonificación: consejos para impulsar las ventas de su tienda de comercio electrónico utilizando los módulos ShopEngine

Ahora ya sabes cómo crear y personalizar una página de carrito en WooCommerce. ShopEngine, además del creador de plantillas de páginas de carrito de WooCommerce, le proporciona módulos útiles con importantes funciones de comercio electrónico que pueden impulsar las ventas de su tienda en línea. Los módulos ShopEngine incluyen:

• Vista rápida
• Muestras de variación
• Lista de deseos
• Comparación de productos

Estoy seguro de que, como propietario de una tienda WooCommerce, sabes lo importantes que son estas funcionalidades para que la experiencia de compra online sea buena. Si hablamos de la Plantilla de carrito, usando el Vista rápida botón y el Lista de deseos El botón de venta cruzada brindará a sus clientes una mejor experiencia de compra. Y esto aumenta las posibilidades de que sus clientes compren más productos.

Con Quick View, los clientes pueden consultar fácilmente la información completa de cualquier producto con un solo clic. De manera similar, con solo un clic, los usuarios pueden agregar el producto a su lista de deseos usando el botón del módulo de lista de deseos para realizar la compra más tarde. Ambas funciones pueden desempeñar un papel importante en el aumento de las ventas de productos.

Por lo tanto, no solo personalice la página de su carrito, utilice los módulos de ShopEngine para brindarles a sus clientes una excelente experiencia de compra e impulsar las ventas de su tienda.

Blogs extra:
✅ Cómo personalizar la página de categorías de WooCommerce sin codificación
✅ Cómo personalizar la página Mi cuenta de WooCommerce usando ShopEngine 
✅ Cómo personalizar la página de la tienda WooCommerce usando ShopEngine 
✅ Cómo personalizar la página del producto WooCommerce usando ShopEngine
✅ Cómo personalizar la página de pago de WooCommerce usando ShopEngine
✅ Más de 9 complementos de carrito de compras útiles y mejores para WordPress y WooCommerce

¿Por qué actualizar a ShopEngine Pro?

Bueno, honestamente, ShopeEngine le brinda suficientes funciones para que su tienda en línea sea buena. Pero ¿por qué debería conformarse con lo bueno cuando puede obtener lo mejor, verdad?

ShopEngine Pro le ofrece una gran cantidad de funciones que harán que las compras en línea en su tienda de comercio electrónico sean la mejor experiencia de compra para sus clientes. Además de personalizar las páginas del carrito de WooCommerce, puede acceder Más de 20 módulos que incluye Cuenta regresiva de venta flash, insignias, Notificación de ventas, pago rápido, Pago parietal, Cambiador de moneda, y muchos más.

No solo la satisfacción del cliente, las funciones de ShopEngine están diseñadas para hacer que la administración de la tienda en línea también sea súper fácil con módulos como Hacer un pedido, Pedido pendiente, Campo de pago adicional, y muchos más.

No olvidar 16+ prefabricados plantillas con control total de personalización de WooCommerce y Más de 70 widgets avanzados para crear cada plantilla de WooCommerce desde cero si lo deseas.

Cuando se trata de la página del carrito, ShopEngine también le permite crear una página de carrito personalizada de WooCommerce para su tienda en línea.

Un complemento con tantas funciones, plantillas prediseñadas y módulos que además a un precio muy razonable seguro que lo probarás, ¿verdad?

¡Obtenga su versión de ShopEngine hoy y nunca más se preocupe por cómo personalizar WooCommerce!

Ultimas palabras

¡Felicidades! Ha rediseñado con éxito la página de su carrito personalizado de WooCommerce. ¿No fue tan fácil? 

Bueno, eso es lo que hace ShopEngine, ahora sabes cómo personalizar una página de carrito de WooCommerce sin codificación.

Por lo tanto, no limite su tienda en línea a los estilos predeterminados, rediseñe todo su sitio web WooCommerce y use los módulos para hacer que su negocio en línea sea más exitoso que nunca. 

Entonces, ¿qué página de WooCommerce vas a personalizar a continuación? No olvide compartir su experiencia al usar ShopEngine.