I’ve not come across WooCommerce changing the default image sizes itself. Do these changes happen if you switch to the default theme? If not, the its possibly a theme issue. Check you have the latest version of your theme. If so, best to ask Divi support as wordpress.org forum members don’t have access to commercial themes.
Thread Starter
robmcp
(@robmcp)
I ‘think’ I worked out what’s happening.
I uploaded a 200px square image, I had product sizes set to 20px sq to see if it made a difference.
What happened was the image I uploaded ended up as 20PX square, BUT it was enlarged to almost 200 or 400 px square. So the final resolution was kak.
I need to find where the image sizes listed above are set (CSS/Function?) What happened was the imported image first resized to 20px, then the display size changed to around 200 or 400 pixels depending on where you were in the site / product.
I’d have thought there would have been somewhere obvious that you could say, I want Image sizes of X and Cat sizes of Y and thumbs of Z
Thread Starter
robmcp
(@robmcp)
I will test with the default theme when I have other issues sorted.
If you change the thumbnail image sizes in WooCommerce settings, you must regenerate your thumbnails:
https://wordpress.org/plugins/regenerate-thumbnails/
For best results:
– the thumbnail image size setting should be close to the size at which your theme shows the image
– the images you upload should be the same size or bigger
I still don’t know what’s changing your settings without consent!
Thread Starter
robmcp
(@robmcp)
Thanks, I did know about regenerating thumbs, (that was the easy part!)
It’s not the thumbnails that is an issue. I had assumed (wrongly perhaps) that the image size options within Woocommerce config settings WOULD make the images that size. They don’t and I can’t see where this is set, so if anyone at all has any ideas, I’d be happy.
The image size settings at Admin page ? WooCommerce > Settings > Display do control the size of the thumbnail images as they are stored. Later, when those thumbnails are uploaded to the user’s browser, the browser will resize them to suit whatever space the theme designer has made available on the page. A different theme may show them at a different size. Sometimes the page layout can be modified a bit with some custom css.
Thread Starter
robmcp
(@robmcp)
Thanks, I just need to find those settings, as I don’t like what they currently are.
It’s unlikely your theme will have image size settings. It may be possible to change the number of products per row to affect image size. Or if you would like a CSS suggestion to adjust padding and margins, please post the link to your site.
Thread Starter
robmcp
(@robmcp)
I am using the DIVI theme (with a child theme)
Somewhere in the site, there is a setting that specifies exactly what size category and product images are, still looking for this.
Will have a closer look at the theme.
Cannot post link, it’s on a dev machine.
quick question, I’m using external images from amazon and they keep coming up on my shopfront in all weird dimensions. any idea on how these can be sorted; would be a great help. I’m using the shop isles theme and woozone plugin to do the import. as external images are stored on amazon servers (I’m not using the cdn from amazon, just the product images are pulled from there) its impossible to regenerate the thumbnails. I’ve tried the settings in the woo commerce settings as described above. also defined the size in the woozone plugin to define the sizes as the same. however no joy.
@junzcouk
Images are sent to the browser in whatever size and then the browser will resize them as determined by the theme’s css. Sometimes its possible to change the theme css with some custom css to change or correct the displayed size. For further advice on custom css, please post the url to a page with funny images.
@lorro thanks for the reply.
the link is http://www.professionalindian.com/shop/
do take a look it looks really disproportionate. any way to fix this?
Yes I see, the image heights are all different. You’ll need to decide a strategy:
– find the maximum height and stretch the shorter images
– find an average height, stretch shorter ones and squash the taller ones
– crop the taller ones
The above can be unsatisfactory. My own view is its best to pick a size and make it your standard, then edit all the images in an image editor before re-uploading. Some can be stretched or not, some cropped or not, some could have white margins added. You really need the human eye on each image to get the best results.
@lorro – the catch here is they are hosted at amazon. as external product & external image through the woozone plugin. i can’t access the images at all. all i can do (i presume) is define the box in which the images should display of a specific size. i have tried all the possibilities for defining the image size in woocommerce>settings>display>image size and also in the woozone plugin>settings>image size.
also as per http://docs.themeisle.com/article/453-shopisle-recommended-image-sizes the recommended sizes; i have updated the same, purged the cache and CDN and tried again. still no joy.
i presume there has to be some custom CSS that i can play around with. firstly might need to make the theme into a child theme(scares me as i have been on wordpress a month & read about how to tinker with it for a week). any guidance would be of great help.
thanks again
Junz.
OK, I now get that you can’t edit the images, however you still need to aim for one of the strategies in my post before last, or just leave the images at odd sizes. Perhaps better not to have them distorted or cropped. What would you prefer?
You’ll need a child theme if you want some custom php code somewhere. A child theme is not needed if you just want to add some custom css. Some themes have a setting where you can enter custom css. If not, there are plugins that can do it.
