Alinear verticalmente imágenes de producto Woo en Divi

En una tienda WooCommerce, la galería de imágenes del producto aparece por defecto debajo de la imagen principal. Funciona, pero no siempre es la mejor presentación: muchas tiendas profesionales muestran las miniaturas de la galería en vertical, a un lado de la imagen principal, como hacen Amazon o las grandes tiendas de moda. En este tutorial te muestro cómo alinear verticalmente las imágenes de producto de WooCommerce en Divi, llevando la galería de la parte inferior a la barra lateral.

Este cambio mejora la experiencia visual de la ficha de producto y aprovecha mejor el espacio horizontal en escritorio. Lo vamos a lograr con un layout de Divi y algo de CSS, y al final te dejo el archivo JSON del layout para que lo importes directamente.

¿Por qué mover la galería del producto a un lado?

La disposición vertical de las miniaturas (a la izquierda o derecha de la imagen principal) es un patrón que los usuarios ya reconocen de las grandes tiendas. Permite ver todas las imágenes del producto de un vistazo sin hacer scroll, y da una sensación más profesional y cuidada a la ficha. En productos donde las imágenes venden (ropa, accesorios, decoración), esta presentación marca la diferencia. Si estás construyendo tu tienda con Divi, esto complementa todo lo del Curso de Tiendas Online con Divi 5 y WooCommerce.

Paso 1: Construye o importa el layout de producto

Para personalizar la ficha de producto necesitas un layout de producto en el Theme Builder de Divi (la plantilla que define cómo se ven todos tus productos). Puedes construirlo desde cero o importar el layout que dejo en los recursos de este tutorial, que ya tiene la estructura lista. Importarlo te ahorra el trabajo de maquetar y te permite enfocarte en el ajuste de la galería.

Consejo: trabaja siempre la plantilla de producto en el Theme Builder, no producto por producto. Así el cambio aplica a todos los productos de tu tienda de una sola vez, y mantienes la consistencia en toda la ficha.

Paso 2: Estructura la fila en dos columnas

La clave del diseño está en dividir la zona de imágenes en dos columnas: una columna estrecha para las miniaturas de la galería (en vertical) y una columna más ancha para la imagen principal. Divi te permite ajustar el ancho de cada columna, así que dale a la columna de miniaturas el espacio justo para que se vean alineadas verticalmente al lado de la imagen grande.

🎓 ¿Quieres construir fichas de producto que vendan?
En uxdivi.com/cursos tenemos el Curso de Tiendas Online con Divi 5 y WooCommerce donde diseñamos la ficha de producto completa, la galería, el carrito y todo el flujo de compra. Accede como suscriptor y construye una tienda profesional.

Paso 3: Aplica el CSS para reorganizar la galería

WooCommerce genera la galería con una estructura HTML específica. Con unas reglas de CSS personalizadas reorganizamos esa estructura para que las miniaturas se muestren en columna al lado de la imagen principal, en lugar de en fila debajo. El CSS controla el ancho de las miniaturas, el espaciado entre ellas y la disposición vertical. En los recursos del tutorial dejo el código exacto listo para copiar y pegar en las opciones de la página o del layout.

Paso 4: Ajusta el responsive

En móvil, la disposición de galería al lado de la imagen principal no suele funcionar bien por falta de espacio horizontal. Lo habitual es que en pantallas pequeñas las miniaturas vuelvan a colocarse debajo de la imagen principal, o se conviertan en un carrusel deslizable. Revisa el comportamiento en tablet y móvil y ajusta el CSS con media queries si es necesario, para que la experiencia sea buena en todos los tamaños. Si combinas varias imágenes por producto, también te puede servir el tutorial de carrusel loop de productos en Divi 5 para otras secciones de la tienda.

Preguntas frecuentes sobre alinear la galería de producto

¿Este cambio afecta a todos mis productos?

Sí, si lo aplicas en la plantilla de producto del Theme Builder, el cambio se refleja en todos los productos de tu tienda automáticamente. Esa es la ventaja de trabajar a nivel de plantilla y no producto por producto.

¿Necesito saber CSS para hacerlo?

El CSS está listo para copiar y pegar, así que no necesitas escribirlo desde cero. Entender qué hace cada regla te ayuda a ajustarlo a tu diseño, pero no es indispensable para replicar el resultado.

¿Funciona con cualquier tema de WooCommerce o solo con Divi?

Este tutorial está pensado para Divi y su Theme Builder. La lógica del CSS podría adaptarse a otros temas, pero la estructura del layout se construye específicamente con Divi.

¿La galería sigue funcionando con zoom y lightbox?

Sí, reorganizar visualmente la galería con CSS no afecta las funciones nativas de WooCommerce como el zoom de imagen o el lightbox. Esas siguen operando normalmente; solo cambia la disposición de las miniaturas.

Conclusión

Mover la galería de producto de WooCommerce a un lado de la imagen principal le da a tu ficha de producto un aspecto más profesional y una experiencia más cómoda, similar a la de las grandes tiendas. Con un layout de producto en el Theme Builder de Divi y un poco de CSS, el cambio aplica a toda tu tienda de una vez. Importa el layout, ajusta las columnas, aplica el CSS y revisa el responsive: tendrás fichas de producto que venden mejor.

🎓 ¿Quieres una tienda WooCommerce con fichas de producto de nivel profesional?
En uxdivi.com/cursos tienes el Curso de Tiendas Online con Divi 5 y WooCommerce donde construimos la tienda completa, optimizada para vender. Accede como suscriptor y lleva tu tienda al siguiente nivel.

Recursos y descargas del tutorial

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐