Featured and Related products image are huge (7 posts)

  1. mankie
    Posted 3 years ago #

    Hi all,

    I've created a featured image for a product that is 400x400px, however, the featured and related product image is huge and pixilated. Is there any way to control this?



  2. James Koster
    Plugin Author

    Posted 3 years ago #

    Please have a read of this document for better understanding of product imagery http://docs.woothemes.com/document/using-the-appropriate-product-image-dimensions/

  3. mankie
    Posted 3 years ago #

    I read that, and I'm doing exactly that.
    On the Settings/Catalog page when I set the single product image to 300x300 and use select a featured image which is 300x300, the image on the page is not 300x300 but more like 400x400 and is blurry.
    When i use a 400x400 image is still is blurry on the web site.
    If you check this url you will see what i mean; http://www.0dayunlock.com/shop/att-iphone/

    Also if you go to the bottom of the page and see the related item, you will also see a huge image that is blurry, but when you click on the item and then click on the featured image you will see that it's not blurry.

  4. Roy Ho
    Posted 3 years ago #

    This is because the CSS width of the container is set to 48% and your image is set to 100% width. That means it is ignoring your 300x300px and stretching it 100% to fill the width.

    So to resolve this, either you can reduce the width of the container or change width:100% to max-width:100% which will make your image be as wide as the width set which in your case would be 300.

    Look for the following CSS in woocommerce.css or you can override it in your theme.

    .woocommerce div.product div.images img, .woocommerce #content div.product div.images img, .woocommerce-page div.product div.images img, .woocommerce-page #content div.product div.images img
  5. mankie
    Posted 3 years ago #


    Are you referring to {display:block;width:100%;height:auto; that is right after the line you copied from the css?
    and change it to {display:block;max-width:100%;height:auto;

  6. Roy Ho
    Posted 3 years ago #

    I cannot tell you the exact line as that is what is rendered on your page and is different from what you see in your files. But if you find the CSS I showed, you should see it has width:100% for the image. Change that to max-width:100% instead.

  7. mankie
    Posted 3 years ago #

    is this an issue with woocommerce or my theme?

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.