Photo Re-Sizing for Your Ecommerce Shop
After HOURS of pouring through documentation from WordPress, WooCommerce, forums, YouTube and Google buds, I finally understood how to fix blurry images in WooCommerce on a client site. I figured it was resolution, but adding hi-res images didn’t fix anything. Once I understood what the WooCommerce plugin was trying to do, I decided to make a really fast instructional graphic for any other confounded souls working through the same issue. [Turns out there are quite a few!]
Thanks to WooCommerce for putting a text and video fix out there, but it didn’t go far enough to explain their image naming convention, why it doesn’t match up in Settings > Catalog and why the settings are not in an intuitive (ascending or descending) order. Maybe next update. Also, more people use Chrome than the Firefox fix they showed, so I took screen shots of mine in Chrome. So.. that said, I still love WooCommerce.
Maybe someday I’ll make this graphic look better. It’s UUUUGGGLY! I just did it to help me understand and remember the process.
Step-by-Step to Correcting Blurred Images
If your theme is WooCommerce-ready, it may help to uncheck the box on WooCommerce > Settings > General tab. Checking it allows for WooCommerce CSS to take over if your theme is NOT WooCommerce ready. Unchecking it lets your WooCommerce-ready theme take over; that’s what we want. [This seems to have been fixed with WooCommerce 2.2]
Overview: Determine at exactly which size your particular theme is trying to render the types of images. Write these dimensions down. Then, take those numbers for each of three image settings and make sure you set those dimensions EQUAL TO OR LARGER than what your theme wants.
How: Use Chrome right click > Inspect Images or Firefox right click > View Image Info onto each of the three sizes in WooCommerce. Then we compare what we see.
Thanks also, to Pirate Mighty (and Nic Bommarito) whose YouTube video helped a lot of people. I just have to know WHY I’m doing things in my webwork.
Also, Woo suggested the plugin “Regenerate Thumbnails” and I suggest the plugin “Force Regenerate Thumbnails” because it is current with WordPress 3.8.1 and the other is 2 years old. :-/
Hope this helps, peeps!
Chief Enthusiasm Officer,