Grow your CSS skills. Land your dream job.

WooCommerce

  • # December 26, 2011 at 6:59 pm

    I know this isn’t probably the place but I’ve been looking at a few “e-commerce” solutions for my friends website. He is using WordPress as the backend and I’ve setup a face site on a spare computer in my house to test a few options for him. I have come to like WooCommerce a lot but I’m having a few issues with it.

    His website is a custom built theme that is using the “WooCommerce” plugin. It seems that the website is ignoring the sizes that are set inside the plugin’s settings. Is there something that I need to add to the current theme css to have it recognize the image settings?

    If I had this on a live server, I would post a link to it but it’s just on an internal XP box I had laying around.

    # December 26, 2011 at 7:39 pm

    I just went into the CSS and hard coded the image sizes instead of trying to use the image size settings in the WooCommerce panel.

    # December 31, 2011 at 4:26 am

    You can set the image dimensions in your functions.php file. That way the images will be resized properly, and won’t be blurry or anything.


    global $pagenow;
    if ( is_admin() && isset( $_GET ) && $pagenow == 'themes.php' ) add_action('init', 'woo_install_theme', 1);
    function woo_install_theme() {

    update_option( 'woocommerce_thumbnail_image_width', '300' );
    update_option( 'woocommerce_thumbnail_image_height', '300' );
    update_option( 'woocommerce_single_image_width', '600' );
    update_option( 'woocommerce_single_image_height', '600' );
    update_option( 'woocommerce_catalog_image_width', '450' );
    update_option( 'woocommerce_catalog_image_height', '450' );

    }

    Source: http://www.woothemes.com/woocommerce-codex/theming-woocommerce/#code-snippets

    # March 8, 2012 at 8:50 pm

    Maddtechwf please share your css code to fix the woocommerce image sizes.

    # March 8, 2012 at 9:59 pm

    Douglas,

    I actually removed the CSS I was using and switched to the code in the functions.php that is shown above.

    # March 9, 2012 at 9:00 am

    Do I add that code to the theme functions.php? or the woocommerce-functions.php?

    Rob
    # March 9, 2012 at 9:50 am

    WooCommerce is good – but it does have a few bugs. give it a little while and I think it will be the winner. We had to bug fix it quite heavily on a recent project.

    # March 9, 2012 at 8:32 pm

    I’m curious for those that have used WooCommerce and Shopp if you find one better than the other? We’ve had our fair share of bugs and issues with Shopp on a recent install and I was kinda hoping WooCommerce would be a better alternative next time.

    # March 10, 2012 at 6:51 pm

    @Douglas – Add it to the functions.php inside the Theme folder.

    # March 11, 2012 at 5:57 pm

    @joslex – I’ve been wondering the same thing. Shopp looks neat, but I’ve yet to have the opportunity to try it. What was the size of the store you used it on?

    # March 12, 2012 at 9:12 am

    @Maddtechwf I added the code from above to the functions.php in my themes folder changed all the image sizes to 150 but the product pages css all remain 300 and the related products are still pulling the 150 thumbnails into a 300 css box and making them blurry.

    Are there any other changes I have to make to the code above? did you just copy and paste it and it into the functions.php and it worked?

    # March 12, 2012 at 7:40 pm

    @JoshWhite – It was a pretty small shop…seven products total.

    # March 13, 2012 at 2:07 pm

    @Maddtechwf @Douglas I am having the same issue. Thanks for posting to this site. It’s been the only helpful resource, so far. The biggest issue I’m having is with the related products images at the bottom of a single product page. They are extremely blurry, making my site look unprofessional. Does anyone know of a way to tackle this? I used the code above, regenerated my thumbnails, and the other images seem to look better, but still not great.

    # March 13, 2012 at 3:28 pm

    @AngeloP – As a backup I have taken the placeholder image that comes with WoCommerce and used it as a template for my pictures. I just looked at the placeholders width and height and resized my pictured accordingly using either Photoshop or Gimp. I noticed after changing the code above that some of my images still seemed blurry. That’s how I got around it.

    # April 13, 2012 at 11:58 pm

    Hi folks, i’ve done a bit of code hacking and managed to find a workaround –

    http://www.thedesignguys.co.uk/woocommerce-image-blurring-problem

    Also, check the comments as Lauren may have an easy way for you to do this without going into the CSS. Cheers:)

Viewing 15 posts - 1 through 15 (of 39 total)

You must be logged in to reply to this topic.

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