The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS WooCommerce

  • This topic is empty.
Viewing 15 posts - 16 through 30 (of 32 total)
  • Author
  • #116033

    I’m using a WP custom theme with woocommerce and I’m having a similar sizing issue, and blurring…

    I did all the things you said, but it didn’t change anything for me… so I went into the woocommerce.css file:


    and changed the width to 50%:

    .related ul.products li.product img,.related ul li.product img,.upsells.products ul.products li.product img,.upsells.products ul li.product img{width:50%;height:auto}

    working good now :) hope this is helpful.


    Hey guys. I found a little trick that worked for me after hours of experimenting with this. Under “**Settings > Catalog**” down toward the bottom of the page under “**Image Options**”. Try increasing the dimensions of image fields. I don’t remember what the default were because I’ve changed them so many times but here are my settings are currently:

    Catalog Images = 300 x 300
    Single Product Image = 450 x 450
    Product Thumbnails = 300 x 300
    * I turned “Hard Crop” OFF.

    I found best results if I increased the sizes rather than making then smaller than the settings you had before the changes.

    … I know that the images might not be that large, but this worked for me. The “Single Product Image” is 450×450 however…or at least for me in my template.

    After you change the dimensions of the images “Save” your new settings. Then regenerate your thumbnails with the “Force Regenerate Thumbnails” WordPress plugin. From there, refresh your live page and you should have clear images.

    1. Each time you change the dimensions of those image fields you MUST regenerate your media gallery images again or you’ll get blurry images again. Even if it’s a 1px change. At least that’s what I found from my experiments.
    2. Also, if you upload / swap / change out your images with new images you’ll have to do these steps again. It’s a pain…I know.

    I don’t know if this info will help any of you or not, but this stuff worked for me and I hope it will for you too. Good luck!


    it dont have any effect when i change image size in settings.. putting that code you given in function file was not helping. please help me how to chang the size of product-image at catalog page


    @samina: I had the same problem before. But then I found out that the code above is right. The code given above should be working. To make the code working, first you have to deactivate your woocommerce plugin and your theme. Activate woocommerce and your theme again, and regenerate your thumbnail. It should be working. The code given above will make changes on activation. So if you try to see the change, you have to reactivate both plugin and theme.

    Hope this will help you :)


    @samina : The size will be changed after you regenerate your thumbnails. You can use Regenerate Thumbnails. :)


    @erwinchrisman + @maddtechwf: I have just done as suggested, and now my images are lovely and crisp – thank you :-) However, I would like to change the product image size (the display of it, not the imge library size) to 150px x 150px. Where can I do it? Thanks.


    Hi! I have tried and tried, done all the things suggested but my images are still blurry:
    Could anyone please help me, it’s really fustrating!
    I ahve installed Regenerate Thumbnails changed the sizes of my photos everything…


    I just installed WooCommerce and it looks good. There’s one major problem however, I want the currency to display in ‘ABC’ and I’ve updated it using the suggested code by WooCommerce and that is

    add_filter( ‘woocommerce_currencies’, ‘add_my_currency’ );

    function add_my_currency( $currencies ) {
    $currencies = __( ‘Currency name’, ‘woocommerce’ );
    return $currencies;

    add_filter(‘woocommerce_currency_symbol’, ‘add_my_currency_symbol’, 10, 2);

    function add_my_currency_symbol( $currency_symbol, $currency ) {
    switch( $currency ) {
    case ‘ABC’: $currency_symbol = ‘$’; break;
    return $currency_symbol;

    The real problem is, I want to show ABC currency on all the display pages. It works fine. BUT when someone checks out from Paypal, it should convert to USD. Someway where I can mention the exchange rate for example 500 ABC currency / 100 = 5 – if the exchange rate can be updated via admin panel or otherwise a fixed value.

    Can someone help me with this update? It will be very useful, thanks.


    @ecommercekid – You can do that with a widget.


    This code fix is the 20th thing I have tried to clear up the fuzzy product images on our site, and it didn’t work either! Since this problem is disscussed everywhere on the web, I don’t understand why WooCommerce doesn’t take resposibility for it.
    Our site shop url is
    Please take a look and tell me if there is something obvious I can fix.



    I regenerated the thumbnails and they are totally sharp! Thanks, you saved my bacon!


    Hmmm…any way to use that code (or anything else) to get around the “images have to be square” rule that Woo seems to love so much?


    This is cool, thanks for the great tip on solving this! I’ve tried lots of times to figure out Woo image fuzziness and this has worked for me, at least on a dev. site. Let’s see if it works when I flip it over to a hosted area!

    One thing, does anyone know how to reduce the physical size of the related products images? They’re huge, I’m using Genesis Framework with Dynamik child theme.



    I changed mine using css classes in my stylesheet.

Viewing 15 posts - 16 through 30 (of 32 total)
  • The forum ‘CSS’ is closed to new topics and replies.