Woocommerce category thumbs size setting

Hey marcusss,
Thank you for your patience and the links, when I look at your category image above description example and compare it to the direct 512×512 image file the quality looks the same,
but when I compare the 512×512 to the original there does seem to be a difference.
I also see that your images in your media library are jpg but are webp on the frontend, perhaps this is related to your EWWW Image Optimizer plugin or perhaps some quality is lost when WordPress generates thumbnails from webp?
Try disabling your image plugin and upload a new different image to test with, in a good quality jpg format and check again.

Best regards,
Mike

Hi,
Thanks for your feedback, but I believe that this is due to the resolution of your image, it can’t become sharper the smaller it is shown, for example below is a screenshot of your 512×512 image in a different browser tab scaled down next to the same image on your product page and they look the same.

Best regards,
Mike

Hi Marco,

You can adjust the size of the catalogue images in the Customize > Woocommerce > Product Images panel. Look for the Thumbnail width field and adjust its value. Default image width is set to 300px.

Best regards,
Ismael

Hi,

Thank you for the update.

You may need to adjust the size further to display a larger image. Please note that the catalogue images will not exactly display in the specified size. It will only display a thumbnail or image size that is closest to the specified width value. Unfortunately, there is no registered thumbnail with the size 512x512px.

Best regards,
Ismael

Hi,

What is the original size of the product images that you are using? Try to set the Thumbnail width value to 705 to display the “masonry” thumbnail, which has a maximum dimension of 705x705px.

You can find the list of available thumbnails or image sizes in the functions.php file around line 211.

$avia_config['imgSize']['widget'] 			 	= array('width'=>36,  'height'=>36);						// small preview pics eg sidebar news
$avia_config['imgSize']['square'] 		 	    = array('width'=>180, 'height'=>180);		                 // small image for blogs
$avia_config['imgSize']['featured'] 		 	= array('width'=>1500, 'height'=>430 );						// images for fullsize pages and fullsize slider
$avia_config['imgSize']['featured_large'] 		= array('width'=>1500, 'height'=>630 );						// images for fullsize pages and fullsize slider
$avia_config['imgSize']['extra_large'] 		 	= array('width'=>1500, 'height'=>1500 , 'crop' => false);	// images for fullscrren slider
$avia_config['imgSize']['portfolio'] 		 	= array('width'=>495, 'height'=>400 );						// images for portfolio entries (2,3 column)
$avia_config['imgSize']['portfolio_small'] 		= array('width'=>260, 'height'=>185 );						// images for portfolio 4 columns
$avia_config['imgSize']['gallery'] 		 		= array('width'=>845, 'height'=>684 );						// images for portfolio entries (2,3 column)
$avia_config['imgSize']['magazine'] 		 	= array('width'=>710, 'height'=>375 );						// images for magazines
$avia_config['imgSize']['masonry'] 		 		= array('width'=>705, 'height'=>705 , 'crop' => false);		// images for fullscreen masonry
$avia_config['imgSize']['entry_with_sidebar'] 	= array('width'=>845, 'height'=>321);		            	// big images for blog and page entries
$avia_config['imgSize']['entry_without_sidebar']= array('width'=>1210, 'height'=>423 );						// images for fullsize pages and fullsize slider

As you can see, the $avia_config[‘imgSize’][‘masonry’] or the masonry thumbnail is set to have a maximum width of 705px and height of 705px.

Best regards,
Ismael

Hi,

The size of the product image in your screenshot above is actually 512x512px. Maybe it is the closest size to the specified width value and the only available thumbnail. As we mentioned above, it will not exactly display images with the exact width value.

Please note that the catalogue images will not exactly display in the specified size. It will only display a thumbnail or image size that is closest to the specified width value.

Best regards,
Ismael

Hi,

It might be limited by its container or column, which has a width that is half or 50% of the content container. The rendered size is indeed 410x410px but the intrinsic or actual image size that is loaded is 512x512px.

Best regards,
Ismael