Cómo personalizar WooCommerce con Elementor

Si te has decantado por utilizar WooCommerce para crear tu tienda online y estás buscando un constructor de páginas para crear páginas web atractivas y sin conocimientos avanzados de código, estás en el lugar adecuado. En el artículo de hoy, te mostraré las funcionalidades que aporta Elementor en WooCommerce que necesitas conocer y cómo personalizar WooCommerce con Elementor a través de sus widgets y editor del theme builder.

¿Por qué usar Elementor para tu tienda de WooCommerce?

WooCommerce te permite crear y configurar una tienda online por completo con unos pocos clics, y su sofisticado asistente de configuración elimina la necesidad de contar con conocimientos técnicos. 

Sin embargo, si quieres modificar el diseño, no hay mucho que puedas hacer con WooCommerce. Puedes hacer algunos cambios básicos en las partes de tu tienda, como el color o el tipo de letra, pero necesitarás ayuda profesional si quieres rediseñar el aspecto por completo.

Ahí es donde entra Elementor Page Builder, el mejor maquetador visual gratuito de WordPress de arrastrar y soltar que te permite crear sitios web en esta plataforma de la forma más rápida y sencilla posible.

Con Elementor, tienes multitud de opciones para personalizar y cambiar la apariencia de tu sitio web WordPress de forma sencilla. Dispone de multitud de widgets útiles, una biblioteca de plantillas con un diseño excelente, un conjunto de herramientas de edición móvil únicas y un historial de cambios visible.

Widgets para personalizar WooCommerce con Elementor

Construir sitios web WooCommerce con Elementor a veces puede ser limitante en la versión gratuita de Elementor, pero Elementor Pro añade una amplia cantidad de funcionalidades y opciones a través de sus widgets y maquetador de temas, permitiéndote personalizar la página de producto, categoría de productos, carrito, checkout, mi cuenta y hasta notificaciones de WooCommece.

Por lo tanto, si buscas sacarle el máximo partido a WooCommerce a través de Elementor, su versión PRO es una gran inversión. Los widgets de Elementor para WooCommerce pueden ahorrarte mucho tiempo y esfuerzo. Estos están especialmente diseñados para simplificar tu experiencia de creación de sitios web WooCommerce. Vamos a ver en detalle algunos de ellos:

Widget de Productos Elementor

Gracias al widget de Producto de Elementor, ahora puedes crear una presentación de productos impresionante en tu página. Con el poder de personalización que te ofrece este añadido, hay docenas de diseños en los que puedes mostrar los productos a los clientes. 

Woo Product Grid Widget te ofrece una opción para elegir entre el modo de carrusel y Grid, por lo que es fácil de cambiar entre los diseños cuando sea necesario. Puedes mostrar tus productos usando diseños personalizados junto con funciones útiles como ‘Añadir al carrito’ y ‘Vista rápida’.

Características del widget Product:

• Filas y columnas personalizadas
• Opciones de diseño ilimitadas
• Opciones avanzadas de tipografía
• Efectos de desplazamiento
• Vista rápida
• Sistema de clasificación

Widget de Categorías Elementor

¿Quieres tener de una página separada que ayude a tus clientes a elegir la categoría de los productos en lugar de mostrarlos con todos los productos de tu tienda? Para eso sirve el widget de categorías Product Category de Elementor. 

Con este widget, puedes mostrar tus categorías de productos en elegantes y personalizados diseños, como cuadrícula, carrusel y mosaico. Tienes la posibilidad de elegir cualquiera de los estilos y crear bonitas presentaciones de productos en tu sitio web.

Además, puedes personalizar fácilmente los botones de categoría de producto de WooCommerce en tu sitio web con el editor Elementor.

Características del widget Product Category:

• Múltiples estilos de diseño – cuadrícula, carrusel, mosaicos
• Activar/desactivar título de categoría, descripción y cantidad de productos
• Personalización completa del diseño
• Número de categorías personalizadas
• Opción de columnas personalizadas
• Opción de orden personalizado
• Posición del contenido
• Filtros avanzados

Widget de Mi Cuenta Elementor

Antes, era imposible personalizar esta parte de la web de WooCommerce sin código y CSS personalizados. Pero ahora puedes modificar la página de Mi Cuenta como quieras. Desde hacer cambios en la pestaña en el front-end hasta estilizar diferentes aspectos de la página con sólo unos pocos clics. 

Características del Widget Mi Cuenta de WooCommerce:

• Opciones de Vista Previa para Pestañas
• Opciones de estilo para tablas, pestañas y botones
• Diseño flexible de Pestañas
• Control de posición y alineación
• Personalización avanzada

Widget de Carrito Elementor

¿Sabías que, de media, más del 50% de los carritos no se procesan y nunca pasan por caja? Y otro inconveniente es que muchas veces la razón del abandono del mismo proviene de páginas complicadas que dificultan la parte más importante, finalizar la compra.

Para hacer frente a este problema, existe el widget Menu Cart para Elementor, que te permite añadir un acceso rápido al menú con el carrito de compra y el widget Cart, para personalizar la página de carrito haciéndolo más atractivo para que tus clientes tengan una experiencia de compra agradable.

Características del widget Menu Cart:

• Diseño personalizado simple y elegante
• Personalización de imágenes y posibilidad de edición
• Personalización avanzada del diseño general
• Personalización de botones
• Activar/desactivar campo de cupones
• Activar/desactivar ventas cruzadas

Widget de Añadir al Carrito Elementor

Los propietarios de comercios electrónicos no prestan mucha atención a la importancia que tiene el botón «Añadir al Carrito». La forma en que está diseñado el botón dice mucho sobre la probabilidad de que el visitante o el comprador haga clic en él. Hasta ahora, no había mucha personalización disponible para este botón.

Pero ahora con el widget Añadir al Carrito de Elementor, puedes diseñar el botón y colocarlo en cualquier parte de tu sitio web. 

Características del widget Añadir al Carrito:

• Opción de selección de productos personalizada
• Activar/desactivar la cantidad
• Opción de redirección automática
• Opción de texto personalizado para el botón
• Personalización del botón – alineación, tamaño, relleno, icono.

Widget Checkout Elementor

Si la página del carrito es importante, imagina la de finalizar compra.

Personaliza esta página con el widget Checkout de Elementor y decide usar una o dos columnas, personaliza los campos y estilos y consigue un checkout atractivo en WooCommerce gracias a Elementor.

¿Qué páginas de WooCommerce puedo editar con Elementor?

Es posible editar la mayoría de las páginas de tu tienda online para personalizar WooCommerce con Elementor. Para ello puedes usar los widgets propios de Elementor PRO.

Cómo editar la página de Productos con Elementor

En este apartado te explico cómo editar la página de producto nativamente con Elementor.

Paso 1: Ve a la sección Elementor de tu panel de control de WordPress.

Paso 2: Navega hasta Mis Plantillas y en la pestaña Maquetador de temas selecciona la opción Añadir Nueva. Haz clic en Producto individual en el cuadro emergente y asigna un nombre a tu plantilla. Para finalizar la creación, haz clic en el botón verde.

Paso 3: Accederás a la biblioteca de plantillas, donde podrás elegir entre una gran variedad de estilos para tu página de productos. Aquí es donde puedes cambiar la plantilla prediseñada para que coincida con el tema general de tu tienda o si no tienes, lo creas desde cero. 

Paso 4: En el editor de Elementor, añade una nueva sección con dos columnas.

Paso 5: Ve al menú Elementor, localiza el widget Título del producto y arrástralo a la columna de la derecha.

Paso 6: Localiza y arrastra el widget Imagen de producto a la columna de la izquierda. Ajusta el relleno para mantener la imagen y el título del producto separados.

Paso 7: Arrastra el widget Valoración del producto debajo del título, experimenta con el margen, añade un widget Descripción corta y dale algo de espacio en la parte superior mediante la configuración del margen.

Paso 8: Busca el widget Precio del producto y arrástralo a la sección correspondiente debajo de la descripción. Ve a la configuración de Tipografía y cambia la fuente por defecto. Modifica el tamaño, el peso y el color según tus preferencias.

Paso 9: A continuación, prueba agregar el widget Añadir al carrito. Experimente con la tipografía, como la fuente, el tamaño y el color. Coloca el widget Product Meta debajo del botón Add to Cart o Añadir al Carrito.

Paso 10: Vuelve al proceso de edición de imágenes. Aquí puedes cambiar el radio del borde y la distancia entre la imagen principal y la galería de fotos del producto.

Paso 11: Crea una nueva sección con dos columnas. Arrastra el widget Ficha de producto a la columna de la izquierda. Mientras tanto, coloca el widget Relacionados con el producto en la columna de la derecha. Copia los valores de formato de las columnas modificadas anteriormente y pégalos en las recién generadas para mantener las columnas correctamente espaciadas.

Paso 12: Crea una nueva sección y aplícale el color degradado. Inserta un widget de Venta Adicional en el área y pon relleno alrededor. 

Repite estos pasos para todos los productos en tu página de e-commerce. 

Cómo editar la página de la Tienda con Elementor  

Es posible editar la página de la tienda fácilmente con Elementor y sus widgets. Estos son los pasos:

Paso 1: Navega a Páginas en el Panel de Administración de WordPress. Ahora localiza la Página de la tienda y selecciona la opción editar. Al hacer clic en el botón Editar con Elementor, puedes abrir la página en el mismo editor. 

Paso 2: En el editor, ajusta el diseño si te gusta a ancho completo y, si quieres, también puedes desactivar el título de la página.

Paso 3: Añade el widget de Productos de WooCommerce existente en la página. 

Paso 4: Selecciona la disposición, número de productos y filtra por categorías o excluye si lo necesitas.

Paso 5: Ve a la pestaña Estilo, ahí podrás modificar el aspecto y el diseño de cada área y producto de forma independiente.

Paso 6: Ahora que has terminado de editar, puedes publicar la página.

Mejores temas para WooCommerce y Elementor

Para mejorar la experiencia de compra, un tema que tenga soporte para Elementor y WooCommerce es una decisión importante. Ambos se combinarán y funcionarán perfectamente en la plataforma de WordPress.

Es sumamente importante no caer en el error y elegir un tema comercial bonito, pero sin actualizaciones y con un montón de funcionalidades incluidas en el propio theme. Como recomendación personal es mejor elegir un tema de WordPress con soporte para Elementor y WooCommerce ligero y optimizado y sobre el propio tema ampliar funcionalidades a través de plugins, no al revés. Evita comprar un tema que ya tenga todas las funcionalidades incluidas en la propia plantilla, porque seguramente te dejará tirado. El tema es la base o esqueleto y sobre ella añades el músculo, que son los plugins.

Esta es una selección de algunos de los mejores temas de WooCommerce y Elementor. 

Astra

Astra es un tema multipropósito para WordPress con Elementor como base. También es compatible con otros constructores de páginas, pero junto con Elementor, este tema ofrece compatibilidad total con WooCommerce y los demás plugins de WordPress.

Este tema viene con más de 180 plantillas de inicio que se pueden instalar en cuestión de segundos. Incluyen algunas diseñadas específicamente para tiendas online y Elementor. Los diseños de las plantillas son modernos, coloridos e incorporan algunas funciones estupendas que se pueden instalar en cuestión de segundos.

Hello Theme

No sólo es posiblemente el mejor tema disponible para combinar los dos juntos, sino que también es uno de los temas gratuitos de WooCommerce en Elementor más liviano y optimizado.

Este tema es perfecto para Elementor y te permite hacer todo tipo de acciones e integración de funcionalidades con WooCommerce.

Además recuerda que dispones de plantillas Elementor gratis y de pago que te permitirán crear rápidamente tu tienda online.

Palabras finales

WooCommerce es una gran solución para crear una tienda online. Todas las funciones básicas que necesitas para empezar a vender tus productos están integradas en la plataforma. Sin embargo, no ofrece mucho en cuanto a personalización del diseño. Si quieres personalizar WooCommerce con Elementor encontrarás en este último una solución a las limitaciones de personalización de WooCommerce a través de su herramienta Theme Builder y sus widgets Pro. 

Este plugin premium de creación de páginas facilita la construcción de una tienda de WooCommerce y la personalización de las partes que ésta no incluye. Como lo pueden ser las páginas Tienda, Carrito y Pago.  

El dúo Elementor-WooCommerce es imprescindible para crear una tienda online de excelente desempeño.