Cómo editar la tarjeta de producto en Elementor Pro

Si laburás con WooCommerce y Elementor, editar la tarjeta de producto es el ABC para que tu tienda no tenga la misma cara que otras 500 mil. La buena noticia: con Elementor Pro y WooCommerce instalados, podés armar una plantilla desde cero, arrastrar widgets nativos, meter campos dinámicos con ACF y agregar efectos hover que hagan que el botón de comprar aparezca justo cuando el mouse pasa por arriba. No necesitás código (aunque podés sumarle CSS si querés afinar).

Editar la tarjeta de producto en Elementor es diseñar y maquetar la ficha individual de un producto de WooCommerce usando el Theme Builder de Elementor Pro, donde controlás cómo se ven el título, el precio, las imágenes, los botones y cualquier dato extra sin tocar los templates PHP del theme.

¿Qué herramientas necesito para editar la tarjeta de producto en Elementor?

Antes de arrancar, chequeá que tengas lo mínimo indispensable. Sin esto, el Theme Builder directamente no aparece en tu panel de WordPress.

• Elementor Pro: la licencia paga (desde USD 59 al año para un sitio — precio vigente en junio 2026). La versión gratuita no trae el Theme Builder, así que olvidate de editar plantillas de producto sin la Pro.
• WooCommerce: instalado, activo y con productos ya creados. Necesitás que cada producto tenga título, descripción, imágenes, atributos y SKU cargados para que los widgets tengan datos que mostrar.
• Productos de prueba: si estás armando la plantilla sobre un sitio en desarrollo, creá dos o tres productos con datos reales. Nada más incómodo que diseñar con un producto vacío y después ver que en producción los textos se desbordan.
• ACF o Meta Box (opcional): si pensás mostrar campos extra como «Material», «Tiempo de envío» o «Garantía», instalá Advanced Custom Fields o Meta Box. Son los dos plugins de campos personalizados con mejor integración con las etiquetas dinámicas de Elementor, según Code Automate.

¿Cómo accedo al editor de plantillas de producto en Elementor?

La ruta es simple pero no siempre obvia la primera vez. Andá a Plantillas > Theme Builder en el menú de WordPress, clickeá en Single Product y elegí «Agregar nuevo». Elementor te va a preguntar si querés empezar desde cero o usar una plantilla pre-armada de la biblioteca — mi recomendación: arrancá de cero, así entendés cada widget que ponés. Sobre eso hablamos en en nuestra guía completa de Elementor.

Apenás creás la plantilla, definí las condiciones de visualización. Podés aplicarla a todos los productos, a una categoría específica (ponele, «Zapatillas» pero no «Mochilas») o incluso a un solo producto por ID. Este paso es clave porque si después tenés categorías con necesidades distintas (productos variables vs. simples), vas a querer plantillas separadas para cada caso.

Una vez adentro del editor de Elementor, lo que ves es un lienzo vacío donde vas a arrastrar los widgets de WooCommerce hasta armar la ficha completa. Si alguna vez configuraste un single post con Elementor, la lógica es la misma, solo que los widgets disponibles cambian: ahora tenés los de producto en vez de los de blog.

¿Qué widgets de WooCommerce puedo usar en la tarjeta de producto?

Elementor Pro trae un set de widgets específicos para WooCommerce que cubren todo lo que necesita una ficha de producto estándar. La clave es cómo los organizás jerárquicamente.

• Product Images: la galería de imágenes del producto. Podés elegir entre vista de slider, grid o imagen principal con miniaturas abajo.
• Product Title: el título del producto. Simple, pero controlás tipografía, color, alineación y margen.
• Product Price: muestra el precio normal y el de oferta si tiene descuento.
• Add to Cart: el botón de compra. Para productos variables, muestra el selector de variaciones (talle, color) y después el botón.
• Product Data Tabs: las pestañas de Descripción, Información adicional y Reseñas que WooCommerce genera automáticamente.
• Product Meta: el SKU, las categorías y las etiquetas del producto. Ojo: por defecto viene bastante desordenado visualmente; casi siempre conviene ocultarlo y mostrar solo lo que te interesa con un widget de texto dinámico.

El orden importa. Lo que va arriba del pliegue (lo que el usuario ve sin scrollear) debería ser: imagen principal, título, precio y botón de compra. Los Product Data Tabs y la información secundaria van más abajo. Si ponés las pestañas de descripción arriba del botón, estás escondiendo la acción de compra — y en mobile eso es un tiro en el pie. Para más detalles técnicos, mirá la guía real para vender temas en 2026.

¿Cómo personalizar el diseño visual de la tarjeta?

Acá es donde Elementor se luce frente a los templates PHP tradicionales. Cada widget tiene tres pestañas: Contenido, Estilo y Avanzado. En la pestaña Estilo podés tocar fondos, bordes, sombras y tipografía sin escribir una línea de CSS.

Un ejemplo concreto, tomado de Blogpascher: para una tarjeta de producto con fondo degradado, configurás un degradado radial con transparencia en los extremos, border-radius de 10 píxeles y márgenes de 0-35-0-35. El resultado es una tarjeta con bordes redondeados, fondo que va de un color sólido a transparente hacia los bordes, y espacio interno que respira sin ahogar el contenido.

Lo que yo suelo hacer es arrancar con una sección contenedora que englobe todos los widgets, aplicarle un fondo blanco o gris claro, padding de 30 píxeles en todos los lados y un box-shadow sutil. Después, cada widget interno (título, precio, botón) hereda el fondo del contenedor y solo ajusto tipografía y márgenes. Si necesitás que el botón de compra contraste, usá un color que sea el opuesto al fondo de la tarjeta en la rueda cromática — nada de botón naranja sobre fondo beige, que se pierde.

¿Cómo añadir efectos al pasar el ratón (hover) en la tarjeta?

Hay dos caminos, y los podés combinar. El primero es el más fácil: usás las animaciones de entrada de Elementor. En la pestaña Avanzado de cualquier widget o sección, vas a Animación de entrada y elegís Fade In Up con un retraso de 300ms. Cuando el usuario pase el mouse sobre la tarjeta, el contenido aparece con un desvanecimiento sutil. (Sí, técnicamente esto no es un hover puro sino una animación al cargar, pero aplicado a una sección interna que ocultás y mostrás con CSS, funciona como hover.)

El segundo camino es más quirúrgico y requiere un toque de CSS. La idea, según la técnica de Blogpascher, es: ocultás inicialmente los elementos que querés mostrar solo al hover (talles, colores, botón de compra) con una clase como «ocultar-primero» y un display: none. Después, con un selector :hover en el contenedor principal, los mostrás con display: block. El contenedor también puede tener una transición suave en la propiedad opacity para que el cambio no sea brusco.

Acordate de que en mobile el hover no existe. Si ocultás el botón de compra con esta técnica, asegurate de que en la versión responsive el botón esté siempre visible — o vas a tener usuarios tocando la pantalla como desesperados sin saber cómo comprar. Complementá con el debate sobre SEO entre Elementor y Gutenberg.

¿Cómo añadir campos dinámicos personalizados a la tarjeta?

Supongamos que vendés muebles y querés mostrar el material (madera maciza, melamina, acero) debajo del título del producto. Con ACF creás un campo de texto llamado «material», le cargás el valor en cada producto y después, en Elementor, arrastrás un widget de Texto o Encabezado a la plantilla.

En vez de escribir un texto fijo, clickeás el ícono de etiqueta dinámica (el cilindro) en el campo de contenido y elegís «ACF Field» > «material». Según documenta Code Automate, esta integración funciona con ACF y con Meta Box, y es la forma más limpia de mostrar información extra sin plugins adicionales ni código PHP en el theme.

¿Y si el campo está vacío para un producto? Por defecto, el widget va a mostrar un espacio en blanco. Podés evitar eso con la opción «Ocultar si está vacío» que aparece en la configuración de la etiqueta dinámica, abajo de todo. Activá ese ajuste siempre — nada grita «sitio desprolijo» como un renglón vacío donde debería haber un dato.

¿Qué buenas prácticas de SEO y rendimiento debo seguir?

Diseñar una tarjeta linda es la mitad del trabajo. La otra mitad es que Google la entienda, la indexe bien y que la página cargue en menos de dos segundos.

• Un solo H1 por página: el título del producto ya es un H1 por defecto en WooCommerce. No agregues otro H1 en la plantilla de Elementor. Usá H2 para secciones internas y H3 para subdetalles.
• Schema de producto: WooCommerce genera automáticamente los datos estructurados de producto (precio, disponibilidad, SKU). No los pises ni los dupliques con plugins de schema adicionales — vas a generar conflictos y Google va a ignorar ambos.
• Atributos alt en imágenes: el widget de Product Images toma el alt text que cargaste en la biblioteca de medios. Cargalo siempre, describiendo el producto, no con keywords genéricas tipo «zapatilla-nike-air-max-2026» (eso va en el nombre de archivo, no en el alt).
• Carga selectiva de recursos: si en la plantilla solo usás tres widgets de WooCommerce pero Elementor carga los estilos de los quince, estás sumando CSS y JS al pedo. Code Automate recomienda desactivar los widgets que no usás desde Elementor > Configuración > Funciones, y priorizar velocidad con HTML limpio, sin anidar secciones innecesarias.

Si tu hosting no tiene buen tiempo de respuesta, todo esto se cae. Un TTFB arriba de 800ms te arruina cualquier optimización que hagas en el front. Si estás en un hosting WordPress como el de Donweb, que tiene LiteSpeed y cache a nivel servidor, la plantilla más pesada zafa. Si no, cada widget extra te cobra factura en el Core Web Vitals.

Errores comunes

Después de años armando y arreglando plantillas de producto, estos son los errores que veo una y otra vez. Tema relacionado: nuestra comparativa detallada de Elementor y Bricks.

• Crear la plantilla sobre un producto sin variaciones y después usarla en productos variables: el botón de compra se rompe. Si tu tienda tiene productos con talle o color, diseñá la plantilla sobre uno de esos desde el minuto cero. Probá que el selector de variaciones se vea bien en mobile — es el punto más frágil de todo el diseño.
• Dejar el Product Meta sin filtrar: por defecto muestra SKU, categorías y etiquetas todo junto, en un formato que parece salido de 2015. Si el SKU es interno y no querés que el cliente lo vea, ocultá el widget de Product Meta y mostrá solo las categorías con un widget de texto dinámico.
• Anidar secciones adentro de secciones adentro de columnas: cada nivel de anidado suma HTML, CSS y tiempo de renderizado. Una plantilla de producto no debería tener más de dos niveles de contenedores. Si necesitás tres, replanteá el layout antes que tirar más divs.
• No probar la plantilla con productos que tengan descripciones largas: diseñás con una descripción de dos renglones, pero en producción hay productos con diez párrafos. Las pestañas de Product Data Tabs se estiran, el layout se desarma. Probá siempre con el producto más extremo que tengas en el catálogo.

Preguntas Frecuentes

¿Necesito Elementor Pro para editar la tarjeta de producto?

Sí. La versión gratuita de Elementor no incluye el Theme Builder ni los widgets de WooCommerce. Sin Elementor Pro, la única forma de editar la plantilla de producto es tocando los archivos PHP del theme o usando otro plugin de builder.

¿Puedo crear plantillas diferentes para distintas categorías de producto?

Sí. Al configurar las condiciones de visualización en el Theme Builder, podés asignar una plantilla a una categoría específica, a un producto individual por ID, o a todos los productos. Es común tener una plantilla para productos simples y otra para productos variables.

¿Cómo muestro el botón de compra solo al pasar el mouse?

Con CSS personalizado: ocultás el widget Add to Cart con display: none y lo mostrás con display: block al hacer hover sobre el contenedor de la tarjeta. En mobile mantenelo siempre visible, porque no hay hover en pantallas táctiles.

¿Qué plugin necesito para agregar campos como «Material» o «Garantía»?

Advanced Custom Fields (ACF) o Meta Box. Ambos se integran con las etiquetas dinámicas de Elementor sin plugins puente. Creamos el campo personalizado, lo asignás al post type Producto y lo enlazás desde cualquier widget de texto en la plantilla.

¿La plantilla de producto afecta el SEO de mi tienda?

Sí, y bastante. Un mal uso de encabezados (múltiples H1, jerarquía rota) o una carga lenta por exceso de widgets le baja la calidad a la página para Google. Mantené la jerarquía H1-H2-H3, no dupliques el schema de producto y desactivá los widgets de Elementor que no uses.

Conclusión

Editar la tarjeta de producto en Elementor es una de esas tareas que arranca simple («arrastro la imagen, el título, el precio y listo») y puede volverse un proyecto de media tarde si te ponés a afinar hovers, campos dinámicos y condiciones de visualización. La herramienta está madura: los widgets nativos cubren el 90% de los casos de uso y la integración con ACF resuelve el 10% restante sin necesidad de código.

El punto débil sigue siendo el rendimiento si te vas de mambo con secciones anidadas y widgets que no usás. Menos es más: una plantilla con tres contenedores, cinco widgets bien elegidos y un hover sutil va a vender más que un festival de animaciones que tarda cuatro segundos en cargar. Probala con productos reales, mirala en mobile antes de publicarla y asegurate de que el botón de compra esté siempre a un dedo de distancia.

Fuentes

• Elementor – Mejorá los elementos de productos con acciones dinámicas al pasar el ratón
• Code Automate – Cómo usar Elementor para crear páginas de producto
• Blogpascher – Cómo crear una tarjeta de producto en Elementor