Cómo personalizar la página del carrito de WooCommerce con Elementor

¿Está buscando varias formas de personalizar su página de carrito de WooCommerce? Elementor es una de las mejores herramientas cuando se trata de personalizar WooCommerce. Puede configurar y crear fácilmente un diseño personalizado para su página de carrito para su Elementor en muy poco tiempo. Es por eso que te traemos nuestra guía sobre cómo personalizar la página del carrito de WooCommerce con Elementor.

Pero primero, echemos un vistazo a por qué debería considerar usar Elementor para personalizar la página de su carrito.

¿Por qué personalizar la página del carrito con Elementor?

La personalización de su página de carrito de WooCommerce es una parte crucial para mejorar sus tasas de conversión. La interfaz de la página del carrito puede determinar en gran medida si su cliente procederá a pagar o no. Esto incluye agregar opciones para mostrar los detalles del carrito, aumentar/disminuir la cantidad, agregar miniaturas detalladas para los artículos de su carrito, etc.

Y si bien hay muchas maneras de personalizar la página de su carrito, como usar complementos de carrito o mediante programación, usar un creador de páginas puede ser una de las mejores maneras de hacerlo.

Elementor es uno de los creadores de páginas de WordPress más populares disponibles con integración completa con WooCommerce. Puede personalizar fácilmente cualquier página de WooCommerce con él en poco tiempo con toneladas de diseños bonitos, widgets, módulos profundamente personalizados y mucho más.

Además, puede usar Elementor para configurar fácilmente sus páginas de WooCommerce y usar plantillas y módulos dedicados para configurarlos en poco tiempo. Cada módulo y elemento se puede configurar según las necesidades de tu sitio web. Se pueden diseñar a mano para todo lo que desee agregar a las páginas de su carrito de WooCommerce.

Antes que empecemos:

Antes de comenzar con nuestro tutorial, nos gustaría señalar que necesitará Elementor y Elementor Pro para seguir nuestro tutorial.

Si bien es posible administrar y configurar páginas de WooCommerce con la versión gratuita de Elementor, el procedimiento es mucho más difícil con funciones limitadas. No puede usar la opción para usar plantillas y diseños dedicados que son una gran ayuda cuando se trata de personalizar las páginas de su carrito en la versión gratuita. Por lo tanto, le recomendamos que considere comprar Elementor Pro teniendo en cuenta toda la personalización de WordPress que puede obtener de él.

Por 49 USD al año , puedes disfrutar de funciones como:

• Totalmente opciones de personalización, desde cero o mediante plantillas y desde cero.
• Integración completa y opciones para crear y personalizar todas las páginas de WooCommerce, como la página de la tienda, las páginas de productos, los archivos de la tienda, la página del carrito y más.
• Más de 50 widgets profesionales con opciones para widgets específicos de WooCommerce.
• Más de 10 kits de sitios web detallados con más de 300 plantillas que puede configurar y configurar sobre la marcha.
• Generador de arrastrar y soltar fácil de usar para principiantes con increíbles opciones de personalización para cada elemento de su sitio web.
• Increíble soporte para Addons y Extensiones.

También puede elegir entre varios planes según sus necesidades. Cada plan también viene con un período de garantía de devolución de dinero de 30 días que es perfecto en caso de que no esté satisfecho con el uso del complemento.

Del mismo modo, asegúrese de haber configurado WooCommerce correctamente y de haber utilizado también uno de los temas de WooCommerce compatibles. Esto garantizará que no tenga problemas de conflicto al personalizar la página del carrito.

Ahora que hemos explicado por qué debería considerar usar Element para personalizar su página de carrito de WooCommerce, avancemos y veamos cómo puede hacerlo.

¿Cómo personalizar la página del carrito de WooCommerce con Elementor?

Después de instalar y activar Elementor Pro en su sitio web, cree una nueva página en su Panel de WordPress haciendo clic en Páginas > Agregar nuevo . Asigne un nombre a su nueva página personalizada y haga clic en el botón Editar con Elementor .

Esto lo llevará al generador de páginas de Elementor, donde ahora puede agregar contenido a su página de carrito personalizada. Avancemos y agreguemos algunos elementos básicos de WooCommerce para llenar su carrito.

Comience desplazándose hacia abajo en el menú de widgets a la izquierda y haciendo clic en la opción desplegable de WooCommerce . Haga clic en el widget del carrito y arrástrelo a la sección Agregar widget aquí en el generador.

Luego, configure su widget de carrito usando las opciones de Editar Widget a la izquierda. Puede usar la pestaña Contenido para configurar diferentes elementos como:

• Diseño de columna (pago de una columna/dos columnas).
• Actualizar el texto del carrito.
• Aplicar texto de cupón.
• Carrito Personalización total.
• Opciones de actualización automática del carrito.

Por supuesto, también puede configurar el estilo, la fuente, los colores y más para todos estos campos y elementos usando la pestaña Estilo .

Del mismo modo, la pestaña avanzada le permite configurar todas las animaciones personalizadas, fondos, efectos de movimiento y más.

Si desea configurar algunas opciones en el estilo, haga clic en la pestaña Estilo . En este tutorial, le hemos dado a las secciones sombras de cuadro. Haga clic en Secciones y luego en el botón de edición en Box Shadow . Luego, haga clic en la opción Color para darle a su caja de sombra un color personalizado.

Ahora, dale a tu carrito un Borde usando la opción Tipo de borde. Para nuestra demostración, lo configuramos en Sólido. Por supuesto, puede personalizar tanto el borde como la sombra del cuadro usando opciones adicionales.

Del mismo modo, si personaliza elementos adicionales como el Resumen del pedido, el botón Pagar y los Totales, debería obtener un carrito como este:

Por ahora, mantendremos este carro. Pero siempre puede volver atrás y personalizar aún más la página del carrito si es necesario.

A continuación, se pueden agregar algunos elementos más a la página del carrito. Puede agregarlos usando la barra de widgets a la izquierda usando el mismo método que el anterior.

Avancemos y agreguemos un texto de exención de responsabilidad, un video y un formulario de contacto. Todos estos son excelentes elementos para agregar para ayudar a sus clientes con consultas e información sobre notas de pedido, envío y más.

Una vez que haya terminado, puede publicar esta página personalizada y terminar de editarla. Sin embargo, sugerimos agregar esto como una plantilla personalizada para futuras personalizaciones si lo desea. Simplemente haga clic en el botón de flecha junto al botón Publicar en la parte inferior y haga clic en Guardar como plantilla. Luego, proporcione el nombre de su plantilla de carrito personalizado y haga clic en Guardar.

Finalmente, puede terminar de personalizar su página de carrito personalizada haciendo clic en Publicar.

Configuración de su página de carrito personalizada como la página de carrito de WooCommerce

El proceso anterior simplemente crea su página de carrito personalizada de WooCommerce.

Una vez que cree su página de carrito personalizada de WooCommerce en Elementor, debe definir esta nueva página como la página de carrito que WooCommerce necesita usar. Puede hacer esto abriendo su configuración de WooCommerce haciendo clic en WooCommerce> Configuración desde su panel de WordPress. Luego, haga clic en la pestaña Avanzado para acceder a las opciones de Configuración de página .

En la opción de la página de su carrito , continúe y busque el nombre de la página que acaba de crear. Para nosotros, será la página del carrito de demostración. Haga clic en la página de su carrito personalizado, desplácese hacia abajo y haga clic en Guardar cambios.

Esto guardará su página recién personalizada como su página de carrito de WooCommerce predeterminada.

Uso de plantillas de WooCommerce para personalizar la página del carrito de WooCommerce en Elementor:

Puede ver claramente que los pasos anteriores son solo los conceptos básicos para crear su página de carrito de WooCommerce personalizada. Por supuesto, hay mucho trabajo involucrado cuando se trata de personalizar la página del carrito de WooCommerce con Elementor. Pero también es completamente libre de usar un diseño de página de carrito simple con un poco más de estilo y personalización pero para obtener los máximos beneficios.

Si este enfoque se adapta más a tus necesidades, te recomendamos utilizar las plantillas de Elementor . Estos están hechos de toneladas de opciones de plantilla y complementos de plantilla disponibles para Elementor.

Para configurar nuestra página de carrito de WooCommerce, también usaremos un complemento de Elementor gratuito que viene con plantillas de página de carrito dedicadas para nuestra demostración. Si bien hay toneladas de complementos de Elementor y complementos de plantilla disponibles, usaremos CoDesigner para esta demostración. Esta es una de las formas más fáciles y sin complicaciones de obtener una página de carrito perfectamente diseñada para su sitio web.

Entonces, comencemos instalando el complemento.

Instale el complemento CoDesigner:

Abra su Panel de administración de WordPress y vaya a Complementos> Agregar nuevo. Luego, use la barra de búsqueda en la parte superior derecha para buscar ' CoDesigner ' y haga clic en el botón Instalar ahora para instalarlo.

Una vez completada la instalación, haga clic en Activar para finalizar el proceso de instalación y activación.

Activación de los widgets del carrito de CoDesigner:

Antes de agregar su widget de CoDesigner a su página de carrito, debe habilitar el widget en el panel de control de CoDesigner .

Así que abra CoDesigner en su panel de administración de WP. Se abrirá el panel de control de CodDesigner. Luego, haga clic en Widgets.

A continuación, desplácese hacia abajo en las secciones del carrito y habilite todos los widgets debajo de ellas. Estos se agregarán directamente a su menú Elementor Widgets. Ahora, puede agregar directamente su widget personalizado de CoDesigner directamente a su página de carrito.

Finalmente, haga clic en Guardar configuración para habilitar los widgets.

Uso de widgets y plantillas de carrito de CoDesigner:

El proceso para crear y personalizar la página del carrito de WooCommerce en Elementor usando Codesigner es idéntico al proceso anterior usando Elementor.

Simplemente cree una nueva página haciendo clic en Páginas > Agregar nueva y asígnele un nombre. Después de esto, haga clic en editar con Elementor como se indica arriba.

Una vez que haya abierto su nueva página en el generador de páginas de Elementor, estará listo para agregar sus plantillas de CoDesigner. Simplemente haga clic en el icono de CoDesigner en la sección Arrastrar widgets aquí .

Luego, en la pestaña Bloques , use el menú desplegable de categorías y seleccione Carrito . Utilice un diseño apropiado que sea perfecto para su sitio web y haga clic en Insertar.

Si sus widgets de CoDesigner estaban activados, la plantilla de su página de carrito debería aparecer perfectamente. Por supuesto, esto sigue siendo solo una plantilla, por lo que debe personalizar el texto y otros elementos manualmente.

Comencemos reemplazando el texto del encabezado . Haga clic en el widget de encabezado t y use el menú de personalización a la izquierda para agregar su propio texto personalizado.

Del mismo modo, haga lo mismo con los campos de texto debajo de él.

También puede hacer clic en cada widget de carrito y personalizar opciones adicionales , como miniaturas, opciones de subtotales de artículos y campos de cantidad.

Al igual que los pasos mencionados anteriormente, también puede diseñar y editar todos los campos y widgets y personalizar los colores, la tipografía, el relleno, etc. Simplemente haga clic en cualquier widget y use la pestaña de estilo y avanzada . ¡Es así de fácil!

Una vez que haya terminado, haga clic en el botón Publicar para guardar su página de carrito personalizada o guárdela como una plantilla de la misma manera que se mencionó anteriormente.

Una vez más, vaya a WooCommerce> Configuración> Avanzado y seleccione su nueva página de carrito en el campo Página del carrito. Luego haga clic en Guardar cambios para finalizar.

Ahora debería ver su nueva página de carrito en su interfaz

Conclusión:

Y eso termina nuestra guía sobre cómo personalizar la página del carrito de WooCommerce con Elemento r. Elementor es uno de los sitios web más poderosos disponibles para personalizar sitios de WooCommerce y WordPress. Ya sea que use widgets y plantillas adicionales, tiene una gran cantidad de herramientas disponibles para personalizar cada rincón de su sitio web.

Aquí hay algunos consejos excelentes para usted cuando personaliza la página del carrito de WooCommerce en Elementor:

• Asegúrese de que su página de carrito personalizada se pueda usar por completo tanto en dispositivos móviles como en computadoras de escritorio utilizando la opción receptiva.
• Use las opciones de estilo de color y tipografía de Elementor para asegurarse de que la página de su carrito coincida con el resto del diseño de su tema.
• Es una gran idea personalizar la página del carrito y la página de pago para que coincidan entre sí.
• Considere elementos adicionales como productos relacionados, productos destacados , insignias de confianza, etc. en su página de carrito.

¿Pudiste descubrir cómo personalizar la página de tu carrito? ¿Tiene problemas para configurar sus complementos o plantillas? Háganos saber en los comentarios cómo pudo o no personalizar la página de su carrito. Nos encanta ayudar a nuestros lectores con sus problemas y escuchar sus opiniones sobre las personalizaciones de WordPress y WooCommerce.

Si está buscando otras guías para personalizar otras páginas de WooCommerce usando Elementor, ¿por qué no consulta algunos de nuestros otros artículos aquí?

• Cómo personalizar la página de productos de WooCommerce con Elementor
• Creando un Mega menú con Elementor usando el complemento Nav Menu
• Cómo personalizar la página de la tienda de WooCommerce en Elementor