[resolved] [closed] Related Product image is too big (15 posts)

  1. boldt
    Posted 4 years ago #

    I am setting up a webshop using TwentyTen theme and WooCommerce.
    My product images are defined as
    Catalogue Images: 150*150px,
    Single Product Image: 300*300px, and
    Product Thumbnails: 90*90px.

    But when I look below on the Related Products the product images are blurry.
    It seems like the programme is using the Catalogue Images and scale it up to 300*300px.

    Se an example here(under Development and in Danish): http://shop.325.dk/?product=hat

    what to do?


  2. royho
    Plugin Author

    Posted 4 years ago #

    Check your CSS...It is blurry because of this ->
    .related ul.products li.product, .related ul li.product, .upsells.products ul.products li.product, .upsells.products ul li.product

    It is setting it to 48% width which in turns stretches out your 150x150 image...

  3. boldt
    Posted 4 years ago #

    thank you
    I found the woocommerce.css file in the folder: woocommerce/assets/css
    and I found the place to correct.

    My Notepad++ write the css file as one long string and around column 11430 is the %-figure to correct)

    for my system I change the figure to 24% and it worked.

  4. SightWorkz
    Posted 4 years ago #

    Thanks guys. Saved me a headache with this one. Worked like a charm.

  5. boldt
    Posted 4 years ago #

    Well, the next problem is to make this change permanent, so I do not have to do it every time there is an update.

  6. muriaticum
    Posted 3 years ago #

    thanx a lot!

  7. chefqb
    Posted 3 years ago #

    Hi all,

    I would like to have my thumbnails a bit smaller to have more thumbnails in the same row (by default are 3 and I want to have 10 thumbnails in the same row), I've already changed my woocommerce CSS to decrease the width to 10% but it still change line after the third images …. where can I remove change it to have 10 thumbnails per line?

    Thank you in advance

  8. chefqb
    Posted 3 years ago #

    This solution worked for me:

    add this code in your /public/www/wp-content/themes/<theme>/functions.php

    add_filter ( 'woocommerce_product_thumbnails_columns', 'zz_thumb_cols' );
    function zz_thumb_cols() {
    return 8; //Change the 8 to reflect how many columns you need


    I hope it helps

    Best Regards

  9. batman36
    Posted 3 years ago #

    OUr product images are getting cropped wrong.... I did a thumbnail refresh but they still get cropped 130x300. How can I get square thumbnails

  10. Roy Ho
    Posted 3 years ago #

    @batman36 - in order to have WordPress crop an image to exact dimensions, usually you need to set your image option to "hard crop" mode. Then you need to regen the images again to see the changes.

  11. batman36
    Posted 3 years ago #

    We are using WooCommcerce.... and my images are being cropped in half. I did the media, WC media and regen thumbnail 2x, but still the are being hard cropped instead of full image.

  12. Roy Ho
    Posted 3 years ago #

    @batman36, WooCommerce uses WordPress cropping functions...If your image is big enough and say 800x600 full image size and you set your settings to hard crop 500x500, then your image will be cropped to that size. However if your image (fullsize) isn't big enough then WP can only crop it to the max width or height of the fullsize image.

  13. Waup
    Posted 3 years ago #


    Managed to remove 'bluriness' also by doing

    1. measured each image size using pixelwindow
    2. used pixlr to modify each image size
    3. Changed 'Image Options' in WooComm > Settings > Catalogue
    4. uploaded images and regenerated thumbnails...

    That worked well for the catalogue, thumbnail and single product page images...
    i.e. http://mikemetcalfe.co/product/4th-product-test-tool-angel-investment/


    Is there a way to load a bigger image solely for the lightbox?

    Figure I could just load a wider / higher image - but that changes the dimensions of all other images.


  14. Waup
    Posted 3 years ago #

    Self-editing the above... rookie mistake... just loaded a bigger image.

  15. thewpguy
    Posted 3 years ago #

    I added the code below to the end of the theme's style.css code and all was correctly sized and looking great.

    Adding to the theme means you avoid issues when the woocommerce plugin gets updated and you won't lose your changes.

    Of course if you change or update the active theme you will also have to add the css below back in.

    .woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product {
    width: 24% !important;

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic