Grow your CSS skills. Land your dream job.

Woocommerce Product Images

  • # April 23, 2013 at 10:31 am

    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

    # April 23, 2013 at 10:34 am

    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.

    # April 23, 2013 at 11:03 am

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

    # April 23, 2013 at 11:24 am

    Just set the width in css. If you set both width and height, then it will get messed up.

    # April 23, 2013 at 11:27 am

    Also always upload the image which is just as wide or wider than what you want to display. Otherwise it gets stretched out.

    # April 23, 2013 at 11:36 am

    @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.

    # April 23, 2013 at 11:53 am

    here is the css file

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

    # April 23, 2013 at 12:48 pm

    @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.

    # April 23, 2013 at 1:07 pm

    Can somebody help me using teamviewer?

    # April 23, 2013 at 1:13 pm

    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; }

    # April 23, 2013 at 1:15 pm

    .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**

    # April 23, 2013 at 11:34 pm

    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.

    # April 24, 2013 at 4:12 am

    So which php file needs correction

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".