Woocommerce Product Images

[ani7ruddha]

I have installed Mercor Woocommerce theme for an ecommerce site http://guna.kampusorder.com/

But the product image gets blurred. Although I have changed the dimensions in stylesheet file but still it gets blurred it is taking default 470 X 345 px dimensions..

Please help

[chrisburton]

It looks like you’re taking a thumbnail version of the image that is much smaller and increasing the dimensions which is causing it to look blurry.

[ani7ruddha]

No I had uploaded image of size 240 X 320 and I have edited css accordingly

[chrisburton]

@FragaGeddon Shouldn’t you keep the aspect ratio when adjusting the size? Edit: Ah, I see what you mean. The height will automatically be adjusted when only setting a width. I usually always add `height: auto !important;`, though.

@ani7ruddha According to the file-path of the image, it is much smaller than what you’re trying to output.

[ani7ruddha]

here is the css file

https://dl.dropboxusercontent.com/u/46815679/Style.css

[TheDoc]

@ani7ruddha – what @chrisburton is trying to tell you is that the image you are trying to size bigger isn’t the image you should be using at all. You are pulling in a small thumbnail instead of the image that you uploaded. When you uploaded an image to WordPress it creates lots of different sizes for you.

[ani7ruddha]

Can somebody help me using teamviewer?

[ani7ruddha]

This is the .css part I had edited in my stylesheet

.imagesSPAll .panel ,.imagesSPAll .anythingSlider, .imagesSPAll .panel img {height:320px; width:240px;}
.leftContentSP .images.imagesSP{border: 5px solid #eee;background: #fff; min-height:320px; width:240px;}
.leftContentSP .thumbnails img {border: 1px solid #DADADA;margin:5px 4px 0 0px;}
.leftContentSP .thumbnails img:hover {border: 1px solid #bbb; }

[ani7ruddha]

.imagesSPAll .panel ,.imagesSPAll .anythingSlider, .imagesSPAll .panel img {height:320px; width:240px;}
.leftContentSP .images.imagesSP{border: 5px solid #eee;background: #fff; min-height:320px; width:240px;}
.leftContentSP .thumbnails img {border: 1px solid #DADADA;margin:5px 4px 0 0px;}
.leftContentSP .thumbnails img:hover {border: 1px solid #bbb; }

**This was the .css part I had edited**

[chrisburton]

It is not a CSS issue, it is a PHP issue in your WordPress template. I assume you are calling a post_thumbnail for that particular area which is outputting a really small version of the image. From there, you are increasing the size of the image which is causing it to be blurry.

You need to change your PHP to output the original image or set the correct dimensions in the PHP loop.

[ani7ruddha]

So which php file needs correction

[Author]

Posts