Galería de producto en WooCommerce: zoom, lightbox y vídeo

En productos que la gente compra por su aspecto, la galería es el escaparate. La clientela juzga ajuste, calidad y detalle a partir de las imágenes, mucho antes de leer una palabra de la descripción, y una galería floja cuesta ventas en silencio e invita a devoluciones. WooCommerce trae una galería de fábrica, y funciona, pero es deliberadamente sencilla: una tira de miniaturas, una lightbox simple y un efecto de aumento que se apoya en scripts más antiguos. Esta guía explica qué hace realmente la galería de producto por la conversión, qué necesita una buena extensión y cómo el plugin gratuito Reel añade a la galería de WooCommerce zoom, una lightbox accesible y vídeo, sin ralentizar la página ni desplazar la maquetación.

Para qué sirve la galería de producto

La galería es la parte de la página de producto que asume el trabajo de una tienda física. En el comercio, una clienta toma el artículo en la mano, lo gira, lo pone a la luz, examina las costuras. En línea, la galería tiene que sustituir todo eso. Su tarea es responder a las preguntas que la clientela haría si tuviera el artículo en la mano: cómo se ve la textura de cerca, cómo de grande es en realidad, cómo se mueve o cómo cae, cómo se ve por detrás. Cuando la galería responde bien a eso, ocurren dos cosas a la vez. Más personas compran, porque sus preguntas quedan resueltas antes de que surjan las dudas. Y menos devuelven el artículo, porque lo que llega se corresponde con su expectativa.

Este segundo efecto se subestima con facilidad. Una devolución no es solo un reembolso: implica el envío de vuelta, la reposición en almacén, un caso de soporte y una clienta que ahora vuelve a comprar con menos frecuencia. Una galería que deja a la gente examinar detalles antes de comprar es uno de los métodos más económicos para reducir las devoluciones por expectativas defraudadas, porque la decepción ni siquiera llega a surgir.

Por qué la galería estándar desperdicia ventas

La galería del núcleo de WooCommerce sirve como punto de partida. Muestra la imagen principal, una fila de miniaturas y una lightbox al hacer clic, y en la mayoría de los temas la imagen principal se aumenta al pasar el ratón. El problema es que ahí se detiene, y de paso trae bastante peso consigo.

El aumento al pasar el ratón y la lightbox están construidos sobre scripts de frontend más antiguos, entre ellos jQuery y unas cuantas bibliotecas incluidas, lo que agranda el JavaScript de la página. La lightbox es utilizable, pero simple, y en su comportamiento de teclado no se puede confiar de un tema a otro. Un soporte nativo para vídeos de producto falta por completo, de modo que el medio más convincente para muchos productos no tiene sitio en la galería. Y como la galería está en lo más alto de la página de producto, todo lo que la hace mala, un salto de maquetación al cargar las imágenes, un script pesado que bloquea la interacción, repercute directamente en la primera impresión y en tu puntuación de Core Web Vitals.

La oportunidad, por tanto, no está en sustituir la galería. Está en mejorar las tres cosas que mueven la aguja, y hacer al mismo tiempo la galería más ligera en lugar de más pesada.

Las tres mejoras que cuentan

En un producto visual, tres incorporaciones justifican su lugar una y otra vez.

Zoom de imagen. Cuando la clientela puede aumentar la imagen al pasar el ratón para estudiar textura, costura, veta o acabado, eso muestra detalles que una miniatura oculta. Allí donde la calidad es visible, eso genera confianza de compra de inmediato. Lo decisivo es que el zoom permanezca dentro del marco de la galería y no se dispare sobre el resto de la página desplazando la maquetación.

Una lightbox accesible. Cuando las imágenes se abren a pantalla completa, la clientela puede examinarlas como es debido, en lugar de entornar los ojos ante una miniatura. “Accesible” es aquí la palabra que sostiene todo: la lightbox debería poder abrirse y cerrarse por teclado, mantener el foco donde corresponde mientras está abierta, y devolverlo de forma limpia al cerrarse, para que funcione para las personas usuarias de teclado y de lector de pantalla, no solo para quienes usan ratón.

Vídeo de producto. Un clip corto muestra tamaño, movimiento y uso real de un modo que las imágenes fijas no logran, ya sea una tela que cae, un aparato en funcionamiento o un mueble junto a una persona como comparación de tamaño. Un vídeo destacado en la zona de la galería es una de las incorporaciones más eficaces para cualquier compra meditada.

Reel for WooCommerce añade exactamente esos tres: zoom al pasar el ratón, una lightbox accesible y un vídeo de producto destacado.

Qué necesita una buena extensión de galería

Ya sea que lo construyas tú, lo compres o lo instales: una herramienta de galería para WooCommerce debería cumplir una lista de comprobación corta.

• Extender, no sustituir. Debería construirse sobre la galería de WooCommerce existente, de modo que tus imágenes, miniaturas y estilos del tema sigan funcionando, en lugar de colar una galería paralela que tengas que mantener aparte.
• Sin salto de maquetación. Cada medio debería reservar su espacio antes de cargar, para que nada salte mientras la página se asienta. Ese es el mayor riesgo de Core Web Vitals de la galería.
• Una huella pequeña. La interacción moderna no necesita jQuery. Un script pequeño y diferido que carga solo donde se necesita mantiene rápida la página de producto.
• Accesibilidad de verdad. Manejo por teclado y gestión limpia del foco para la lightbox, no solo un overlay para el ratón.
• Control sensato. Interruptores independientes de encendido y apagado para cada función, de modo que solo tengas en marcha lo que tu surtido necesita.
• Comportamiento limpio. Scripts que se cargan solo en las páginas de producto, ajustes fáciles de alcanzar y una desinstalación limpia que no deja restos.

Fíjate en lo que no está en esta lista: un pesado slider todoterreno que revuelve tu tema. El objetivo es una versión más afilada de la galería que ya tienes, no una segunda galería por encima.

Cómo lo resuelve Reel

Reel es un plugin gratuito y de código abierto que extiende la galería de producto individual existente de WooCommerce, en lugar de sustituirla. El marcado se genera en PHP y se enriquece de forma progresiva mediante un único archivo de JavaScript vanilla, diferido y cargado en el pie de página, con scripts y estilos incorporados solo en la página de producto individual. No hay jQuery. Cada una de las tres funciones tiene su propio interruptor de encendido y apagado, de modo que solo tengas en marcha lo que necesitas.

Zoom al pasar el ratón

Las imágenes de la galería se aumentan al pasar el ratón en una intensidad de zoom que eliges, en algún punto entre 1,0x y 3,0x. La transformación está limitada al marco de la galería, de modo que aumentar una imagen nunca desplaza el resto de la página. Como el paso del ratón es poco fiable en pantallas táctiles, hay una opción para omitir el zoom en dispositivos táctiles, de modo que la clientela en smartphone o tablet no tenga que pelear con un efecto de paso del ratón que nunca estuvo pensado para ella.

La lightbox accesible

Haz clic en cualquier imagen de la galería o pulsa Enter o la barra espaciadora sobre ella para abrirla a pantalla completa. La lightbox es de verdad manejable por teclado: Tab permanece en el botón de cerrar, de modo que el foco no pueda deslizarse detrás del overlay, Escape la cierra (igual que un clic en el fondo), y el foco vuelve a la imagen que abriste. Es un overlay fijo que arranca oculto, así que no reserva espacio ni causa salto de maquetación hasta que una clienta lo abre realmente. Puedes mostrar en la lightbox un pie de foto tomado del texto alternativo de la imagen y personalizar la etiqueta del elemento de control de apertura para los lectores de pantalla, para que anuncie algo con sentido.

El vídeo destacado

Reel muestra un vídeo por producto, ya sea después de la galería o antes del resumen del producto, según tu elección. La fuente puede ser un archivo autoalojado (MP4, M4V, WebM u OGV), reproducido con el reproductor de vídeo nativo de WordPress, o cualquier URL de oEmbed como YouTube o Vimeo, que el núcleo de WordPress incrusta automáticamente. En cualquier caso, el vídeo se asienta en un marco 16:9, dimensionado mediante la propiedad CSS aspect-ratio, de modo que su espacio queda reservado antes de cargar y la página no salta. La URL del vídeo por producto reside en el metacampo de producto _reel_video_url, con un _reel_video_title opcional para el encabezado de ese producto. Si quieres el vídeo en un lugar distinto de la zona de la galería, el shortcode [reel_video] (con los atributos id y title) o el bloque “Reel: Featured video” renderizan el vídeo del producto actual en el mismo marco 16:9 en cualquier parte del contenido del producto.

Reel no realiza por sí mismo ninguna llamada de API ni petición de analítica. La única petición saliente es la que el núcleo de WordPress hace por sí mismo mediante wp_oembed_get(), cuando muestras un vídeo en YouTube, Vimeo u otro proveedor de oEmbed, y Reel almacena el resultado en caché en un transient para evitar recuperaciones repetidas. Los vídeos autoalojados no disparan ninguna petición externa en absoluto.

La configuración

Poner Reel en producción lleva unos minutos:

1. Instala el plugin mediante Plugins, Instalar, o súbelo a /wp-content/plugins/reel. WooCommerce debe estar instalado y activo.
2. Actívalo.
3. Abre el menú superior Reel y activa las funciones que quieras. Cada una de las tres tiene su propio interruptor.
4. Para el zoom al pasar el ratón, define la intensidad del zoom y decide si debe omitirse en dispositivos táctiles. Para la lightbox, activa si hace falta el pie de foto del texto alternativo y personaliza la etiqueta del elemento de control de apertura. Para el vídeo, elige posición, reproducción automática, encabezado y texto de introducción.
5. Para dar un vídeo a un producto, introduce la URL en el metacampo _reel_video_url del producto (PRO añade para ello un campo de editor más cómodo, más sobre esto abajo).

La página de ajustes usa una maquetación de tarjetas con conmutadores, tooltips de ayuda mostrados en línea y un control en vivo de la intensidad del zoom, de modo que veas al ajustar qué hace cada opción. El diseño de la tienda se construye sobre custom properties de CSS compatibles con el tema, con ajuste de tamaño fluido, soporte para el modo oscuro y protección de movimiento reducido, de modo que la galería encaje con tu tema sin esfuerzo adicional. Reel es compatible con HPOS y con los bloques de carrito y checkout, está listo para la traducción con un archivo POT incluido y una traducción al polaco, y elimina sus opciones al desinstalar de forma limpia.

Consejos prácticos para una galería que convierte

Un plugin aporta el mecanismo. Unos cuantos hábitos sacan de él lo máximo.

• Fotografía para el zoom. El zoom al pasar el ratón solo ayuda si la imagen de partida es lo bastante grande y nítida como para que merezca la pena. Sube imágenes de alta resolución, para que el aumento muestre detalles reales en lugar de píxeles blandos.
• Empieza con la pregunta más urgente. Ordena la galería de modo que las primeras imágenes respondan a la mayor duda, tamaño, ajuste, la parte trasera del artículo, y deja al hero image la tarea de marcar el tono.
• Mantén el vídeo corto y útil. Un clip de diez a veinte segundos que muestre el producto en uso o en movimiento supera a una película de marca de dos minutos que nadie ve hasta el final. Emplea el vídeo allí donde el movimiento o el tamaño aporten de verdad algo.
• Piensa en las personas usuarias táctiles. El zoom al pasar el ratón pertenece a quienes usan ratón; la opción de omitirlo en táctil existe para que los compradores en smartphone obtengan en su lugar una lightbox limpia. Déjala activa, salvo que tengas un motivo en contra.
• Protege el primer renderizado. Como la galería está en lo alto de la página, mantén la imagen principal bien optimizada y deja que el marcado con espacio reservado haga su trabajo, para que la página se asiente sin saltos.

Reel frente al estándar de WooCommerce

La galería del núcleo es un punto de partida; Reel afila las partes que venden. Aquí la diferencia específica para la galería:

Función	Estándar de WooCommerce	Reel
Zoom de imagen	Aumento simple	Zoom al pasar el ratón, intensidad de 1,0x a 3,0x, omitible en táctil
Lightbox	Simple	Accesible: abrir y cerrar por teclado, trampa y devolución de foco
Vídeo de producto	Sin soporte nativo	Vídeo destacado en la galería, autoalojado u oEmbed
Colocar el vídeo libremente	No posible	Shortcode [reel_video] y un bloque
Estabilidad de maquetación	Scripts más antiguos	Espacio reservado, sin salto de maquetación
Huella	Se apoya en jQuery	Un archivo de JS vanilla diferido, sin jQuery, solo páginas de producto
Control por función	No posible	Interruptor de encendido y apagado independiente para cada una
Galerías por variante, rotación de 360 grados	No	Sí (complemento PRO)
Coste	Gratis (núcleo)	Gratis (GPL); el complemento PRO lo amplía

Gratis frente a PRO

El plugin gratuito Reel es por sí solo una extensión de pleno derecho: zoom al pasar el ratón, una lightbox accesible y un vídeo de producto destacado, todo con espacio reservado y sin jQuery. No es una oferta cebo.

Reel Pro es un complemento separado que requiere el plugin gratuito instalado y activo y se entrega a través de Freemius en lugar del directorio de WordPress.org. Amplía el plugin gratuito para tiendas con mayores exigencias de medios. PRO añade una pestaña Reel propia en el editor de producto con un campo de verdad para la URL del vídeo y un estado en vivo “Vídeo detectado”, de modo que definas el vídeo de un producto sin manipular metacampos a mano. Añade galerías por variante, en las que la imagen principal de la galería cambia a las imágenes propias de una variante en el momento en que la clienta la selecciona, con un script diminuto y sin dependencias que precarga para evitar un parpadeo y conserva su marco para prevenir el salto de maquetación. Añade rotación de 360 grados, una secuencia ordenada de imágenes a través de la cual la clientela puede arrastrar, deslizar o moverse con las teclas de flecha en un visor con proporción reservada. Añade reglas de reproducción automática para el vídeo, que pueden esperar hasta que el vídeo esté en el área visible, impedir la reproducción automática en dispositivos móviles y respetar las preferencias de movimiento reducido. Y añade CDN y carga diferida para los medios, reescribiendo las URL de subida para las imágenes de rotación y las galerías de variantes a una fuente de CDN y difiriendo los medios más pesados hasta que sean visibles. La edición gratuita cubre zoom, lightbox y vídeo de principio a fin; PRO es para surtidos que necesitan medios por variante, rotación o un control más fino sobre la carga de esos medios.

La versión corta

En productos visuales, la galería asume la venta, así que vale más que el punto de partida estándar. Las tres mejoras que cuentan son el zoom de imagen, una lightbox accesible y un vídeo de producto destacado, pero solo si se añaden con espacio reservado y sin jQuery, para que la página siga rápida y estable, en lo más alto, donde residen la primera impresión y los Core Web Vitals. El plugin gratuito Reel extiende la galería de WooCommerce existente con las tres, cada una conmutable por separado y sin llamadas externas propias. Empieza ahí y añade las galerías por variante, la rotación de 360 grados, así como el control de reproducción automática y de CDN del complemento PRO, en cuanto tu surtido lo exija.