WordPress.org

Support

Support » Plugins and Hacks » WooCommerce » Featured and Related products image are huge

Featured and Related products image are huge

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author James Koster

    @jameskoster

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

    I read that, and I’m doing exactly that.
    On the Settings/Catalog page when I set the single product image to 300×300 and use select a featured image which is 300×300, the image on the page is not 300×300 but more like 400×400 and is blurry.
    When i use a 400×400 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.

    Roy Ho

    @splashingpixelscom

    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

    Hi,

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

    Roy Ho

    @splashingpixelscom

    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.

    is this an issue with woocommerce or my theme?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Featured and Related products image are huge’ is closed to new replies.
Skip to toolbar