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.
