Elementor Pro hace posible personalizar todas las plantillas de WooCommerce (archivo de productos, ficha de producto, menú carrito, carrito, checkout, 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 crear diseños diferentes mediante Elementor Pro para atraer a más clientes.
Cuántas veces nos ha ocurrido al montar una tienda online: las páginas como cart, checkout o mi cuenta quedaban relegadas por el diseño por defecto. Esto 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 necesitamos y lograr que toda nuestra web sea homogénea y tenga 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 simplificar 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 dedicado de WooCommerce y las funcionalidades se limitaban a las que ofrecía el tema o a tu capacidad de programarlas en PHP dentro de él.
Es muy importante tener presente que, aunque Elementor es el maquetador de páginas, para maquetar contenidos dinámicos necesitamos el maquetador de temas, es decir, Elementor Pro.
Así, Elementor Pro sustituye a los temas especializados con todas las funcionalidades necesarias para el proyecto aplicadas mediante maquetación visual y con un tema mínimo como Hello.
Una de las opciones destacadas 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 y permitirán, 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 infinidad de 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 mínima 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 recientemente.
Widgets de Elementor para WooCommerce
En Elementor Pro hay una gran cantidad de widgets que se desbloquean al instalar WooCommerce. Para que te hagas una idea, con estos elementos podremos maquetar las páginas necesarias para 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 necesitar 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 fáciles de diseñar usando 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 a nivel de templates como de páginas especiales. Esto ha hecho que el tema sea casi irrelevante en nuestra tienda online.
Actualmente, en WooCommerce es muy sencillo hacerlo todo con Elementor Pro y ahorrarnos un theme dedicado o muchos plugins específicos, porque Elementor nos facilita mucho la tarea.
Además, reduce los costes de desarrollo y diseño y elimina muchos problemas de incompatibilidades entre tu tema y los plugins, simplificando el mantenimiento requerido en la tienda (que es, de por sí, muy laborioso en WooCommerce).
Y, lo más importante, tendrás la posibilidad de personalizar tu tienda y tus productos con la facilidad, flexibilidad y potencia que caracterizan a Elementor Pro.
La página de la tienda, shop, archivo de productos o products archive
La página de la tienda está identificada 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 esta 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 pone a nuestra disposición una serie de widgets importantes para personalizar el diseño de manera muy granular:
- 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 proporcionar sobre nuestros productos y hacerlo con un diseño totalmente personalizado, sin una línea de código y de acuerdo con nuestro libro de estilo de la tienda.
El menú Carrito o menu cart
Es un widget que te permite tener, de manera flotante o como sidebar, un breve resumen de lo adquirido. Resulta muy útil para mostrar los productos que el usuario va añadiendo de forma 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, tan solo haciendo clic en el icono, aparece este popup rápidamente para que el usuario pueda ver que, al hacer clic en 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 cuentas con tu propia iconografía o pack de iconos, visualmente quedará mucho más atractivo usar el icono que precises 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 antes, cuenta con dos maneras alternativas de visualizarse: como popup flotante o como popup lateral.
Con esta funcionalidad de Elementor Pro te ahorras tener que recurrir a 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 desempeñen esa misma tarea.
Página de carrito de la tienda
Esta página se compone, sobre todo, 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 otras posibilidades como incluir un template personalizado cuando no se haya comprado ningún producto.
Esta página es otro diseño que podemos adaptar mediante este widget, sin 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 podemos configurar están los datos de facturación, notas adicionales para el pedido, campo para cupón (si deseas mostrarlo) y 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 te permite mostrar en una página especial de WooCommerce todos los detalles de los pedidos, direcciones, datos de la cuenta o incluso descargas, si se tratase 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 estás 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, diferente al que pidió, para aumentar el valor de una venta.
Crocoblock es un desarrollador de plugins avanzados para Elementor y cuenta con algunos productos interesantes que puedes sumar a tu set de widgets. Entre ellos se incluyen:
- 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 dé soporte completo a su barra de filtros, el plugin que uso habitualmente. AVISO A NAVEGANTES: Imprescindible, aunque puede ser 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 avance enorme de Elementor nativo en WooCommerce, pero todavía hay algunos widgets que suelo usar. Si puedes evitarlo, irá más ligero tu sitio web.
Etiquetas dinámicas de WooCommerce
Otra manera también muy práctica de reflejar nuestro contenido es emplear las etiquetas dinámicas de WooCommerce. Con las etiquetas dinámicas de WooCommerce, puedes usar la función de etiquetas dinámicas que ya existe en Elementor Pro para insertar detalles específicos de cualquier producto de tu sitio.
Puedes completar 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 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 descartar temas si estás acostumbrado a ellos. Si sueles usar algún theme específico de WooCommerce y lo prefieres, pero también quieres emplear Elementor, normalmente sigue siendo 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
¿Cómo monto una tienda online con WordPress y WooCommerce?
Instalas WordPress, añades el plugin WooCommerce y configuras productos, pagos y envíos. El matiz está en la elección del tema: con Elementor y un tema ligero como Hello consigues control visual sin cargar la web. Calcula entre 4 y 8 horas para una tienda básica funcional, sin contar la carga de catálogo.
¿Qué diferencia hay entre Elementor y WordPress?
WordPress es el gestor de contenidos; Elementor es un constructor visual que se instala encima. No compiten. WooCommerce añade la capa de tienda. En la práctica, WordPress guarda los datos y Elementor decide cómo se ven las páginas. Necesitas los tres para una tienda completa, aunque Elementor Pro no es obligatorio para empezar.
¿Me conviene Shopify o WordPress con WooCommerce?
Depende del control que quieras. Shopify cobra cuota mensual y comisiones, pero te olvidas del mantenimiento. WooCommerce es gratuito, aunque pagas hosting, dominio y posibles extensiones. Para catálogos medianos y personalización fina con Elementor, WooCommerce suele salir más rentable a partir del segundo año. Para vender rápido sin complicaciones, Shopify.
¿Puedo personalizar la ficha de producto con Elementor sin tocar código?
Sí, con Elementor Pro y el widget de producto puedes maquetar la ficha, el carrito y el checkout sin tocar PHP. Eso sí, revisa que el tema sea compatible y prueba el flujo de compra en móvil. Un detalle útil: las plantillas de WooCommerce se aplican por condiciones, así que puedes tener una ficha distinta para ofertas o categorías concretas.
