This morning, I got this request to fix an odd issue on WooCommerce’s product image:

  1. Some of the product’s images are crisp while some others are sharp
  2. The image has been regenerated but the problem remains

So I start web-inspector-ing1 the page and found some stuffs:

  1. 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.
  2. The site uses UX Theme’s Flatsome Theme.
  3. 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:

Too many options often leads to headache
Too many options often leads to headache

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:

  1. 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.
  2. Open the WooCommerce settings page on http://yoursite.com/wp-admin/admin.php?page=wc-settings&tab=products
  3. Change the dimension of catalog images size to 337 x 449 pixels.
  4. Regenerate the thumbnail using AJAX Thumbnail Rebuild.

Then voila, it is fixed now 🙂


  1. Just made this one up LOL 

10 thoughts on “Fixing WooCommerce + Flatsome Theme Crisp Product Image Issue

  1. Thanks! This article helped me.

    1. My pleasure. I’m really glad to hear that 😀

  2. please help me with the same problem – nothing works (
    http://rbuy.ru/shop-2/кукла-сияющая-принцесса-эльза/
    how to make smart product pic size ?
    thank you in advance

    1. Hi Kate, the solution suggestion above should be working. However, if the problem remains:

      1. Do you add custom styling? your styling might conflicted with the theme’s styling
      2. What plugins do you use?
      3. Can you post a screenshot of your Dashboard > Settings > Media page?

  3. Thank you for so quick answer !
    no, i have not custom styling
    i have changed all of the thumbnail dimensions on the media as 600-600
    and at w. product page too… nothing works.
    please , can you give me an email to send screenshot ?

    media
    – 150 -150
    -600-600
    -600-600
    product

    247-300 + hard crop
    510-600 + hard crop
    114-130 + hard crop

    1. You can email me via http://fikrirasy.id/contact/

      However after re-reading your comment, there is some things that I don’t quite get tho:

      1. What do you mean by “smart product pic size ?”
      2. How do you expect “smart product pic size ?” to be shown?
      3. After seeing your site’s source, you obviously use plugins. These plugins might conflicted with your theme’s styling. Try deactivating all the plugins first.

  4. Hi Fikri,

    Kate posted
    247-300 + hard crop
    510-600 + hard crop
    114-130 + hard crop
    These are actually the settings recommended by flatsome documentation. However, I find that the “single product image” (510 – 600) is too small. I measured the actual size of the image on product page, it’s 640 x 750. So I created an image with that dimension and uploaded it. It still seems a bit compressed.

    Is there a way to make wordpress not compress/reduce the quality of the product images?

  5. Thank you. I happened upon this randomly, helped a bunch.

  6. Hi! Thanks a lot for the fix, I was looking into just resizing the images on the cataloge page as it was cutting the top of the images out!

    Do you know why my shop keeps on going to “Products Archive” page? I’ve been trying for ages to fix it, even using Yoast SEO to fix the problem but I’m getting no where!

    Many thanks!

  7. Rawkstar!

Share Your Thought