How to fix weird image sizes

If you enable the ‘image cropping’ feature in External Images, CSS is then used to resize the external images in the browser.

Due to the wide-variety of themes, it’s very difficult to get this CSS perfect. What it currently uses is this:

.woocommerce .products .product img {
object-fit: cover!important;
max-width: 100%!important;
height: 300px!important;
}

That is, it’s setting all images to be cropped that are inside a .product class, inside a .products (archive) class and inside a .woocommerce class.

For all themes we have tested, this works – e.g. your archive pages will have this structure and your related-products will also have this structure.

That does mean that your thumbnails on your shop archives and the thumbnails on your related products sections will be the same size. If you wish to change that, read on, or if you find your theme has other images inside the <product></product> divs then you may be seeing other images which have been made larger and cropped by accident. This may happen if your theme uses images for stars on top of your product images or something similar. We’ve yet to see it, but it may happen so please comment below with the theme name and a URL so we can give you the fix.

Fixing the CSS yourself

If your theme has these oddities, you can fix it yourself if you wish. For example, with the Rehub theme the related products are wrapped in a .related-woo-area class, so you could add this CSS to your theme to reduce the size of the related products:

.related-woo-area .woocommerce .products .product img {
object-fit: cover!important;
max-width: 100%!important;
height: 150px!important;
}

If there is some CSS issue you cannot fix, let us know below and we’ll update this KB.


Did this article answer your question?

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *


We use cookies

We use cookies for various things on our site, including our on-site chat bubble (if you use it), our comment forms (if you use them) and for session handling (if you log in).

Other than that, we use cookies to identify where traffic came from to help us understand which traffic turns into sales, we use a cookie for Google Analytics traffic analysis and we use a cookie to customise adverts for our own products we think you'll be interested in.

You can read more detail in our privacy policy page. Please click 'Accept' or 'Decline' to continue.