Product images being resized

  • Resolved Christina

    (@littlevictorian)


    10 years, 3 months ago

    I’m really struggling with the product images I’m attempting to add. The settings in Woocommerce –> Settings –> Products –> Product Image Size were set for 300px. So I uploaded my image at 300px. But for whatever reason, they were being stretched back out to 420.

    I uploaded a 700px image, and saw by the image URL that it is resizing the photos to 300px. And then still stretching it to 420.

    I’ll override the width:100% that’s causing it to stretch, but is there a way to stop woocommerce from using a thumbnail and just use the photo that I uploaded?

    I’d really like to be able to use an image larger than 300px, but the settings don’t seem to mean anything.

    https://www.ads-software.com/plugins/woocommerce/

Viewing 3 replies - 1 through 3 (of 3 total)

  • WooCommerce will use the Product Image thumbnails, not the images that you have uploaded.

    The 420 is set by your theme. So set the Product Image thumbnail size settings to 420. Uploading the images at 700 is OK. The trick is that if you have changed the values for Product Image sizes in settings after you uploaded the images, then you need to also resize the actual thumbnails. There is a plugin that does this. If you don’t then the settings have no effect as you have reported.

    Thread Starter Christina

    (@littlevictorian)

    Sorry, I meant to attach a link to my dummy page and I forgot to delete the photos and re-upload them. So that did work.

    The 100% width is from Woo. It was stretching it to 420 because that’s 48% of my page width. It just seems like excessive amounts of CSS being applied to everything.

    I did get it to use the actual photo by uploading the exact size. You can see it here. WordPress does such a poor quality job at resizing images, so I’ll just have to decide on a width for my theme and never change it. ??

    I hate overriding with !important in my stylesheets. But it looks like that will have to be done a lot using Woo.

    Thanks again.

    Thread Starter Christina

    (@littlevictorian)

    For anyone else with this issue, to keep the image high quality, you have to upload the exact Product Image size.

    AND, if you have a responsive theme, you have to override this line:

    .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

    And remove the width: 100%. Because, depending on your theme’s responsive CSS, it will likely stretch your image out on smaller screens.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Product images being resized’ is closed to new replies.