WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[resolved] [closed] Related Product image is too big (15 posts)

  1. boldt
    Member
    Posted 1 year 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?

    http://wordpress.org/extend/plugins/woocommerce/

  2. royho
    Member
    Posted 1 year 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
    Member
    Posted 1 year 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
    Member
    Posted 1 year ago #

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

  5. boldt
    Member
    Posted 1 year 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
    Member
    Posted 1 year ago #

    thanx a lot!

  7. chefqb
    Member
    Posted 1 year 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
    Filipe

  8. chefqb
    Member
    Posted 1 year 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
    }

    source:http://chromeorange.co.uk/woocommerce-set-number-of-thumbnail-columns/

    I hope it helps

    Best Regards
    Filipe

  9. batman36
    Member
    Posted 1 year 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
    Member
    Posted 1 year 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
    Member
    Posted 1 year 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
    Member
    Posted 1 year 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
    Member
    Posted 1 year ago #

    Hi,

    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/

    BUT...

    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.

    Thks

  14. Waup
    Member
    Posted 1 year ago #

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

  15. thewpguy
    Member
    Posted 1 year 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

About this Topic