Como disenar la pagina de producto de WooCommerce con Elementor

Si tienes una tienda en WooCommerce y armaste tu web con Elementor, seguro te has topado con la pena de que la página de producto por defecto se ve plana, aburrida y no convence a nadie de sacar la tarjeta. La buena noticia es que con Elementor Pro puedes rediseñar esa plantilla desde cero usando widgets WooCommerce nativos, sin tocar una línea de código y sin pelearte con el editor de bloques. En esta guía te voy a contar cómo armar una página de producto que venda, paso a paso, con ejemplos reales que aplico en tiendas peruanas que facturan todos los días.

La idea no es solo que se vea bonita, sino que cargue rápido, que muestre la galería como se debe, que tenga reviews visibles, productos relacionados bien puestos y un botón de comprar que llame la atención sin ser invasivo. Vamos por partes.

Por qué rediseñar la página de producto WooCommerce con Elementor

La plantilla que trae WooCommerce por defecto está pensada para funcionar con cualquier tema, lo cual quiere decir que no está optimizada para ninguno en particular. El resultado suele ser una página con la imagen del producto a la izquierda, el título y precio a la derecha, las pestañas de descripción abajo y los productos relacionados al final. Funciona, pero no enamora.

Cuando rediseñas esa página con Elementor Pro tienes control total sobre cada bloque. Puedes mover la galería, agrandar el botón de compra, agregar badges de envío gratis, mostrar stock disponible, insertar videos de demostración, poner un acordeón con preguntas frecuentes y hasta meter un widget de productos vistos recientemente. Todo eso sin programar.

Lo otro importante es que esta plantilla se aplica a todos tus productos a la vez. Diseñas una vez, la asignas como Single Product template y automáticamente todos tus productos heredan ese diseño. Si después quieres cambiar algo, lo cambias en la plantilla y se actualiza en toda la tienda.

Qué necesitas antes de empezar

Para seguir esta guía necesitas tres cosas. Primero, WordPress con WooCommerce instalado y al menos un producto creado (puede ser de prueba). Segundo, Elementor Pro activado con licencia válida, porque los widgets WooCommerce solo vienen en la versión Pro, no en la gratuita. Tercero, un tema compatible con Elementor como Hello Elementor, Astra o GeneratePress, que no interfieran con tus diseños.

Si estás usando un tema pesado tipo Avada o Divi junto con Elementor, te recomiendo migrar a Hello Elementor para que todo vaya más liviano. No tiene estilos propios, así que te deja diseñar desde una hoja en blanco.

Crear el Single Product template paso a paso

Anda al menú lateral de WordPress y entra a Plantillas, luego Theme Builder. Ahí vas a ver varias opciones: Header, Footer, Single Post, Single Product, Archive, etc. Haz clic en Single Product y luego en Add New.

Te va a aparecer una ventana donde puedes empezar desde cero o usar una plantilla prediseñada de la biblioteca de Elementor. Mi consejo es que empieces desde cero para entender bien cómo funciona, pero si tienes apuro puedes elegir alguna de las plantillas y luego modificarla.

Una vez dentro del editor, Elementor te muestra un producto de ejemplo (toma uno aleatorio de tu tienda para previsualizar). Si no aparece ninguno o quieres cambiar el que se muestra, anda al ícono de engranaje abajo a la izquierda, en Preview Settings, y elige el producto que quieras usar como referencia visual.

Los widgets WooCommerce esenciales

Elementor Pro trae una categoría completa llamada WooCommerce con widgets dinámicos que jalan la información de cada producto automáticamente. Estos son los principales que vas a usar.

Product Title

Muestra el nombre del producto. Puedes elegir la etiqueta HTML (H1 para SEO), el color, la tipografía y el tamaño. Es importante que sea un H1 porque es el título principal de la página.

Product Price

Muestra el precio actual. Si el producto está en oferta, automáticamente muestra el precio original tachado y el nuevo. Puedes personalizar colores y tamaños de cada parte.

Product Add to Cart

El botón mágico. Trae el selector de cantidad y el botón de añadir al carrito. Aquí puedes cambiar el color, el padding, el texto del botón, el ícono y hasta el comportamiento al pasar el mouse. Yo siempre lo pongo en un color contrastante con el resto de la página para que destaque.

Product Images

La galería principal del producto. Muestra la imagen destacada grande y las thumbnails de las demás imágenes que hayas cargado. Soporta zoom al pasar el mouse y lightbox al hacer clic.

Product Short Description

Es ese texto corto que pones en la pestaña del producto, no la descripción larga. Sirve para destacar las características principales en formato bullet point o párrafo corto.

Product Tabs

Las pestañas clásicas con Descripción, Información adicional y Valoraciones. Puedes personalizar colores, tipografía y comportamiento (acordeón o tabs horizontales).

Product Related

Muestra productos relacionados según las categorías o etiquetas que comparten con el producto actual. Puedes definir cuántos mostrar, las columnas y el orden.

Product Upsell y Cross-sell

Dos widgets adicionales para sugerir productos más caros (upsell) o complementarios (cross-sell). Estos los configuras desde la ficha de cada producto en WooCommerce.

Estructura de la página que mejor convierte

Después de probar varios layouts en tiendas peruanas de distintos rubros, esta es la estructura que mejor resultado me ha dado. La comparto para que la uses como base y luego la adaptes a tu marca.

Arriba de todo va un contenedor con dos columnas: a la izquierda la galería de imágenes (Product Images), a la derecha el título, precio, descripción corta, selector de variaciones si aplica, botón de añadir al carrito y unos badges de confianza como envío gratis, devolución gratuita y pago seguro. Esos badges los pones con widgets Icon Box o con imágenes pequeñas.

Abajo de esa primera sección va una banda con los métodos de pago aceptados (Yape, Plin, Visa, Mastercard, transferencia). Esto le da más confianza al comprador peruano que aún desconfía un poco de pagar online.

Después meto la descripción larga del producto en un widget Product Content que jala el contenido HTML que llenaste en la ficha. Aquí puedes poner imágenes, videos, tablas y todo lo que quieras vender.

Luego va una sección con las pestañas (Product Tabs) o un acordeón con preguntas frecuentes. Las preguntas frecuentes ayudan al SEO y resuelven dudas que frenan la compra.

Más abajo pongo los productos relacionados (Product Related) con cuatro columnas en desktop y una en móvil, mostrando entre cuatro y ocho productos. Cierro con un bloque de testimonios o reviews destacados y un footer con garantía o política de devolución.

Asignar la plantilla a productos específicos o a todos

Cuando termines de diseñar y le des Publicar, Elementor te pregunta a qué productos quieres aplicar esa plantilla. Tienes varias opciones: a todos los productos, solo a los de cierta categoría, solo a productos específicos por nombre o etiqueta.

Si todos tus productos son del mismo tipo (digamos que vendes solo ropa), aplica la plantilla a todos. Pero si vendes categorías muy distintas (ropa, electrodomésticos, comida), puede que te convenga tener dos o tres plantillas diferentes asignadas por categoría. Eso te permite resaltar características distintas según el tipo de producto.

Optimizar la velocidad de carga

Una página de producto bonita pero lenta espanta a los clientes. Cuando armas la plantilla con Elementor hay varias cosas que puedes hacer para que no se demore en cargar.

Primero, activa los ajustes experimentales de Elementor: Improved CSS Loading, Improved Asset Loading y Optimized DOM Output. Eso reduce considerablemente el peso de los archivos que se cargan. Lo encuentras en Elementor, Settings, Experiments.

Segundo, usa contenedores Flexbox en lugar de las secciones y columnas viejas. Pesan mucho menos en el HTML final y son más flexibles para diseñar.

Tercero, optimiza las imágenes de productos. Sube las imágenes en formato WebP o conviértelas con un plugin como ShortPixel o EWWW. Una imagen de 2 MB en formato JPG se queda en 200 KB en WebP sin perder calidad visible.

Cuarto, instala un plugin de caché como WP Rocket o LiteSpeed Cache (si tu hosting lo soporta). Eso hace que la página se sirva precompilada en vez de generarse cada vez que alguien entra.

Diseño responsive para móvil

El 70% de tus compradores en Perú entran desde el celular. Si tu página de producto se ve bien en desktop pero mal en móvil, estás perdiendo plata. Elementor te deja diseñar diferente para cada dispositivo sin esfuerzo.

Lo principal es que en móvil la galería tiene que ir arriba y todo lo demás abajo en una sola columna. En desktop puedes tener dos columnas, pero en móvil eso no funciona porque las dos columnas se hacen muy estrechas y el contenido se ve apretado.

El botón de añadir al carrito también merece atención: en móvil hazlo del ancho completo y con un texto claro tipo Comprar ahora o Agregar al carrito. Y considera ponerlo como botón flotante (sticky bottom) para que siempre esté visible mientras el usuario hace scroll por la descripción.

Errores comunes que debes evitar

El primer error es olvidarse del seguimiento. Asegúrate de tener instalado Google Analytics 4 y el píxel de Facebook (o Meta) para que cada vista de producto y cada agregado al carrito quede registrado. Sin data no puedes optimizar.

El segundo error es no probar la página antes de publicarla. Revisa que se vea bien en Chrome, Firefox y Safari, en desktop, tablet y móvil. Pídele a un amigo que intente comprar para detectar fricciones.

El tercer error es meter demasiados widgets que ralentizan la carga. Cada widget de Elementor que pones agrega un poco de CSS y JS. No metas cosas que no aporten a la venta solo por adorno.

El cuarto error es no poner reviews. Aunque tu producto sea nuevo, intenta conseguir las primeras valoraciones de amigos o clientes piloto. Una página con cinco estrellas vende mucho más que una vacía.

Preguntas frecuentes

Necesito Elementor Pro o me sirve la versión gratuita

Para usar los widgets WooCommerce necesitas Elementor Pro sí o sí. La versión gratuita no incluye Theme Builder ni los widgets dinámicos. Si recién estás empezando y no quieres invertir, puedes probar primero el diseño con la página de producto que trae tu tema y luego cuando crezca la tienda te pasas a Pro.

Puedo tener plantillas diferentes para cada categoría de producto

Sí, Elementor Pro te permite asignar plantillas distintas según la categoría, el producto específico o incluso etiquetas. Eso es ideal cuando vendes productos muy diferentes que necesitan resaltar características distintas. Solo cuida que el diseño general mantenga coherencia visual de marca.

Cómo cambio el botón de añadir al carrito por uno de WhatsApp

Puedes ocultar el widget Product Add to Cart desde su panel de visibilidad o con un código CSS. En su lugar, pones un widget de botón normal de Elementor que enlace a wa.me con un mensaje predefinido. Es útil si manejas pedidos por WhatsApp en vez de checkout tradicional, algo común en tiendas pequeñas en Perú.

Mi galería de productos no muestra el zoom al pasar el mouse

El zoom viene activado por defecto en el widget Product Images. Si no funciona, revisa en WooCommerce, Apariencia, Theme Customizer, Product Images, que esté marcada la opción Enable product gallery zoom. Si tu tema sobrescribe esos ajustes puede que tengas que ajustarlo desde el código del tema hijo.

Cuánto pesa una página de producto bien optimizada

Una página de producto con Elementor Pro bien optimizada debería pesar entre 800 KB y 1.5 MB total, cargar en menos de 3 segundos en conexión 4G y tener una puntuación PageSpeed superior a 80 en móvil. Si tu página pesa más de 3 MB tienes que revisar imágenes, plugins activos y experimentos de Elementor.

Puedo agregar variaciones de color o talla en la plantilla

Sí, el widget Product Add to Cart detecta automáticamente si el producto tiene variaciones y muestra los selectores correspondientes (color, talla, material, lo que hayas configurado en WooCommerce). No necesitas hacer nada especial en la plantilla, todo se gestiona desde la ficha del producto.

Cómo muestro productos relacionados solo de la misma categoría

En el widget Product Related tienes un ajuste donde defines cómo se eligen los productos relacionados: por categorías compartidas, por etiquetas o ambos. También puedes definir el número de productos a mostrar y el orden (aleatorio, por fecha, por precio, por popularidad). Lo más recomendable suele ser por popularidad para que se vean los productos que más se venden.

Funciona esta plantilla con WordPress 7.0 que sale en mayo 2026

Sí, Elementor Pro es totalmente compatible con WordPress 7.0 y aprovecha varias de las nuevas funciones, como el responsive nativo por bloque. De hecho, las últimas versiones de Elementor han mejorado la integración con el editor de bloques, así que puedes combinar ambos enfoques sin problemas si lo necesitas.

Qué hago si mi plantilla deja de aplicarse después de actualizar Elementor

A veces después de una actualización mayor de Elementor, las plantillas pueden mostrar conflictos. Lo primero que tienes que hacer es ir a Elementor, Tools, Regenerate Files y CSS y darle clic. Eso recompila todo el CSS de tu sitio. Si sigue fallando, desactiva los experimentos uno por uno para identificar cuál está causando el problema.

Cuánto tiempo me toma armar mi primera plantilla de producto

Si estás empezando con Elementor, tu primera plantilla te puede tomar entre 4 y 8 horas, contando que vas a estar explorando los widgets y probando opciones. Para las siguientes plantillas el tiempo baja drásticamente porque ya conoces los widgets. Una vez con experiencia, armar una plantilla de producto desde cero te toma 1 a 2 horas máximo.