Elementor Pro posibilita adaptar todas las plantillas de WooCommerce (el archivo de productos, la ficha de producto, el menú del carrito, el carrito, el checkout, el resumen de compra y mi cuenta). Lo esencial es que Elementor solo maqueta páginas estáticas, mientras que el contenido dinámico exige la versión Pro. Para ello hay que instalar WooCommerce, Elementor Pro y un tema mínimo como Hello.
WooCommerce es un plugin sin límites y hoy nos centraremos en la parte del diseño, en cómo dejarlo atractivo y lograr diseños diferentes mediante Elementor Pro para captar más clientes.
¿Cuántas veces nos ha ocurrido al montar una tienda online: páginas como cart, checkout o mi cuenta quedaban relegadas por el diseño predeterminado. Eso provocaba que nuestros usuarios perdieran confianza al comprar productos en nuestra web.
Pero desde hace un tiempo, con Elementor podemos personalizar a fondo estas páginas para darles el aspecto que requerimos y conseguir que toda nuestra web sea homogénea y cuente con una identidad de marca bien aplicada.
Herramientas necesarias para crear tu tienda online con Elementor + WooCommerce
Igual que Elementor supuso una revolución en WordPress al facilitar la creación de sitios web sin necesidad de temas multipropósito, ahora ocurre lo mismo con WooCommerce + Elementor.
Antes, hacía falta un tema específico de WooCommerce y las funcionalidades se limitaban a las que ofrecía el tema o a tu habilidad para programarlas en PHP dentro de él.
Es fundamental tener presente que, si bien Elementor es el maquetador de páginas, para maquetar contenidos dinámicos necesitamos el maquetador de temas, o sea, Elementor Pro.
Así, Elementor Pro sustituye a los temas especializados con todas las funcionalidades que el proyecto necesita, aplicadas mediante maquetación visual y con un tema mínimo como Hello.
Una de las opciones relevantes que ofrece la herramienta al maquetar es la posibilidad de aplicar una sola vez los estilos globales, como colores, tipografías y tamaños.
De este modo, se aplicarán de forma dinámica en cada página, permitiendo además cambiar el diseño global de la tienda con un solo clic para transformar por completo su diseño.
Esto nos aporta mayor flexibilidad y nos evita funcionalidades innecesarias en el proyecto de tienda propio o de nuestro cliente.
Tema Hello para tu tienda con WooCommerce
Existen innumerables plugins, extensiones y temas para mejorar WordPress y WooCommerce que darían para decenas de entradas.
En este artículo nos limitaremos a la parte de diseño y a cómo aprovechar Elementor Pro y ahorrar costes y complicaciones usando la menor cantidad de plugins y el tema gratuito Hello.
Si quieres profundizar sobre este tema nativo de Elementor, puedes consultar este artículo sobre Hello que he escrito hace poco.
Widgets de Elementor para WooCommerce
En Elementor Pro hay una gran cantidad de widgets que se habilitan al instalar WooCommerce. Para que te hagas una idea, con estos elementos podremos maquetar las páginas que necesita nuestra tienda online, así como la página del producto, la tienda o incluso el checkout.
Es importante comprender que estos widgets funcionan de forma dinámica, es decir, con etiquetas dinámicas que recuperan el contenido de la base de datos sin problemas.
Igual que para una template de single post o Archive post, con Elementor + WooCommerce se simplifica el diseño del contenido dinámico sin requerir un tema dedicado ni limitado a sus funcionalidades.
Todos los datos que vamos introduciendo sobre nuestros productos, como el título, el precio, la descripción, etc., son sencillos de diseñar con estos widgets en sus respectivos templates dinámicos.
Plantillas de WooCommerce para personalizar con Elementor Pro
Aunque Elementor Pro incluye el WooCommerce builder desde 2018, en los últimos tiempos ha habido una auténtica revolución en funcionalidades y opciones soportadas, tanto en templates como en páginas especiales. Esto ha hecho que el tema sea casi irrelevante en nuestra tienda online.
Hoy en día, es muy sencillo en WooCommerce hacerlo todo con Elementor Pro y ahorrarnos un theme dedicado o muchos plugins específicos, porque Elementor nos facilita mucho la tarea.
Además, disminuye los costes de desarrollo y diseño y elimina numerosos problemas de incompatibilidades entre tu tema y los plugins, simplificando el mantenimiento que requiere la tienda (que ya de por sí es muy laborioso en WooCommerce).
Y, lo más relevante, tendrás la posibilidad de personalizar tu tienda y tus productos con la facilidad, flexibilidad y potencia que definen a Elementor Pro.
La página de la tienda, shop, archivo de productos o products archive
La página de la tienda se identifica con el archivo de productos y esta sección no debe confundirse con la home o inicio de tu web.
Esta funcionalidad existe desde que Elementor Pro añadió soporte para WooCommerce hace ya más de cinco años y equivale, o mejor dicho, complementa al archivo de blog. Sin embargo, en este caso, en lugar de entradas vemos nuestros productos.
Además, atención, próximamente se podrán filtrar las categorías de los productos de la tienda de forma nativa con Elementor, lo que nos ahorrará un plugin para esa necesidad (ver más abajo).
Plantilla de producto o single product
Podemos crear una página de producto totalmente personalizada o incluso un diseño distinto por categoría, cada uno con su estilo propio. Además, gracias a Elementor, aquí tampoco necesitaremos un tema dedicado para la tienda de WooCommerce.
Elementor nos ofrece una serie de widgets importantes para personalizar el diseño con gran detalle:
- Título del producto: Recupera el nombre del producto de la base de datos.
- Precio del producto: Añade el precio a la ficha de los productos.
- Imágenes del producto: Nos permite mostrar una imagen o una galería de fotos de productos.
- Stock de producto: Personaliza la cantidad de preguntas disponibles en stock.
- Metadatos de producto: Permite mostrar y personalizar el aspecto de las categorías, etiquetas y SKUs de los productos.
- Descripción corta y larga de productos: Nos da la opción de activar y personalizar ambos campos en función de la funcionalidad de la ficha de productos y decisiones SEO.
- Información adicional: Podemos añadir en cada uno de los productos información adicional relevante.
- Migas de pan: Uno de los elementos fundamentales para mejorar la usabilidad del sitio web.
Con esta variedad de opciones, podemos decidir la información que queremos ofrecer sobre nuestros productos y hacerlo con un diseño totalmente personalizado, sin una línea de código y conforme al libro de estilo de la tienda.
El menú Carrito o menu cart
Es un widget que te permite tener, de forma flotante o como sidebar, un breve resumen de lo adquirido. Resulta muy útil para mostrar los productos que el usuario va añadiendo de manera dinámica y atractiva.
Las ventajas de este widget son que aporta mucha información sobre lo que el usuario tiene acumulado en el carrito. Además, con solo hacer clic en el icono, aparece este popup rápidamente para que el usuario pueda ver que, al pulsar el botón de «Añadir al carrito», el producto se ha añadido correctamente.
En cuanto al diseño del icono, es totalmente personalizable. Si dispones de tu propia iconografía o pack de iconos, visualmente resultará mucho más atractivo usar el icono que necesites según tu diseño.
Inspira seguridad y dispone de dos CTAs o llamadas a la acción mediante dos botones en la parte inferior: uno para dirigirse a la página del carrito y otro para completar la compra directamente.
Permite cambiar las cantidades o incluso suprimir el producto desde este mini carrito flotante que, tal como se ha comentado previamente, cuenta con dos maneras alternativas de aparecer: como popup flotante o como popup lateral.
Con esta funcionalidad de Elementor Pro te libras de tener que usar temas premium de WooCommerce, lo que supone un ahorro económico y menos complicaciones al suprimir un eslabón en el mantenimiento de tu WordPress.
Al emplear este widget, podríamos prescindir de plugins adicionales que cumplan esa misma función.
Página del carrito de la tienda
Esta página se compone, fundamentalmente, de el listado de productos añadidos y los importes totales a pagar.
El widget de carrito permite personalizar las columnas, la opción de aplicar cupón (o incluso esconderlo), los totales y posibilidades extra como incorporar un template personalizado en caso de que no haya ningún producto comprado.
Esta página es otro diseño que se puede personalizar mediante este widget, sin necesidad de recurrir a temas especializados de WooCommerce.
Página de checkout o Finalizar compra
En esta página de finalizar compra, emplearemos el widget Checkout para personalizar el diseño de cada una de las opciones disponibles.
Entre los aspectos más relevantes que se pueden configurar están los datos de facturación, las notas adicionales para el pedido, el campo para cupón (si se desea mostrar) y la pasarela para efectuar el pago.
Página de Resumen tras la compra
Esta es la página que se muestra después de haber completado el checkout. Aparte de consultar todos los detalles, es un lugar idóneo para dar las gracias y fidelizar a los clientes. Es una sección que conviene cuidar mucho, tanto para evitar problemas y devoluciones como para fidelizar. También puede resultar un espacio práctico para preguntas frecuentes.
Página de Mi cuenta
La plantilla de Mi Cuenta permite mostrar en una página especial de WooCommerce todos los detalles de los pedidos, las direcciones, los datos de la cuenta o incluso las descargas, si se tratara de un comercio electrónico de productos virtuales.
Funcionalidades adicionales de Elementor para tu tienda
Existen varias funciones, aparte de los plugins y las plantillas o templates, que conviene conocer.
- Productos relacionados y Ventas cruzadas: Dos widgets útiles que permiten mejorar el ticket medio y el engagement de los usuarios. Los productos relacionados, mostrados cuando se está viendo un producto determinado, serán de la misma categoría y tendrán los mismos tags. Las ventas cruzadas consisten en vender un producto o servicio a un cliente, distinto al que lo pidió, para incrementar el valor de una venta.
Crocoblock es un desarrollador de plugins avanzados para Elementor y cuenta con algunos productos interesantes que puedes incorporar a tu set de widgets. Entre ellos se encuentran:
- JetEngine: Generador de CPTs, campos personalizados y taxonomías avanzadas y generador de listings personalizados.
- JetSmartFilters: Filtrado avanzado, por product categories u otras taxonomías y, hasta que Elementor Pro ofrezca soporte completo a su barra de filtros, el plugin que uso habitualmente. AVISO A NAVEGANTES: Imprescindible, aunque puede que con las próximas novedades de Elementor ya no lo sea tanto en muchos sitios web con WooCommerce.
- JetWooBuilder: Con este plugin tengo mis desencuentros. A estas alturas ya prefiero no usarlo por el enorme avance de Elementor nativo en WooCommerce, pero todavía hay algunos widgets que suelo usar. Si puedes evitarlo, tu sitio web irá más ligero.
Etiquetas dinámicas de WooCommerce
Otra manera también muy útil de reflejar nuestro contenido es recurrir a las etiquetas dinámicas de WooCommerce. Con las etiquetas dinámicas de WooCommerce, puedes emplear la función de etiquetas dinámicas existente en Elementor Pro para insertar detalles específicos de cualquier producto de tu sitio.
Puedes rellenar un widget con el precio de un producto (original, en oferta o ambos), el título, la valoración, la imagen, el estado de venta, la descripción, el SKU, el estado de las existencias, las condiciones y mucho más.
Últimos consejos y conclusiones
Conviene recordar que, aunque hay infinitos themes de WooCommerce disponibles, el tema recomendado en 2023 para crear un WooCommerce con WordPress y Elementor Pro es Hello.
Si eres un gran fanático de Astra, también funciona muy bien, pero seguramente encontrarás todo lo que necesitas ya en las últimas versiones de Elementor Pro.
Dicho esto, tampoco se trata de eliminar temas si estás acostumbrado a ellos. Si habitualmente usas algún theme específico de WooCommerce y lo prefieres, pero también quieres usar Elementor, suele ser igualmente una gran combinación.
Como has podido comprobar, usar los widgets de Elementor con WordPress y WooCommerce en nuestra tienda permite un nivel de diseño y potencia con los templates que solo se puede lograr con un tiempo y un nivel de programación muy avanzados y que está al alcance de muy pocos presupuestos.
Preguntas Frecuentes
¿Puedo montar una tienda online con Elementor y WooCommerce sin saber programar?
Sí, con Elementor Pro y WooCommerce no necesitas tocar código para montar la tienda. Arrastras widgets, aplicas plantillas y editas el diseño desde el panel. Eso sí, necesitarás un hosting con PHP 7.4 o superior y algo de paciencia para configurar envíos, impuestos y métodos de pago.
¿Elementor gratis sirve para una tienda WooCommerce o hace falta la versión Pro?
La versión gratuita de Elementor te deja maquetar páginas básicas, pero para personalizar plantillas de producto, archivo de productos y carrito necesitas Elementor Pro. Sin Pro no tendrás el widget de productos ni las etiquetas dinámicas de WooCommerce, así que la tienda quedará muy limitada.
¿Cuánto tarda en cargar una tienda hecha con Elementor y WooCommerce?
Depende del hosting y de cuántos plugins acumules, no solo de Elementor. Una tienda bien optimizada con caché y un tema ligero como Hello Elementor puede cargar en 2 o 3 segundos. Si abusas de animaciones y secciones pesadas, la cosa se dispara y afecta a la conversión.
¿Puedo migrar mi tienda de Shopify a Elementor y WooCommerce sin perder productos?
Sí, existen importadores que pasan productos, clientes y pedidos desde Shopify a WooCommerce en formato CSV. El diseño no se traslada, tendrás que rehacerlo con Elementor. Antes de migrar, haz una copia de seguridad y prueba la importación en un entorno de staging para no romper la tienda en producción.
