Product grid image sizes

  • Hello

    I am struggling to figure out how and what to change so that I can correctly upload/resize my images for the product grid.

    I upload all my images in a 1:1 ratio (600×600; 1200×1200 etc) but how do I change them for the product grid as I get errors on web performance reports saying css is scaling my images to 200×200. I cant find any settings relating to this 200×200.

    How can I fix this so that I can still upload my images in any size but generate a thumbnail of 200×200 for the product grid?

    I can see a size-woocommerce_thumbnail but it looks like its overridden by .item-product .item-thumb img but I’m not sure.

    All my product grid images are automatically resized to 630×630 and then scaled to 200×200. How do I make it so that I go direct to 200×200?

    • This topic was modified 5 years, 7 months ago by warrenvos.

    The page I need help with: [log in to see the link]

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

  • Hi there,
    You can follow this guide https://www.cssigniter.com/modify-image-sizes-using-simple-image-sizes/ on changing image sizes. Then install the Regenerate thumbnails plugin, activate it and go to Tools and then Regen. Thumbnails to run a regeneration in order for the change to be applied.
    But I suggest not applying so small image size in your products! They will look pixelated and blurry.

    Let me know if this worked for you.

    Thread Starter warrenvos

    (@warrenvos)

    Hi Fotis I have installed both Simple image sizes and regenerate thumbnails but the theme still overides the 630×630 to 200×200

    Thread Starter warrenvos

    (@warrenvos)

    No matter what I specify if you view image info on my site each image shows: 630px × 630px (scaled to 200px × 200px)

    I need to be able to serve 200 x 200 without the CSS scaling

    • This reply was modified 5 years, 7 months ago by warrenvos.
    Thread Starter warrenvos

    (@warrenvos)

    Even if I upload a 200 x 200 image I still get errors saying I need to serve scaled images as they first get scaled to 630 x 630 by woocommerce and then the theme scales them back to 200 x 200. Please help me urgently. There is nowhere with this theme or plugin to specify and generate 200 x 200 thumbnails

    Hi there,
    Lets try to change directly Woocommerce images. Open
    inc/woocommerce.php and change

    		'thumbnail_image_width'         => 630,
		'single_image_width'            => 690,
		'gallery_thumbnail_image_width' => 160,

    630,etc with the values of your preference. Then regenerate your thumbnails.

    Please have a look here https://docs.woocommerce.com/document/image-sizes-theme-developers/#section-4 for more information.

    Let me know if this worked for you.

    Thread Starter warrenvos

    (@warrenvos)

    This is why you’re the best Fotis. I have changed the ‘thumbnail_image_width’ => 630, to ‘thumbnail_image_width’ => 200, to match the theme settings and all my images are loaded immediately at the correct scale instead of first being a 630 x 630 thumbnail and then scaling back down to 200 x 200.

    Would rate 5 stars again if I could. Thank you so much

    Glad I could help! ??

    Feel free to contact me anytime.

    • This reply was modified 5 years, 7 months ago by Fotis.
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Product grid image sizes’ is closed to new replies.