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

Es poco probable que todas las imágenes de nuestro catálogo estén al mismo tamaño, ya sea porque no tenemos tiempo para retocarlas, el proveedor nos la manda así, etc. Esto hace que se nos quede un catálogo deforme como puedes ver en la siguiente imagen:

tutorial Smart Image Resize for WooCommerce
Catálogo de productos con diferentes tamaños de imágenes

Esto no crea una imagen de página web profesional, lo que hace que podamos perder ciertas ventas por usabilidad o falta de confianza del cliente en nosotros. Lo ideal sería un catálogo de esta forma:

configurar Smart Image Resize for WooCommerce
Catálogo de productos alineados

Esto mismo también se da en la propia ficha de producto, sobretodo con las imágenes muy altas y poco anchas:

como hacer que todas las imagenes tengan el mismo tamaño en woocommerce
Imagen desajustada en ficha de producto

En este tutorial en español vamos a ver cómo hacerlo de la forma más efectiva posible, para que todas tengan el mismo tamaño, no pierdan calidad y lo más importante… HACERLO DE MANERA AUTOMÁTICA.

Elegir el tamaño de las imágenes por defecto

Esto será lo primero que debemos configurar, ya que quizás por defecto en nuestra plantilla mete algún tamaño poco común. Por lo general una proporción cuadrada 1:1 es lo ideal, hay otros sectores como el de la moda femenina que tiene que ser más alta 3:4 por ejemplo.

Esto lo configuramos en Personalizar > Apariencia > WooCommerce > Imágenes de producto:

elegir el tamaño de las imagenes en woocommerce
Configuración del tamaño de las imágenes en WooCommerce

Recomiendo por defecto 600 de ancho, sin embargo como siempre sigo depende de tus imágenes: si necesitas que el cliente haga zoom para verlo al detalle tendrá que ser un tamaño superior(por ejemplo).

Smart Image Resize for WooCommerce

Este será el plugin que usaremos para ponerlas a la misma proporción, se encuentra de forma gratuita en el repositorio oficial de WordPress. Te permite:

  • Poder elegir el tamaño al que vas a redimensionar la imagen.
  • Eliminar los espacios que se quedan en blanco de las imágenes que son horizontales.
  • Crear espacios en blanco o en el fondo que prefieras a aquellas imágenes muy altas.

El problema de este plugin es que la versión gratuita solo te deja 150 imágenes. Os voy adelantando que para el precio que tiene el PRO merece la pena pagarlo, porque te ahorras un trabajo importante. Además podrás cambiarlas de formato a .jpg o WebP.

También permitirá poner marcas de agua en las fotos de WooCommerce en un futuro.

Configuración del plugin

Antes que nada recomiendo hacer una copia de seguridad, por si acaso la configuración falla.

Una vez instalado nos vamos a ajustes del plugin y nos saldrá la siguiente pantalla:

Smart Image Resize for WooCommerce
Configuracion del plugin Smart Image Resize for WooCommerce

En este caso marcamos Enable Re-sizing y elegimos los tamaños de imágen(sizes). Hay que marcar todos los que ten vinculados con WooCommerce o plugins que dependan de este, como los de YITH.

Elegimos el color de fondo con el que queremos rellenar las fotos largas, en este caso recomiendo el color que tengáis de fondo por defecto en el ecommerce. Puedes elegir también la compresión de la imagen. una vez elegida toda la configuración guardamos cambios e instalamos el siguiente plugin que nos recomienda en la otra pestaña:

Regenerate Thumbnails

Este plugin nos servirá para volver a redimensionar las fotografías con la permisa que hemos configurado en el anterior, nos saldrá la siguiente pantalla:

regenerate thumbnails fotos woocommerce
Configuración para redimensionar las imágenes en WooCommerce

En ese caso vemos 2 opciones que podemos configurar:

Saltar la regeneración si existe ya el tamaño acorde: Con esto conseguimos ahorrarnos fotos para esas 150 y además no saturar el servidor con la duplicidad de esas imágenes.

Borrar los archivos de tamaños antiguos: Esto no lo marcaría nunca, ya que es muy peligroso por si se borran imágenes que no deberían eliminarse.

Ahora solo nos queda elegir de qué forma regeneramos, si son todas o bien solo las imágenes destacadas(las que salen de portada en los productos de WooCommerce).

He puesto este caso peculiar ya que con la version gratuita solo podemos 150, por lo que preferimos cambiar solo las de portada que las del resto de la galería. Si pagamos la versión premium haríamos las 313.

Siguiendo con el ejemplo del producto del principio se nos queda el siguiente resultado:

hacer todas las imagenes uniformes en woocommerce
Resultado final

Resolución

JO-DER ¿Que diferencia con el ejemplo no?. Puede parecer complicado(no me esperaba que se quedase tan largo) pero merece mucho la pena hacerlo así que ir imagen por imagen en el Photoshop editándolas.

Por último dar créditos a mi compañero Cristian Meroño del podcast de Acho, Qué locos! que me enseñó la herramienta. Por último recordaros que las imágenes también salen en el feed de Google Shopping, por lo que dejarlas bien así también es una ventaja.

¡Haz clic para puntuar esta entrada!
(Votos: 4 Promedio: 5)

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Contactar

También puedes suscribirte a mi newsletter para no perderte ninguna novedad

Reader Interactions

comentarios

  1. mauricio says

    excelente información !
    pero tengo un problema y es que no logro cambiar el color del fondo de las fotos, al seleccionar el color le doy guardar los cambios pero no cambia el color del fondo de las fotos . como podría revertir el proceso para volver hacerlo con el fondo deseado ?

    saludos .

    • Diegol says

      Hola Mauricio,

      El fondo de las fotos no lo cambia, solo lo rellena lo que falta. Es decir, si la imágen es rectangular rellena el fondo arriba y abajo de ese color para hacerla cuadrada.

      Creo que te refieres a eso,

      Un saludo!

  2. Chema says

    Gran articulo Diegol.

    Pero tengo un problema y es que cuando las eh regenerado las imágenes al verlas se ven borrosas, antes las imágenes tenían de ancho 250 x 450 mas o menos, y ahora se ven todas centradas y enteras pero borrosas.

    ¿Sabes que puede suceder? muchas gracias diegol

    • Diegol says

      Muchas gracias Chema!

      Por lo que veo las fotos son muy pequeñas, mínimo para WooCommerce deberían tener entre 600-1000 de ancho. Aun así miraver volver a redimensionarlas pero elige un ancho más pequeño como el de 300×300, sino te pasará igual.

      Un saludo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *