Grow your CSS skills. Land your dream job.

WooCommerce

  • # May 12, 2012 at 6:24 pm

    I don’t know CSS yet, but am familiar with WordPress and HTML. Is there any way to fix this blurry image issue without knowing CSS? I’ve uploaded the WordPress plugin for regenerating thumbnails and have spent hours trying to resize images in the WooCommerce Settings section under Catalog. And nothing changes. My e-commerce store looks like garbage because the first image everyone sees is blurry no matter what I do. I’ve spent hours trying to fix this and I need help. Can anyone please help? The website is http://1worldcreations.com.

    Is there any way to resolve this issue? I have spent hours resizing images, looking through CSS coding that I don’t understand where to make the changes and just am at my wit’s end. I know WooCommerce works but have no idea why the first image is always blurry no matter what I do.

    If anyone can give me simple instructions, please let me know. 4795209@gmail.com

    # June 12, 2012 at 4:16 pm

    Hey guys,
    I’m doing this theme using WooCommerce plugin and it work great. I run into a problem though.
    Following this guide : http://wcdocs.woothemes.com/codex/template-structure/
    I’ve changed some of the file in the template directory to fit my layout. I’ve created a “woocommerce” folder in the root of my theme, and moved my modified files there.
    Work perfectly on my local host .. but when I upload on the wp installation on my server, it’s a different story. My custom files doesn’t get called and worst .. when I click “Add to cart” on a product .. it send it twice .. and when I visit the cart page, it add random product as well ..
    Does someone know what’s going on here?

    # June 29, 2012 at 3:23 pm

    Hey guys,
    Does anyone know a simple way to change the color of the text on the checkout area to a different color than black?
    Thanks!

    # August 28, 2012 at 9:43 am

    Hi All,

    Need to add a different banner image to each Product Category…does anyone know how to do this please? I’m not a coding expert :/

    Thanks in advance

    # October 2, 2012 at 11:19 pm

    Hi guys! I need help regarding this plugin.
    Does anyone know how can I loop the product images as a list?
    Apparently, woocommerce has 2 php files. One is for the featured product, and one is for the product thumbnails (product-image.php & product-thumbnails.php) I’d like to put them on a single php file and loop the product images and make them appear as a <li>. Thanks in advance!

    # October 23, 2012 at 7:25 am

    Thanks for the above code! My site crashed! Awesome. Now I have work to do.

    # November 30, 2012 at 6:53 am

    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:

    plugins/woocommerce/assets/css/woocommerce.css

    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.

    # November 30, 2012 at 9:53 am

    @liongabriel – You will want to put the code that you changed in WooCommerce stylesheet inside your themes stylesheet so that when you update WooCommerce, you won’t loose your changes.

    # December 13, 2012 at 12:27 pm

    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.

    TIPS THAT WORKED FOR ME:
    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!

    # January 2, 2013 at 3:15 am

    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

    # January 3, 2013 at 4:22 am

    @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 :)

    # January 9, 2013 at 10:43 pm

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

    # February 1, 2013 at 10:57 am

    @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.

    # February 6, 2013 at 8:25 am

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

    # February 7, 2013 at 4:04 pm

    I followed the instructions here to fix my issue: http://wcdocs.woothemes.com/tutorials/using-the-appropriate-product-image-dimensions/

Viewing 15 posts - 16 through 30 (of 39 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".