0

I am doing an E-commerce website using Woocommerce plugin. Most of the things working fine with little bit changes. But I am facing a problem regarding images. I have uploaded the image for featured image which will be shown in product gallery which is showing good but when I am going to the product description just by clicking on the product image it is showing image with blurry. To know the reason I google and I got some solution in this page. But I don't understand the solution. How to work with it. Here with I am attaching my scrren shot for product category, Product description image screen shot and the settings for the images in plugin settings.Any help and suggestions are highly welcome for this question.

Product category image

enter image description here

Product description image

enter image description here

Image settings from the woocommerce plugin

enter image description here

Improve this question

5 Answers 5

Reset to default
1

Your product image as shown in the screenshot has different dimensions. You should set the Single Product Image sizes to 225px and then regenerate the thumbnails using this plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/

Improve this answer
2
  • thanks for the reply but I had done that process but still I am not getting that.
    – user159377
    Commented Oct 20, 2012 at 8:10
  • So you have changed the Single Product image settings to 225px? In your settings screenshot it's "200px" width and height, while your product screenshot is 225px. That's the difference that makes your image blurry.
    – Pieter
    Commented Oct 20, 2012 at 8:22
1

This is a well documented issue with WooCommerce and there are several tuts on how to resolve it. I've listed the two that I found most helpful to me.

WooCommerce Documentation

The Design Guys

You can also override the 100% width declaration in the WooCommerce css file by adding the following to your theme's stylesheet:

div.product div.images img, #content div.product div.images img {
    width: auto ! important;
}
Improve this answer
1
  • Added simple css override of width: 100%;
    – Steve
    Commented Nov 20, 2012 at 18:10
1

The reason woocommerce images are blurry is because the woocommerce css is designed for responsive themes, however the thumbnail settings in the catalog settings are specific pixel sizes.

Woocommerce cover it in their docs but their explanation and method of fixing isn't exactly correct. See http://wcdocs.woothemes.com/tutorials/using-the-appropriate-product-image-dimensions/

I'll use an example to show what happens for product images (shown on the single product page):

Original image is 500 x 500 (say) Woocommerce catalog single product image is set to 300 x 300 so a 300 x 300 thumbnail of the original image is generated. The product page image div class="images" css is set to width: 48%; On my screen this 48% equates to an image size of 470 x 470 So the 300 x 300 thumbnail is stretched to 470 x 470 making it blurry.

As the thumbnail is a fixed size this also breaks the responsiveness in a responsive theme.

You can either change the css to fit the thumbnail size or change the single product image size to fit the original image size (or at least bigger than you think the 48% width will stretch the thumbnail to). edit: actually you could do both things.

Presumably a similar problem with the other thumbnail settings on the catalog settings page.

To me, this is a problem in woocommerce not a problem in other people's themes.

Improve this answer
0

the image width in your screenshot (the blurry one) is defined in woocommerce.css as width: 100% which might result in stretching. You can overwrite this in your style.css by defining: div.product div.images img, #content div.product div.images img { width: 200px !important; }

Improve this answer
2
  • thanks for the reply but I had already defined the width but the image is again blurry as it before.
    – user159377
    Commented Oct 20, 2012 at 16:04
  • did you define the width in your css and added !important to the style declaration? The width in the backend has no impact on the css.
    – mirage
    Commented Oct 20, 2012 at 16:56
0

I have found a round about way that works for me, even though It's a little extra work.

Post your new product as you would, then when you are done view it on your wordpress blog. Right click on the main photo and click on inspect element. Hover over the highlighted text and find out the width and height (the first numbers, not the ones in parenthesis) and the upload path (for example: www.yourwebsite.com/blog/wp-content-uploads/yourfilenames).

Go into your photo editing software and re-size your photo to match the dimensions then re-upload your files to the same path and overwrite it. I use the plug-in add-from-server to manually upload my files, so I just went into the folder from my ftp client. I do this for every blurry photo on my WooCommerce blog.

After many attempts, I found this is easiest for me even though it's extra work. The pictures are nice and clear :)

Improve this answer
1
  • While this technically works it takes an otherwise automated process and changes it to a very manual and intensive one. Other solutions/answers offered are one time fixes.
    – Steve
    Commented Feb 5, 2013 at 19:54

Not the answer you're looking for? Browse other questions tagged or ask your own question.