Cómo lograr que todas las fotos de tus productos se vean parejas en WooCommerce (sin cortarlas)

Si tienes una tienda en WooCommerce, seguro te ha pasado: subes los productos, entras a la página de tienda y… las fotos se ven desordenadas. Unas son cuadradas, otras verticales, otras rectangulares, y cada tarjeta de producto queda de una altura distinta. El resultado es una cuadrícula despareja que se siente poco profesional.

Esto es muy común en tiendas con catálogos variados, una librería, por ejemplo, donde conviven portadas verticales, juegos cuadrados y materiales de distintos formatos. La buena noticia es que se soluciona en pocos minutos y sin tocar el código del tema.

El problema: imágenes de distintas proporciones

WooCommerce muestra cada imagen con la proporción original del archivo que subiste. Si tus fotos no están estandarizadas, la cuadrícula hereda ese desorden. Hay dos caminos para arreglarlo:

1. Recortar todas las imágenes a una misma proporción. El problema es que el recorte corta parte de la foto, y en productos como libros eso significa perder el título o parte de la portada.
2. Definir un marco uniforme y hacer que cada imagen se muestre completa dentro de él, rellenando el espacio sobrante con un color de fondo.

La segunda opción es casi siempre la mejor: todas las tarjetas quedan de la misma altura y ninguna imagen se corta.

La solución en dos pasos

Paso 1: Desactivar el recorte en WooCommerce

Antes de tocar nada de código, hay un ajuste nativo que es clave. Ve a Apariencia → Personalizar → WooCommerce → Imágenes de producto y selecciona la opción Sin recortar (en inglés, Uncropped).

Esto le dice a WooCommerce que muestre las imágenes completas, sin cortarlas para forzar una proporción. Es el cimiento de todo lo demás: si dejas el recorte activado, el código del siguiente paso va a estar peleando contra el propio tema.

Paso 2: Definir un marco uniforme con CSS

Ahora vamos a crear un «marco» del mismo tamaño para todas las fotos. Dentro de ese marco, cada imagen se mostrará completa y centrada, y el espacio que sobre se rellenará con un color de fondo.

Pega este código en Apariencia → Personalizar → CSS adicional:

/* Marco uniforme para todas las tarjetas de producto */
.woocommerce ul.products li.product .product-element-top {
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    overflow: hidden;
}

/* Que la imagen se vea completa dentro del marco */
.woocommerce ul.products li.product .product-element-top img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Marco uniforme para todas las tarjetas de producto */
.woocommerce ul.products li.product .product-element-top {
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    overflow: hidden;
}

/* Que la imagen se vea completa dentro del marco */
.woocommerce ul.products li.product .product-element-top img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

Cómo personalizarlo a tu gusto

El código tiene dos líneas que vale la pena entender, porque son las que vas a querer ajustar según tu tienda.

La proporción del marco (aspect-ratio). Esta es la línea que define la forma de todas las tarjetas. Funciona como «ancho / alto»:

• 1 / 1 → marco cuadrado. Ideal si tus productos son más o menos cuadrados.
• 4 / 5 → marco vertical. Perfecto para libros, posters o productos altos.
• 2 / 1 → marco rectangular ancho. Útil para banners o productos apaisados.

Si una imagen no coincide con la proporción del marco, simplemente se mostrará completa y dejará espacio en blanco arriba/abajo o a los lados. Por eso elegir la proporción que mejor represente a la mayoría de tus productos reduce el espacio vacío.

El color de fondo (background). Es el color que rellena el espacio sobrante. Lo más limpio es usar el mismo color del fondo de tu web, así el relleno pasa desapercibido. Si tu sitio tiene fondo blanco, déjalo en #ffffff. Si tu fondo es otro color, cámbialo por el código hexadecimal que corresponda.

Un truco para verificar que funciona

Si después de pegar el código no ves cambios, casi siempre es por la caché. WooCommerce, el tema o el servidor pueden estar mostrando la versión vieja de los estilos. Después de guardar, purga toda la caché (la del plugin de caché y la del servidor) y recarga la página forzando la actualización.

Para confirmar que el código se está aplicando, puedes pegar temporalmente esta regla de prueba:

.product-element-top {
    border: 3px solid red;
}

.product-element-top {
    border: 3px solid red;
}

Si las tarjetas se ponen con un borde rojo, el código se está cargando bien y solo era cuestión de caché. Luego borras esa línea de prueba y listo.

En resumen

Con un ajuste nativo de WooCommerce y unas pocas líneas de CSS, tu página de tienda pasa de verse desordenada a tener una cuadrícula pareja y profesional, sin sacrificar ninguna parte de tus fotos. El secreto está en definir un marco uniforme y dejar que cada imagen se acomode dentro de él.

Es uno de esos cambios pequeños que mejoran muchísimo la percepción de calidad de una tienda. Y lo mejor: lo aplicas una sola vez y queda funcionando para todo el catálogo, incluso para los productos que subas en el futuro.