This morning, I got this request to fix an odd issue on WooCommerce’s product image:
- Some of the product’s images are crisp while some others are sharp
- The image has been regenerated but the problem remains
So I start web-inspector-ing1 the page and found some stuffs:
- The site serves 150 x 200 pixels image (the width and height markup tag imply it) while the image’s intended dimension is 337 x 449 pixels.
- The site uses UX Theme’s Flatsome Theme.
- The demo site of flatsome has four columns product layout while the broken site has three columns product layout.
After looking around, I ended up realizing that flatsome has lots of things to be tweaked. Some of them are products per row and products per page:
So this is a classic option issue, I think:
More options == more possibilities == more edge cases that (most of the time) aren’t handled by default.
To fix this, here’s what I did:
- WooCommerce defines three image sizes by default: catalog images, single product images, and product images. These three image sizes can be modified through filter hooks or you can simply change it from the dashboard on
http://yoursite.com/wp-admin/admin.php?page=wc-settings&tab=products. Product archive page, unless modified, serves catalog images size. So the issue must be the size defined for catalog image is 150 x 200 pixels, while the image dimension served by modified layout theme is 337 x 449 pixels.
- Open the WooCommerce settings page on
- Change the dimension of catalog images size to 337 x 449 pixels.
- Regenerate the thumbnail using AJAX Thumbnail Rebuild.
Then voila, it is fixed now 🙂
Just made this one up LOL ↩