WooCommerce Image Issues – Stretching, Distortion, and Blur

One of the most common issues we seem to come across with WooCommerce is images, and how certain a WooCommerce image could seem blurry or distorted. Almost always, this is due to some confusion on how WooCommerce (and WordPress in general) handles images – so, here’s a quick post to help clarify!

The Mission

Let’s say I’m selling a copy of The Empire Strikes Back, because I want to make sure people see good movies. For my product image, I have the following:

Pretty fly for a Jedi.

In WooCommerce, here are my image settings, found in WooCommerce > Settings > Products > Product Image Sizes (note that these are the default settings as of 2.1.11).

WooCommerce Image Settings

Lots of options, and not much instruction! Let’s see how the image will fit into the 150px * 150px square.

WooCommerce Image Soft Crop

Instead of thinking in the 150px * 150px final image, we have to think of the settings as creating a “Bounding Box” – the area that the image will have to sit in. So, since we don’t have a perfectly square image, WordPress will resize it to 150px at the longest side, resulting in something like this:

WooCommerce Image Soft Crop

So instead of distorting it to 150px * 150px, the actual catalog page result will be 150px * 64px, and will fit nicely in our bounding box.

WooCommerce Image Hard Crop

If we have the Hard Image Crop setting chosen, then the image displays a little differently but will have to keep that same bounding box as before:

WooCommerce Image Hard Crop

There, we have a 150px * 150px image, but it’s only the top corner. The image will keep its size, but crop the dimensions.

Practical Use & Troubleshooting

For most situations, you’ll want to reduce your image size so the dimensions are kept in tact. Remember that the settings in WooCommerce refer to the maximum image size.

Unfortunately, this method assumes that the styling for the images is left alone. Very often we hear that users have blurry images – what is happening is that the 150px * 64px has a CSS class that forces it to stretch across the available space. There are two ways around this:

  1. In your WooCommerce settings, increase the “bounding box” dimensions.
  2. In your theme’s CSS file, stop the image stretching with a declaration like:

ul.products li.product a img { max-width:150px; height: auto; }

CSS can be added easily using a plugin like Simple Custom CSS.

I hope this helps clarify how images work in WooCommerce, and of course let me know if you have any questions! 🙂

Video


Have any questions or comments about this article, or ways you think it can be improved?
Join the conversation in the comments below, or sign up for my newsletter to recieve periodic updates!

Tags: , , , ,

3 Responses to “WooCommerce Image Issues – Stretching, Distortion, and Blur”

  1. Paul June 22, 2014 at 07:34 EST (7:34 AM) #

    Unless I’ve missed something that did not work.
    I did the css mod with woodojo without success. My thumbnails are all blurred …….

  2. Danny Santoro June 23, 2014 at 10:56 EST (10:56 AM) #

    Hey Paul!

    When you go to WooCommerce > Settings > Products, you should see a Product Image Sizes area: http://cld.wthms.co/BoQu

    What do those three options say? What you can try to do is double the information there (specifically only the ones that are blurry, so let’s say Single Product Image to 600 x 600). After you regenerate thumbnails, does that help?

    I’ve added a video to the bottom of the post that goes over how I fixed it, let me know if that helps 🙂

  3. Paul June 27, 2014 at 09:05 EST (9:05 AM) #

    600 X 600 did the trick. Thank you for your help.

Leave a Reply

%d bloggers like this: