Tamaño de las imágenes de producto en WooCommerce: los tres tamaños y cómo cambiarlos de verdad

WooCommerce genera tres tamaños de imagen por cada foto de producto que subes, y solo dos son editables desde el escritorio de WordPress. woocommerce_thumbnail es la imagen de la cuadrícula del catálogo, woocommerce_single es la imagen grande de la página de producto y woocommerce_gallery_thumbnail es la tira de miniaturas pequeñas que va debajo. Se cambian en Apariencia > Personalizar > WooCommerce > Imágenes de producto, y si ese panel te muestra un desplegable de recorte pero ninguna casilla de ancho, tu tema ha bloqueado los anchos en el código a propósito.

Los tres tamaños

Nombre del tamaño	Dónde aparece	Recorte	Editable en el personalizador
woocommerce_thumbnail	Página de tienda, cuadrículas de categoría, productos relacionados, ventas cruzadas	Recorte duro a cuadrado por defecto	Ancho y proporción
woocommerce_single	Imagen principal de la página individual de producto	Sin recortar — mantiene la proporción original	Solo el ancho
woocommerce_gallery_thumbnail	Tira pequeña bajo la imagen principal del producto	Cuadrado con recorte duro	No

Estos se suman a los tamaños estándar de WordPress. Una sola foto de producto suele generar thumbnail, medium, medium_large, large, los tres tamaños de WooCommerce y, posiblemente, extras que tu tema registre con add_image_size. Son muchos archivos por subida, y por eso una importación de 300 productos tarda tanto.

La miniatura de la galería es la que sorprende a la gente: no tiene ningún control en el escritorio. En una instalación por defecto es un cuadrado pequeño, históricamente de 100px, y es la que más papeletas tiene para verse borrosa en una pantalla retina porque el archivo es genuinamente diminuto.

Dónde están de verdad los ajustes

Apariencia > Personalizar > WooCommerce > Imágenes de producto te da tres controles:

• Ancho de la imagen principal — el ancho de woocommerce_single. La altura es automática, así que se conserva la proporción original.
• Ancho de la miniatura — el ancho de woocommerce_thumbnail.
• Recorte de la miniatura — 1:1 (cuadrado, el valor por defecto), Personalizado (escribes una proporción como 4:3) o Sin recortar.

Fíjate en lo que falta: no hay campo de altura para la miniatura del catálogo, porque la altura se deduce de la proporción de recorte. Y no hay absolutamente nada para la miniatura de la galería.

Antes de cambiar nada, viene bien ver exactamente qué derivados va a producir un archivo concreto: suelta una foto real de producto en la herramienta de tamaños de imagen de WordPress y obtienes la lista completa, incluyendo si tu origen es lo bastante grande para cubrir cada tamaño sin ampliar.

Por qué tus imágenes de catálogo se ven mal

La miniatura del catálogo se recorta de forma dura a un cuadrado. Recorte duro significa que WooCommerce toma un cuadrado del centro de tu foto y tira el resto: no añade franjas ni deforma la imagen. Una foto de producto de 2000x1200 se convierte en una porción de 1200x1200 tomada del centro, y luego se reduce.

Eso está bien para una botella fotografiada justo en el centro y con margen alrededor. Es un desastre para:

• Productos alargados (esquís, cables, barras de cortina): ves el tercio central y nada más
• Composiciones descentradas: el producto se va hacia el borde del encuadre y queda cortado
• Fotos donde el artículo llena el encuadre de lado a lado: la parte de arriba y la de abajo se pierden
• Fotos de ambiente con el producto en una esquina

El consejo habitual es “cambia el recorte a Sin recortar”. Funciona, pero seamos honestos con el coste: sin recortar significa que cada miniatura conserva su propia proporción, así que una cuadrícula de fotos con orientaciones mezcladas queda visualmente irregular y las filas dejan de alinearse salvo que el CSS de tu tema gestione alturas variables. La mayoría de temas dan por hecho que son cuadrados.

La solución mejor, si puedes permitírtela, está en el origen: estandariza fotos de producto cuadradas con el artículo centrado y márgenes uniformes. Así un recorte cuadrado duro no cambia nada y todo lo que viene después es predecible. Cambiar el ajuste de recorte es el apaño; imágenes de origen consistentes son la solución de verdad.

Cuando el tema bloquea los anchos

Si tu panel de Imágenes de producto solo ofrece el recorte, tu tema declaró anchos fijos al registrar su compatibilidad con WooCommerce:

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

Cuando un tema pasa esos valores, WooCommerce elimina los controles de ancho del personalizador y deja solo la proporción. Ni es un fallo ni es que el tema sea hostil: el CSS de la maquetación de producto está construido alrededor de esos anchos exactos en píxeles, y dejarte cambiarlos rompería la cuadrícula.

Puedes sobrescribirlos desde el functions.php de un tema hijo usando el filtro de cada tamaño:

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

El mismo patrón sirve para woocommerce_get_image_size_thumbnail. Esta es además la única forma de cambiar la miniatura de la galería, ya que no tiene interfaz.

El coste real, dicho claramente: sobrescribir un ancho bloqueado significa que el archivo que genera WooCommerce ya no coincide con lo que espera el CSS del tema. Lo normal es que la imagen simplemente se escale en el navegador y se vea bien, porque ahora es más grande que la caja. A veces el tema tiene un contenedor de altura fija y aparecen franjas o desbordamiento. Pruébalo en un producto antes de regenerar 2.000.

Cambiar los tamaños implica regenerar

Cada ajuste de tamaño solo afecta a las subidas nuevas. Los productos existentes siguen sirviendo los archivos que se generaron cuando se subieron, así que no cambia nada visible hasta que los reconstruyas.

WooCommerce lanza una regeneración en segundo plano al guardar el personalizador. En un catálogo pequeño es suficiente. En uno grande depende de que WP-Cron se dispare con fiabilidad, cosa que en una tienda con poco tráfico a menudo no ocurre, y acabas con la biblioteca regenerada a medias. Mejor ejecútalo tú:

wp media regenerate --yes

Para reconstruir solo las imágenes de producto:

wp media regenerate --yes --post_type=product

Si quieres quitar de en medio el trabajo en segundo plano mientras lo haces a mano:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

Dos cosas que la regeneración no hará. No borra los archivos antiguos: tu directorio de subidas conserva todos los derivados huérfanos de los ajustes anteriores, y seguirá creciendo. Y no puede crear un tamaño mayor que tu origen, porque WordPress no amplía. Si pones el ancho de la imagen principal en 1200 pero tus fotos de producto tienen 800px de ancho, no se crea ningún archivo de 1200px; el navegador recibe uno de 800px y lo estira, y srcset no tiene nada mejor que ofrecer.

El tamaño que hay que subir de verdad

Apunta a imágenes de origen cuadradas de aproximadamente el doble de tu mayor ancho configurado: 1200x1200 para una imagen principal de 600px, 1600x1600 si tu tema usa 800px. Eso cubre las pantallas retina 2x y le da a WordPress píxeles suficientes para construir cada derivado sin ampliar. Mantén todos los productos con las mismas dimensiones para que la cuadrícula quede uniforme.

¿Sigues atascado?

Si los tamaños están bien configurados, ya has regenerado y un producto sigue viéndose mal, abre la imagen en una pestaña nueva y lee el nombre del archivo. Un sufijo de dimensiones que no coincide con ningún tamaño que hayas configurado significa que algo más lo registró. Ningún sufijo significa que WooCommerce recurrió al archivo de tamaño completo, lo que casi siempre quiere decir que el origen era demasiado pequeño para el tamaño que pediste. Pasa ese archivo de origen por la herramienta de tamaños de imagen y compara lo que WordPress debería generar con lo que el navegador cargó de verdad: cuando no coinciden, lo habitual es que haya un plugin optimizador o un redimensionador de CDN metido en medio.