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.
Code
github.com/web...
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
⚡Channel: / @webstylepress
⚡Website: www.webstylepr...
⚡FaceBook: / webstylepress
⚡Twitter: / webstylepress
⚡GitHub: github.com/web...
#woocommerce #WebStylePress #WordPress #WordPressTutorial #WordPressTraining #WordPressForBeginners #WebDevelopment #WordpressDeveloper

[@christianlambright7995]

Thank you! Nothing had worked until adding that block of code to functions.php! Hallelujah!

[@Graphdevigner]

Thank you, a great help and well made tutorial. 🤓

[@teachietings]

Thank you! The first thing you suggested, worked.

[@peternielstrup1914]

thanks. Just scaling the image to more pixels worked.

[@DarweshMuhammad-v2l]

Thank you, a great help and well made tutorial.

[@saeros9779]

thank you really this helped! its working for me!

[@marylou5267]

Thank you so much for this tutorial !!!

[@MohamedMuzammil]

Thank you - this helped fix my problem

[@khatulistiwaequator7135]

Thank you very much. I have solved my woocommerce blurry images with your help

[@webstylepress]

Excellent!

[@Zero1jp]

Thank you so much Bro!!! the best!!!

[@estebanlopez5372]

Love you! Thank you so much!

[@Thomas-tn4ob]

Brother you are amazing

[@tarsisfernandes8771]

Thank you so much! It worked!

[@aisearch6747]

Thanks! Please keep it up.

[@rajmodernmagic]

Thank You Sooo Much... solve my problem

[@deltablog7369]

It worked, Thanks for the video

[@bazaarooh]

Worked bro thanks ❤

[@SportsTalpakan]

Thank You brother!!

[@as7safa306]

this fixed my blurry catalog images but my gallery images once you click on the product is still blurry hope you can help, Thanks

[@Latest_Job_Mela]

thank you bro its very useful

[@NatthaphongKUN]

ohh thank you so much !!!

[@thecookingshorts]

respect brother

[@getabubutage7643]

thank you very much

[@ramzishbeir5095]

thank you

[@oshivski2124]

The code used to work perfectly in the past, but now it generates two thumbnail images, one on the top blurry and one underneath sharp. Any suggestions? Thanks!

[@TafeilStore]

me too

[@vedranjovanov1822]

same problem here @@TafeilStore

[@computaristgamer]

thanks a lot php code helps me out

[@kashfulbangladesh]

thank you so much ☺️

[@romeshsingh319]

Thanks

[@letsmakeit8748]

Thankyou❤

[@Harshveersingh14]

thanks

[@liyaocreative]

My settings doesn't have Theme File Editor.... what do i do

[@webstylepress]

Missing File Editor: ruclips.net/video/PcMBPYAMHnw/видео.html

[@as7safa306]

What if none of them worked for me ?

[@RaviJhag]

hey need your help
this video helps me partially

[@webstylepress]

yes

[@borjessonhugo]

I love you

[@wsaintphilippe]

can you write the css code please

[@xknmusic74]

remove_action( 'woocommerce_before_shop_loop_item_title','woocommerce_template_loop_product_thumbnail',10);
add_action ( 'woocommerce_before_shop_loop_item_title','custom_template_loop_product_thumbnail',10);
function custom_template_loop_product_thumbnail(){
global $product;
$size = 'woocommerce_thumbnail';
$image_size = apply_filters('single_product_archive_thumbnail_size',$size);
echo $product ? $product->get_image('medium') : '';
}

[@mamicicekel]

W

[@webstylepress]

X Y Z

[@MotivoPrime]

Thank you so much it helped me and fixed my problem

[@Lashhubbi]

Thank you❤