[RESUELTO] Cómo arreglar cuando ciertas miniaturas de productos de WooCommerce se salen del tamaño establecido

Cuando importas productos en WooCommerce, ya sea en una migración desde otro CMS como Magento o Prestashop, o ya sean productos de Amazon o un proveedor de dropshipping, nos encontramos una sorpresa desagradable: Algunas imágenes de productos son más altas que anchas, y no general bien la miniatura. Esto deforma la tienda por completo y se vuelve un problema frustrante.

El método tradicional

Muchas personas se dedican a arreglar a mano una a una cada imagen de producto que se ve mal. Pero en tiendas de 20.000 productos esto puede llevar una enorme cantidad de horas, días… etc. ¿Hay necesidad de tanto sufrimiento? ¿Y si hubiera una forma de resolver esto en 2 minutos? Si si, en dos minutos. ¡Sigue leyendo!

La solución mágica del CSS

Ah, la magia de las Hojas de Estilo en Cascada… si simplemente vas a Personalizar > Código CSS Adicional y pegas ahí esto que te dejo a continuación, la magia del CSS hará el trabajo por ti:


  /* Este código a continuación hace que las imágenes de WooCommerce no se deformen */ 

.woocommerce ul.products li.product a img {
    width: auto;
    height: 300px; 
    display: block;
    margin: 0 0.5em 2em;
    box-shadow: none;
}  

Por qué funciona esto

WooCommerce tiene la particularidad de fijar el ancho de la miniatura en un valor, que es configurable, pero que viene por defecto en 300X300 píxeles. El problema es que el ancho lo fija en porcentaje y el alto de la imagen lo deja en «auto». Esto está bien para una imagen de proporciones «normales», ya que si el ancho y el alto de la imagen son iguales, o el ancho es mayor, se ajustará bien. Pero ¿Qué pasa cuando es una imagen de 300X900 píxeles? Pues que no hará nada porque el ancho ya es de 300px y así lo dejará. Con este código CSS lo que hacemos es forzar el alto en la medida de recorte (300 pixeles) de forma que así todas las miniaturas van a ser iguales. Puedes comprobarlo en la web https://debarbas.online que es de donde hemos sacado el pantallazo que acompaña a este post y que pertenece a nuestra empresa.

Notarás que al reducir la pantalla las imágenes pueden alargarse un poco, pero lo hacen todas del mismo modo. Al menos, no salen unas más grandes que otras deformándolo todo, por lo que el código cumple con su función. Si no te gusta que quede así, puedes poner también un valor fijo en el «ancho» dentro del código.


Y eso es todo, esperamos que te haya servido este breve artículo sobre un problema que parece ser bastante más común de lo que debería.