[Plugin: WooCommerce – excelling eCommerce] Related Product image is too big

Check your CSS…It is blurry because of this ->
.related ul.products li.product, .related ul li.product, .upsells.products ul.products li.product, .upsells.products ul li.product

It is setting it to 48% width which in turns stretches out your 150×150 image…

thank you
I found the woocommerce.css file in the folder: woocommerce/assets/css
and I found the place to correct.

My Notepad++ write the css file as one long string and around column 11430 is the %-figure to correct)

for my system I change the figure to 24% and it worked.

Thanks guys. Saved me a headache with this one. Worked like a charm.

Well, the next problem is to make this change permanent, so I do not have to do it every time there is an update.

thanx a lot!

Hi all,

I would like to have my thumbnails a bit smaller to have more thumbnails in the same row (by default are 3 and I want to have 10 thumbnails in the same row), I’ve already changed my woocommerce CSS to decrease the width to 10% but it still change line after the third images …. where can I remove change it to have 10 thumbnails per line?

Thank you in advance
Filipe

This solution worked for me:

add this code in your /public/www/wp-content/themes/<theme>/functions.php

add_filter ( ‘woocommerce_product_thumbnails_columns’, ‘zz_thumb_cols’ );
function zz_thumb_cols() {
return 8; //Change the 8 to reflect how many columns you need
}

source:https://chromeorange.co.uk/woocommerce-set-number-of-thumbnail-columns/

I hope it helps

Best Regards
Filipe

OUr product images are getting cropped wrong…. I did a thumbnail refresh but they still get cropped 130×300. How can I get square thumbnails

@batman36 – in order to have WordPress crop an image to exact dimensions, usually you need to set your image option to “hard crop” mode. Then you need to regen the images again to see the changes.

We are using WooCommcerce…. and my images are being cropped in half. I did the media, WC media and regen thumbnail 2x, but still the are being hard cropped instead of full image.

@batman36, WooCommerce uses WordPress cropping functions…If your image is big enough and say 800×600 full image size and you set your settings to hard crop 500×500, then your image will be cropped to that size. However if your image (fullsize) isn’t big enough then WP can only crop it to the max width or height of the fullsize image.

Hi,

Managed to remove ‘bluriness’ also by doing

1. measured each image size using pixelwindow
2. used pixlr to modify each image size
3. Changed ‘Image Options’ in WooComm > Settings > Catalogue
4. uploaded images and regenerated thumbnails…

That worked well for the catalogue, thumbnail and single product page images…
i.e. https://mikemetcalfe.co/product/4th-product-test-tool-angel-investment/

BUT…

Is there a way to load a bigger image solely for the lightbox?

Figure I could just load a wider / higher image – but that changes the dimensions of all other images.

Thks

Self-editing the above… rookie mistake… just loaded a bigger image.

I added the code below to the end of the theme’s style.css code and all was correctly sized and looking great.

Adding to the theme means you avoid issues when the woocommerce plugin gets updated and you won’t lose your changes.

Of course if you change or update the active theme you will also have to add the css below back in.

.woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product {
width: 24% !important;
}