Tutorial WordPress: Personalizar WooCommerce: ancho de la galería en product single con CSS

Introducción

Este tutorial muestra, con todo lujo de detalles, cómo personalizar el ancho de la galería en la página de producto individual de WooCommerce usando CSS. Incluye explicaciones sobre la estructura típica del HTML generado por WooCommerce, técnicas para diferentes tipos de temas (float, flex, grid), ejemplos prácticos de CSS listos para copiar, cómo hacer la galería a ancho completo (full-bleed), consideraciones de responsive y buenas prácticas para aplicar los cambios sin romper actualizaciones del tema.

Antes de empezar: entender la estructura

La estructura HTML de un producto en WooCommerce suele contener dos bloques principales: el contenedor de las imágenes/galería y el bloque de resumen (título, precio, botón de añadir al carrito). A nivel genérico suelen verse selectores como:

.woocommerce o .woocommerce div.product — contenedor general.
.images o .woocommerce-product-gallery — contenedor de la galería/imágenes.
.summary — contenedor con el título, precio y botón.
.woocommerce-product-gallery__image img — las imágenes dentro de la galería.
.flex-control-thumbs o .woocommerce-product-gallery__wrapper — miniaturas/galería de thumbs (según el script/tema).

Es imprescindible inspeccionar el HTML/CSS en tu tema (inspector del navegador) para identificar los selectores exactos y cualquier regla que tenga más especificidad o estilos inline que debas sobreescribir.

Dónde colocar el CSS

Apariencia → Personalizar → CSS adicional (rápido para pruebas y cambios menores).
En un child theme: style.css del tema hijo (recomendado para cambios permanentes y control de versiones).
Encolar un archivo CSS personalizado con functions.php del tema hijo para mantener el orden de carga.

Encolar un archivo CSS en el tema hijo (ejemplo PHP)

Si necesitas aportar un archivo CSS desde tu tema hijo, usa este snippet en functions.php del tema hijo:

function tema_hijo_enqueue_styles() {
    wp_enqueue_style( child-style, get_stylesheet_directory_uri() . /style.css, array(parent-style) )
}
add_action( wp_enqueue_scripts, tema_hijo_enqueue_styles )

Estrategias para controlar el ancho de la galería

A continuación se muestran técnicas y ejemplos CSS según el tipo de layout de tu tema.

1) Layout clásico con floats (temas antiguos)

Muchos temas todavía usan floats para colocar la galería y el resumen en columnas. Para cambiar el ancho de la galería ajusta los anchos de ambos bloques y asegúrate de incluir box-sizing para evitar pérdidas de ancho por padding.

/ Galería a 65% y resumen a 35% (float layout) /
.woocommerce div.product .images {
    width: 65%
    float: left
    box-sizing: border-box
    padding-right: 20px
}
.woocommerce div.product .summary {
    width: 35%
    float: right
    box-sizing: border-box
}
.woocommerce div.product .woocommerce-product-gallery__image img {
    width: 100%
    height: auto
    display: block
}

2) Layout moderno con Flexbox

Muchos temas actuales usan flexbox para colocar los bloques. Ajusta el comportamiento con las propiedades flex. Este enfoque es más robusto y flexible frente a cambios de contenido.

/ Layout con flex: galería ocupa 65% y summary 35% /
.single-product .product {
    display: flex
    gap: 30px / separación entre columnas /
    align-items: flex-start
}
.single-product .product .woocommerce-product-gallery {
    flex: 1 1 65%
}
.single-product .product .summary {
    flex: 0 0 35%
}
/ Asegurar imágenes responsivas /
.woocommerce-product-gallery__image img {
    width: 100%
    height: auto
    display: block
    object-fit: contain
}

3) Gallery full width (full-bleed) — galería a ancho de pantalla completa

Si quieres que la galería ocupe todo el ancho de la ventana, aunque el contenido esté dentro de un contenedor centrado, puedes usar la técnica de negativo para salirse del contenedor padre. Este cambio puede necesitar más ajustes visuales para paddings y z-index.

/ Full-bleed gallery — hacer que la galería ocupe 100vw /
.single-product .woocommerce-product-gallery {
    position: relative
    left: 50%
    right: 50%
    margin-left: -50vw
    margin-right: -50vw
    width: 100vw
    max-width: 100vw
    box-sizing: border-box
    padding: 40px 20px / ajusta el padding según tu diseño /
    background: #fff / si quieres un fondo distinto /
}
/ Limitar el summary para que el texto no se salga /
.single-product .summary {
    max-width: 700px
    margin: 0 auto
    padding: 20px
}

4) Ajustes de miniaturas (thumbnails) y columas laterales

Si tu tema muestra miniaturas a la izquierda o debajo de la imagen principal, puedes controlar su ancho o esconderlas si no las necesitas.

/ Reducir ancho de los thumbs verticales /
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
    max-width: 120px
    margin-right: 15px
}
/ Ocultar miniaturas /
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
    display: none
}
/ Si ocultas thumbs, centrar y limitar el ancho de la imagen principal /
.woocommerce div.product .woocommerce-product-gallery__image {
    margin: 0 auto
    max-width: 800px
}

5) Forzar overrides cuando el tema aplica estilos inline o con alta especificidad

Si hay reglas inline o con mucha especificidad que impiden tus cambios, puedes:

Aumentar la especificidad de tu selector (añadir sufijos como body .woocommerce …).
Usar !important como último recurso (evítalo si puedes).

/ Uso de !important como último recurso /
.woocommerce div.product .images {
    width: 70% !important
}

Responsive: adaptar la galería a móviles

Siempre incluye media queries para que en pantallas pequeñas la galería y el resumen se apilen verticalmente y las imágenes mantengan buen tamaño.

@media (max-width: 768px) {
    .single-product .product {
        display: block
    }
    .woocommerce div.product .images,
    .woocommerce div.product .summary {
        width: 100%
        float: none
        padding: 0
    }
    .woocommerce-product-gallery__image img {
        width: 100%
        height: auto
    }
}

Controlar la apariencia de las imágenes (crop, cover, aspect-ratio)

Para mantener un aspecto homogéneo entre imágenes puedes usar object-fit junto con un contenedor con altura controlada o usar el soporte de CSS aspect-ratio.

/ Mantener proporción 4:3 y usar cover para recortar /
.woocommerce-product-gallery__image {
    width: 100%
    aspect-ratio: 4 / 3
    overflow: hidden
}
.woocommerce-product-gallery__image img {
    width: 100%
    height: 100%
    object-fit: cover
}

Depuración: cómo identificar y solucionar conflictos

Usa el inspector del navegador (Chrome DevTools, Firefox DevTools): identifica el selector exacto y las reglas que lo afectan.
Revisa si el tema o plugins añaden estilos inline o CSS encolado con mayor prioridad.
Desactiva temporalmente minificación/combinar CSS si usas plugin de optimización para que los cambios se vean inmediatamente.
Si aplicas full-bleed, revisa z-index y fondos para que no quede un solapamiento indeseado con el header o footer.
Prueba en varios tamaños de pantalla y dispositivos reales si es posible.

Ejemplos prácticos por casos de uso

Ejemplo A: Hacer la galería más grande que el summary (flex)

.single-product .product {
    display: flex
    gap: 30px
}
.single-product .product .woocommerce-product-gallery {
    flex: 1 1 70%
}
.single-product .product .summary {
    flex: 0 0 30%
}

Ejemplo B: Galería full width con contenido centrado

.single-product .woocommerce-product-gallery {
    left: 50%
    right: 50%
    margin-left: -50vw
    margin-right: -50vw
    width: 100vw
    padding: 50px 20px
    background: #fafafa
}

Consideraciones finales y buenas prácticas

Realiza los cambios en un tema hijo para evitar perder personalizaciones al actualizar el tema.
Prueba siempre en móviles y tabletas. Ajusta breakpoints según el tema.
Evita usar demasiado !important es bueno como último recurso, pero dificulta mantenimiento.
Si dependes de un plugin de galería (slick, swiper, photoswipe), revisa su documentación para hooks o clases específicas que necesiten ajustes adicionales.
Haz backup antes de modificar archivos del tema o functions.php.
Si tu tema usa CSS-in-JS o estilos generados en línea desde PHP, quizá necesites encolar tu CSS después o usar wp_add_inline_style para mayor prioridad.

Recapitulación rápida

Inspecciona la estructura y localiza selectores exactos con DevTools.
Elige la técnica según tu tema: floats, flexbox o grid.
Aplica media queries para mobile y retoca object-fit/aspect-ratio en imágenes.
Usa un tema hijo o CSS adicional en el customizer para aplicar cambios de forma segura.

Snippets útiles (resumen)

Reúno de nuevo los snippets más útiles listos para pegar (adaptarlos al selector exacto de tu tema):

/ Flex: galería 65% - summary 35% /
.single-product .product { display:flex gap:30px }
.single-product .product .woocommerce-product-gallery { flex:1 1 65% }
.single-product .product .summary { flex:0 0 35% }

/ Responsive: apilar en móvil /
@media (max-width:768px) {
  .single-product .product { display:block }
  .woocommerce div.product .images,
  .woocommerce div.product .summary { width:100% float:none }
}

/ Full-bleed gallery /
.single-product .woocommerce-product-gallery {
  left:50% margin-left:-50vw width:100vw padding:40px 20px
}

/ Asegurar imágenes responsivas /
.woocommerce-product-gallery__image img {
  width:100% height:auto object-fit:contain
}

Con estos pasos y ejemplos puedes controlar con precisión el ancho y comportamiento de la galería en la ficha de producto de WooCommerce. Ajusta selectores y valores a tu tema, comprueba con DevTools y aplica las reglas en el lugar adecuado (child theme o CSS adicional) para que los cambios sean estables.

SushiHost