Poner todas las imágenes de WooCommerce al mismo tamaño

Imágenes de producto del mismo tamaño en WooCommerce [Plugin y código]

Poner todas las imágenes de WooCommerce al mismo tamaño es una de las cosas que hay que hacer si o si al diseñar una tienda con WooCommerce, ya que uno de los fallos más habituales que suelen cometer los propietarios de tiendas online es subir las imágenes a la tienda cada una de diferente tamaño.

WooCommerce, como cualquier otra plataforma para la creación de tiendas online, obliga a que todas las imágenes sean iguales, algo que muchas veces no se tiene en cuenta o directamente no se puede hacer al recibir las fotos de distintos distribuidores o tener que buscarlas en Internet.

En Internet hay programas como el maravilloso Canva o Edit.org una fantástica alternativa a este, que te recomiendo tener a mano, ya que son imprescindibles cuando se tiene una tienda online, porque permiten de forma muy fácil hacer modificaciones o diseños para webs, tiendas online o las redes sociales.

Sin embargo, también es cierto que redimensionar todas las imágenes de WooCommerce al mismo tamaño una por una es un trabajo laborioso y costoso, lo que hace obligatorio buscar una forma de hacerlo de forma automática.

Como actualización para esta entrada en el 2025 vamos aañadir también abajo el código para poder hacerlo sin depender de ningún plugin.

Smart Image Resize – Haz todas las imágenes de WooCommerce al mismo tamaño

Si lo que te acabo de contar es tu caso, te vas a llevar una alegría, ya que redimensionar todas las imágenes de WooCommerce al mismo tamaño realmente es algo que se puede resolver siguiendo unos sencillísimos pasos en cuestión de minutos.

Lo primero que deberás hacer será descargarte el plugin Smart Image Resize – Make WooCommerce Images the Same Size Desde este enlace o desde el repositorio de plugins y activarlo. Smart Image Resize es un plugin imprescindible para conseguir que las imágenes de WooCommerce sean uniformes y del mismo tamaño sin tener que editarlas a mano.

Como muchísimos plugin de WordPress consta de dos versiones, la versión gratuita o Lite con la que se puede redimensionar hasta 150 imágenes y la Pro que permite redimensionar un número ilimitado de imágenes por solo 39$ al año o 99$ de por vida, y que puedes comprar directamente en su web.

Realmente la gracia de este plugin no es que recorte las imágenes, sino que elimina o rellena los espacios en blanco alrededor de la imagen o puedes establecer un color de fondo personalizado para que coincida con el diseño de tu tienda, siendo así como consigue poner todas las imágenes de WooCommerce al mismo tamaño.

Así que estamos hablando de plugin de redimensionamiento inteligente que hace que al igualar todas las imágenes de WooCommerce al mismo tamaño, tu tienda luzca más profesional y atractiva, con imágenes de productos uniformes y del mismo tamaño, sin recortar, ahorrando tiempo, energía y dinero

Pasos para conseguir poner todas las imágenes de WooCommerce al mismo tamaño

Para utilizar el plugin Smart Image Resize una vez instalado, la forma más fácil es ir a todos los “Plugins instalados” y pulsar en ajustes, una vez en la pantalla de configuración puedes tocar los valores con los que se recortarán y rellenarán las imágenes, te recomiendo dejarlo tal y como está a excepción del color de fondo si quieres seleccionar uno diferente al blanco o mantenerlo transparente.

Ahora simplemente deberás pulsar en “Guardar” y verás que pone qué necesita el plugin Regenerate Thumbnails un muy conocido plugin de WordPress que es el que le va a permitir hacer toda la magia. Si no lo tienes instalado te redirigirá al repositorio de plugin para que puedas descargarlo.

Una vez descargado y activado vuelve a la página de Smart Image Resize y ahora habrá cambiado el texto y te dirá que entres en la herramienta Regenerate Thumbnails y pulses en redimensionar archivos adjuntos, una vez hecho el plugin empezará a redimensionar las imágenes con un máximo de 150 si tienes la versión Lite, y listo, si ahora vuelves a mirar en la página de tu tienda verás que todas las imágenes están exactamente al mismo tamaño el lugar de como en la imagen que ves aquí abajo.

Ahora ya tendrás todas las imágenes de WooCommerce al mismo tamaño

El plugin Smart Image Resize es la solución perfecta para poner todas las imágenes de WooCommerce al mismo tamaño, además de ofrecer otras funciones como eliminar los espacios en blanco no deseados y establecer el color de fondo personalizado, por lo que es perfecto para conseguir imágenes de aspecto profesional y ahorrar dinero.

Además, como has visto, es muy fácil de configurar y utilizar, y no requiere la edición y redimensionamiento manual de las imágenes, ya que lo que hace es básicamente añadir fondo del color que quieras a tus productos para rellenar las más pequeñas y que la tienda y que luzca mucho más profesional.

WooCommerce es una gran plataforma que permite hacer prácticamente lo que te dé la gana para tener la tienda online perfecta y una de esas cosas es poner todas las imágenes de WooCommerce al mismo tamaño, así que espero que esta guía te haya ayudado.

Todas las imágenes de WooCommerce al mismo tamaño sin depender de plugins

Aunque el plugin Smart Image Resize es genial para poner todas las imágenes de WooCommerce al mismo tamaño, tiene la limitación de 150 imágenes en su versión gratuita, por lo que vamos a añadir un pequeño fragmento de código a través de un plugin code snippet para poder hacerlo sin depender de este plugin.

En este post puedes ver cómo utilizar WordPress code snippet para añadir cualquier código que quieras a tu página web o tienda online sin tener que tocar para ello el archivo functions.php. Una vez tienes el plugin activado y funcionando vas a añadir la siguiente función:

// Cambiar el tamaño de imagen para miniaturas de producto en WooCommerce
add_filter('woocommerce_get_image_size_thumbnail', function($size) {
    return array(
        'width'  => 400,  // Puedes cambiar este tamaño
        'height' => 400,
        'crop'   => 1     // 1 = recorte centrado
    );
});

Una vez guardado y activado deberás regenerar nuevamente las imágenes de WooCommerce con el plugin Regenerate Thumbnails y esperas a que termine de redimensionar todas las imágenes. Opcionalmente, puedes añadir el siguiente código para que no guarde tamaños intermedios y así ahorrar peso en la web.

add_filter('intermediate_image_sizes_advanced', function($sizes) {
    unset($sizes['medium']);
    unset($sizes['large']);
    unset($sizes['medium_large']);
    return $sizes;
});

Adicionalmente, para asegurarte que queden todas las imágenes de WooCommerce al mismo tamaño tanto en las páginas y shortcodes de productos como en los productos individuales, aunque alguna falle, también vamos a añadir este estilo CSS a través de Apariencia > Personalizar > CSS adicional.

.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: unset !important;
    max-height: unset !important;
}

.woocommerce div.product div.images img {
    width: 100% !important;
    height: 500px !important;
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: unset !important;
    max-height: unset !important;
}

Una vez hecho esto ya sí que tendrás todas las imágenes de WooCommerce al mismo tamaño y tu tienda online se verá de auténtico lujo, Si prefieres no depender de plugins externos como Smart Image Resize for WooCommerce, puedes optar por una solución más ligera y personalizada: un pequeño plugin desarrollado a medida que fuerza que todas las imágenes de producto tengan el mismo tamaño visual, tanto en la tienda como en las fichas individuales.

A este plugin lo hemos llamado Uniform Product Images, y ajusta automáticamente el alto de todas las imágenes a 400 px en el catálogo y a 500 px en la página del producto. No necesitas tocar CSS ni usar herramientas externas: simplemente lo subes, lo activas y funciona.

Puedes descargarlo aquí: javiercallejo-uniform-product-images.zip

Esta alternativa es ideal si buscas una solución rápida, controlada y sin sobrecargar tu instalación con funciones que no necesitas para poner todas las imágenes de WooCommerce al mismo tamaño. ¡Y además lo puedes modificar a tu gusto! Recuerda que una vez instalado tendrás que hacer una pasada con el plugin Regenerate Thumbnails. Esperamos que tanto el tutorial como el plugin te sirvan para dejar tu tienda como todo un profesional.