[Resolved] How to make woocommerce product images smaller?

Home Forums Support [Resolved] How to make woocommerce product images smaller?

Home Forums Support How to make woocommerce product images smaller?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1092987
    Thomas

    The option to make images smaller on Woocommerce doesn’t work on our website.

    Customize > Woocommerce > product images.

    The images are still really big even after regenerating the thumbnails.

    #1093467
    Leo
    Staff
    Customer Support

    Hi there,

    That customizer panel is actually coming from WooCommerce plugin itself.

    I see the image is currently set at 380 by 380.

    Is that what your setting is? Have you tried clearing your caching plugin?

    #1094222
    Thomas

    Yes, I have refreshed the cache.

    Where do you see 380 by 380? The image is 931 by 622 on my screen, at least the div is. Actually, I think the problem is that woocommerce div. The image is enlarged to fit the div size which is 931 by 622. Therefore, all my images are blurred. Can you see that?

    In Customize > Woocommerce > Product Images:
    – Main image width is set to 660 pixels
    – Thumbnail width is set to 300 pixels.

    I have taken 3 screenshots so you can see what I see on my screen.

    https://send.firefox.com/download/b695ccbabe2eaca9/#3151ykI9ye_-dXgfOBN0pA

    #1094287
    David
    Staff
    Customer Support

    Hi there,

    the Image Gallery is set to take up 50% of the Container width you set in the customizer. Which is 2000px. With the column padding / gutters removed this is why the images are being displayed at around 930px.

    You can either:

    1. Reduce the Container width.
    2. Reduce the Product Image Area Width in Customizer > Layout > Woocommerce –> Single Product

    #1881385
    Simon

    Hi David,
    Can we change the 50% width for pixel ? My image width is 600px but with a 50% width the image resize to 570px, GooglePageSpeed Flag the problem “Properly size images”. So i would like to change the % for fixed width.

    What will be the magic code 🙂

    Thank you

    #1881517
    Elvin
    Staff
    Customer Support

    Hi Simon,

    Try this CSS selector.

    .woocommerce div.product div.images, .woocommerce-page div.product div.images{
    width: [your px width here];
    }

    But the “Properly size images” will likely pop again. For this issue you may have to register more image sizes so WordPress can have more image to choose from on its srcset.

    A wise man once said:
    "Have you cleared your cache?"

    #1881545
    Simon

    Hi Elvin, this code is for the image or the div ?

    #1881653
    Elvin
    Staff
    Customer Support

    It’s for the div that holds the img tag.

    If you want the <img> tag itself, you can use this selector:

    .woocommerce div.product div.images img, .woocommerce-page div.product div.images img

    A wise man once said:
    "Have you cleared your cache?"

    #1881673
    Simon

    It works, but it is not device-friendly.

    .woocommerce div.product div.images, .woocommerce-page div.product div.images{
    width: [your px width here];
    }
    #1881836
    David
    Staff
    Customer Support

    Hi Simon,

    can you raise a new topic and share a link to your site so we can take a look at the issue you’re having.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.