[RESOLVED] How to fix when certain thumbnails of WooCommerce products go out of the established size

/ E-Commerce, Web Development, WooCommerce, WordPress / By

When you import products into WooCommerce, whether it’s a migration from another CMS like Magento or Prestashop, or whether it’s Amazon products or a dropshipping provider, we find an unpleasant surprise: Some product images are taller than wide, and do not generate well the miniature. This deforms the store completely and becomes a frustrating problem.

The traditional method

Many people are dedicated to fixing by hand one by one each product image that looks bad. But in stores of 20,000 products this can take a huge amount of hours, days … etc. Is there a need for so much suffering? What if there was a way to solve this in 2 minutes? Yes, in two minutes. Keep reading!

The magic solution of CSS

Ah, the magic of Cascading Style Sheets … if you’re just going to Customize> Additional CSS Code and put this down here, the magic of CSS will do the work for you:


  /* 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;
}

Why this works

WooCommerce has the peculiarity of setting the width of the miniature in a value, which is configurable, but which comes by default in 300X300 pixels. The problem is that the width sets it as a percentage and the height of the image leaves it “auto”. This is fine for an image of “normal” proportions, since if the width and height of the image are equal, or the width is larger, it will fit well. But what happens when it is an image of 300X900 pixels? Well, it will not do anything because the width is already 300px and so will leave. With this CSS code what we do is to force the height in the measure of cropping (300 pixels) so that all the thumbnails will be the same. You can check it on the website https://debarbas.online which is where we have taken the screenshot that accompanies this post and that belongs to our company.

You will notice that when you reduce the screen, the images may lengthen a bit, but they all do the same. At least, some larger than others do not deform everything, so the code fulfills its function. If you do not like it to be that way, you can also put a fixed value on the “width” inside the code.

And that’s it, we hope you’ve been served this short article about a problem that seems to be a lot more common than it should be.

Shopping Cart