Forums

Maddtechwf

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.

Maddtechwf

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.

jessevlasveld

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['activated'] ) && $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

Douglas

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

Maddtechwf

Douglas,

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

Douglas

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

Robskiwarrior

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.

joslex

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.

Maddtechwf

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

JoshWhite

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

Douglas

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

joslex

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

AngeloP

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

Maddtechwf

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

TheDesignGuys

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

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

DanyDuchaine

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?

GTC1187

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!

thordog

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

medafighterX

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!

kylechamb

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

liongabriel

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.

Maddtechwf

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

meeko311

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 450x450 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!

samina

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

erwinchrisman

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

erwinchrisman

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

minnow

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

wildatartatelier

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

th4d

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

ecommercekid

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['ABC'] = __( '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.

Maddtechwf

@ecommercekid - You can do that with a widget.

Shezallthat

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 http://50.97.96.80/~jbradmn/product/kickport/ Please take a look and tell me if there is something obvious I can fix.

Thanks!

Shezallthat

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

smcguigan

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?

deeve007

Stay away from Shopp, really buggy plugin, and far harder to implement than Woocommerce.