Fix Blurry Product Images in WordPress | How to Change Product Image Size in WooCommerce
Fix Blurry Product Images in WordPress | How to Change Product Image Size in WooCommerce
How to fix blurry product images in woocommerce and wordpress? How to change product image size in woocommerce. During custom wordpress theme development, sometimes woocommerce images appear blurry because for product images we need a little bit of configuration related to images. In some cases its simply the wrong settings for product image sizes. Are your WooCommerce images blurry or are you wondering why woocommerce image is 150px in size? How to fix blurry product images in WooCommerce? or how to manage WooCommerce product image sizes? How to change product image size for WooCommerce? How to customize loop product image via a hook in Woocommerce, and changing Woocommerce product image thumbnail size. So is your wordpress thumbnail blurry? Learn how to fix blurry images in woocommerce.
First of all make sure you are uploading product images that are atleast 400px in width and height. Make sure image sizes are large enough to look better on product pages. If image dimensions are good. Then try this.
Go to ‘customize’, under appearance. go to ‘woocommerce’ and then ‘product images’. Try different image size options that are available here to see if images are fixed. You can specify image width. You can use cropped images. And you can use uncropped settings. Using uncropped settings is tempting because it gives you full image that should be large enough to look good on product pages. But uncropped option throws image as is and sometimes images are not in same width and height. So using uncropped shop may display some images bigger and some smaller. These options may fix the issue but not in all cases.
Another thing that you should consider is to adjust number of images to display in a row. Less images in a row will display bigger images. More images in a row will display smaller images. Small size images will not be blurry.
Then we have image size settings. Under ‘settings’ go to ‘media’. Make sure you have set appropriate sizes for thumbnail, medium and large sizes. Because if here these images sizes are appropriate, then you will be able to change image sizes in theme. These sizes are used by wordpress when you upload an image. Image is cropped into these sizes to use later according to requirement. If these sizes are not appropriate and you are changing sizes now, then you need to regenerate thumbnails for already upload images. Use ‘Regenerate Thumbnails’ plugin or ‘Regenerate Thumbnails Advanced’ plugin.
If this also does not fix your issue, then here is something very important.
Inspect images in product pages. For me, images that are being displayed are 150px in width. These are thumbnails. If I use bigger container for images, they appear blurry because they have 150px width and height. Even though I have selected 400 by 400 size from product images width settings in customizer. Basically woocommerce is throwing small images on shop pages. Image size is restricted to 150x in width and height. Scaling up image by using less images in a row will make images blurry. 150px image will be pixilated. I want to force woocommerce to use images of large size. To do that use code that I have linked below.
Use theme file editor. Go to functions.php file and edit it. At the bottom use that code. Try medium, large or full for the image size in code. It will force woocommerce to use large image size.
This solved my problem. Everything else just failed for me. Forcing woocommerce to give me large size images fixed this issue for me. So what you have to do is to get large image size for product images to fix blurry images issue in wordpress.
Further more, have a look at article from woocommerce with title: ‘Image Sizes for Theme Developers’.
I have come across advanced problems related to this. If you want to know more about this or related topics, subscribe to the channel and hit bell icon. Also hit like button because it will help the channel a lot.
Queries Solved: Why are my WooCommerce product images blurry? How do I improve image quality in WooCommerce? Why are my product photos blurry? How do I optimize WooCommerce product images? Make all woocommerce product images the same size
Thank You! 👍 LIKE VIDEO 👊 SUBSCRIBE 🔔 PRESS BELL ICON ✍️ COMMENT
