Personalizar las páginas del carro de la compra de WooCommerce con Elementor: la guía definitiva para aumentar las conversiones

Reduzca los abandonos y aumente las ventas personalizando las páginas del carrito de la compra de su WooCommerce.

En este artículo, nos centraremos en Cómo personalizar las páginas del carro de la compra de WooCommerce con ElementorAumenta la confianza de los clientes e incrementa las tasas de conversión mediante la marca, las ventas adicionales, las ofertas de descuento y mucho más. Todo el proceso es sencillo y eficaz, sin necesidad de código.

Personalizar la página del carrito de la compra de WooCommerce

He aquí los dos métodos principales:

Método 1: Utilizar los Bloques de WooCommerce

Los bloques de WooCommerce son herramientas más amigables para los principiantes, aquí están los pasos:

1. Ir a la página de la cesta de la compra
   Navegue en el backend de WordPress hasta Páginas > Cesta de la compra > Editar.

2. Edición de páginas de la cesta de la compra con bloques de WooCommerce
   • Elimine el shortcode predeterminado del carrito de la compra de WooCommerce.
   • Pulse el botón Añadir bloque para buscar e insertar un bloque de cesta de la compra.
   • Añada otros bloques según sea necesario, como "Productos que pueden interesarle", "Testimonios de clientes", etc.

3. Ajustes personalizados del bloque
   Ajuste el tipo de letra, el color y otros parámetros a través de la barra lateral derecha.

Los bloques WooCommerce son adecuados paraPersonalización básicapero con una funcionalidad limitada. Si se requiere un diseño más avanzado o una funcionalidad ampliada, se recomienda utilizar una aplicación como la Elementor Semejante constructor de visualizaciones.

Método 2: Utilice Elementor

Elementor es un potente constructor de páginas que le permite personalizar completamente las páginas del carrito de la compra de WooCommerce con operaciones de arrastrar y soltar, sin tocar el código, y requiere la instalación de la aplicaciónElementor Pro.

Elementor Pro Profesional Genuino

4 de noviembre 15:38

414.1W+14

¿Por qué Elementor es la mejor opción para personalizar las páginas del carro de la compra de WooCommerce?

Elementor ofrece una gran cantidad de opciones de diseño y elementos WooCommerce, aquí están algunos de los principales beneficios de Elementor:

• Widgets WooCommerce enriquecidos
  Elementor ofrece varios widgets de WooCommerce como "Visión general de la cesta de la compra","Venta ascendente","cupón", etc., pueden mejorar la funcionalidad de la página de la cesta de la compra.
• Visualización y edición completas
  Utilice la función de arrastrar y soltar para ajustar el diseño de la página, añadir módulos y previsualizar los cambios en tiempo real.

Cómo crear plantillas personalizadas de producto único para WooCommerce con Elementor

22 de julio 17:38

09610

• Soporte de contenidos dinámicos
  Elementor admite contenido dinámico, como mostrar recomendaciones relevantes u ofertas por tiempo limitado en función de los artículos del carro de la compra del usuario.
• Compatible con todos los dispositivos
  Se puede crear una versión optimizada para móviles de la página de la cesta de la compra con Elementor para mejorar la experiencia del usuario móvil.
• Encofrado prefabricado
  Elementor ofrece una amplia gama de plantillas WooCommerce.El sistema puede importarse rápidamente y adaptarse a sus necesidades.

Personalizar las páginas del carro de la compra de WooCommerce con Elementor

A continuación encontrará un tutorial paso a paso para personalizar una página de carrito de la compra de WooCommerce utilizando Elementor:

1. Crear plantillas de página de carrito de la compra

• Navegue en el backend de WordPress hasta Plantillas > Creador de temas.

• hacer clic (con un ratón u otro dispositivo señalador) Añadir nueva plantillaSi desea crear una plantilla, seleccione "Página única" como tipo de plantilla.

• Elija una plantilla de página de carrito de la biblioteca de Elementor o diséñela desde cero.

2. Plantillas de carrito de la compra personalizadas

Abra el editor de Elementor y diseñe la página del carrito de la compra utilizando el siguiente widget de WooCommerce:

Arrastre el gadget "Cesta::

• localice "Carrito" widget, arrástrelo a la zona de edición de la página.

• El widget mostrará automáticamente el contenido del carro de la compra proporcionado por WooCommerce, incluyendo la lista de productos, cantidades, precios y subtotales.

Widget de carrito de la compra personalizado::

• Resumen del pedido
  • Asegúrese de que los nombres de los productos, las cantidades, los precios unitarios y los subtotales se muestran correctamente.

• Optimización del estilo:
  • Modifique el tamaño de la letra para que el resumen del pedido sea más visible en la página.
  • Utilice un fondo para separar la lista de productos y los botones de acción para realzar la jerarquía.

• Cupón
  • Asegúrese de que este módulo está activado si se admite la función de cupón.
  • Añada un texto explicativo.

• Totales
  • Muestra el importe total, los impuestos y los gastos de envío.

• Optimización del estilo:
  • Añada bordes o espaciado a cada subtotal para mejorar la legibilidad.
  • comandante en jefe (militar) "Proceder al pago" Los botones tienen un color de alto contraste (por ejemplo, naranja o verde).

Widgets clave

Si ademásrefinamientoPágina del carro de la compra, puede arrastrar los siguientes widgets a la posición adecuada:

• Páginas WooCommerce::
  • Se utiliza para añadir rápidamente módulos de funcionalidad relacionados con WooCommerce, como enlaces a páginas de pago.

• Personalizado Añadir a la cesta::
  • Botones de añadir al carro personalizados con características o estilos únicos.

• Ajuste de los detalles de diseño:
  • En la sección Opciones de estilo en el que se modifican los tipos de letra, los colores y el diseño.
  • existe Opciones avanzadas para añadir CSS personalizado o lógica condicional.

Cómo añadir código HTML, JavaScript y CSS a su sitio web mediante la función de código personalizado de Elementor

26 de agosto 10:57

015570

3. Guarde y previsualice la página de la cesta de la compra

Tras completar el diseño, haga clic en actualización para guardar los cambios. Vuelva al front-end para previsualizar la página del carro de la compra y asegurarse de que todo funciona correctamente.Más formas de optimizar su página de carrito de la compra de WooCommerce

Preguntas más frecuentes (FAQ)

1. ¿Cómo editar manualmente la página del carro de la compra de WooCommerce?

Las páginas del carrito de la compra pueden editarse fácilmente a través del editor Gutenberg de WordPress o de constructores de páginas como Elementor.

2. ¿Cómo puedo mostrar un cupón en la página de la cesta de la compra?

Utilice el "cupón" o el módulo Widget WooCommerce.

3. ¿Cuál es la mejor forma de personalizar la página del carro de la compra de WooCommerce?

Utilizar un constructor como Elementor proporciona una mayor flexibilidad y una mayor variedad de funciones sin tener que tocar el código.