[Support request] WooCommerce best practices

[Moses]

I’m having trouble styling my shop.
Can you tell me simple guidelines I should follow?

1.what image size should I upload?

2. what image sizes should I set at the woocommerce setting? I heard it should be according to the theme (single, catalog, thumbnail)

3. how can I control the global store layout?
I mean both single products, the store itself, cart, checkout
In terms of padding, boxed vs full width, etc.. I don’t want to edit each product page

Thanks!

[Tom]

Hi there,

1. As close to the size you want them to be displayed as on desktop. Not too big, not too small.

2. This is totally up to how you want your shop to display. Most people likely just keep the defaults.

3. The WC pages should inherit your normal GP options set in “Appearance > Customize”. There’s also WC specific options with the WC add-on activated.

[Moses]

1. Cool thanks

2. I asked this because the pictures became blurry so I tried to figure out what should I do. So, the woocommerce image setting won’t affect the size of the image?
2.1 (new question) I have some problems with the auto zoom, sometime it works badly, and sometime there’s no zoom at all. Is this something to do with the picture size I upload & the WC image setting?
–In summary, how should I config the settings and upload the product pictures so they won’t look blurry at any size (the image quality is good), and enjoy that zoom (on mouse hover) effect?

3. Thanks, it drove me nuts because it didn’t work for some reason.. apparently the reason is I overridden the setting manually on some pages… silly me.

[Moses]

4. Also, Can I upload non-squared images and they would appear that way ? (e.g. all the images I upload are 200×400)

[David]

I leave woo default image settings as is which gives a 600px product image.
Min resolution i work with is 1200px (which will give you double the pixels for zoom) only bigger if there is a lot of detail and its all about the image rather than the description.
Work with square images, even if you have to add white (or transparency for PNG) space to the image to make them so, this allows you to ensure consistent positioning, will keep your shop page products consistent in height but will negate any odd zoom effects that can happen on narrow or wide images.
Use a good compression tool for reducing the size before uploading if possible.

[Tom]

Great tips, David – thank you!

[Moses]

Thanks David and Tom,

So in summary, If I use the default woo settings, and upload all the images at 600×600, high quality – they should look good and I would have the zoom on hover?

-What I still don’t understand is how do I control the width/height that the image will be displayed on the page?

-Also, is there a way to display them not squared? like Asos does?
http://www.asos.com/men/t-shirts-vests/cat/?cid=7616&ctaref=shop|tshirts|mw_hp_categorytray

Thanks!

[David]

Hi Moses, you can set the catalog image sizes to suit your need, so if you want adjust the image dimensions for the portrait images like ASOS. Here is woo article on image usage take note of regenerating thumbnails it also has a link regarding fixing blurry images.

The images don’t have to be square that is just my preference to ensure consistency. What you can do is create square images that have white space all round – then following link above you could set the Catalog images to portrait dimensions with hard crop on so you can have portrait catalog images and square product page images.

Note the reason for square is when zoomed upon the image is scaled up by it’s width to fit the zoom container, if you have a really tall narrow image like a Pen or Pencil the zoomed image becomes huge and can mess up the page!

[David]

Oh one thing to note – if your using the woo lightbox then it will use the raw image file. Hence the reason to have bigger images then those set in Woo.

[Moses]

That’s what I asked in first place about the image size settings

I refered to the same article:
https://docs.woocommerce.com/document/fixing-blurry-product-images/#section-2
Which says I should set the woo image sizes according to my theme settings. If I understand correctly, its these theme settings they are asking about: (I copied that from another woo article)

function yourtheme_woocommerce_image_dimensions() {
	global $pagenow;
 
	if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) {
		return;
	}
  	$catalog = array(
		'width' 	=> '400',	// px
		'height'	=> '400',	// px
		'crop'		=> 1 		// true
	);
	$single = array(
		'width' 	=> '600',	// px
		'height'	=> '600',	// px
		'crop'		=> 1 		// true
	);
	$thumbnail = array(
		'width' 	=> '120',	// px
		'height'	=> '120',	// px
		'crop'		=> 0 		// false
	);

Because the images I upload are in high resolution, I guessed the problem is that I didn’t match woo image settings with GP’s setting.

And thanks for everything, I’m going to try it.

[Tom]

GP doesn’t actually have any WC image settings, so there shouldn’t be anything to match.

By default, GP just styles the product page, but doesn’t adjust any image sizes etc.. The single product page is 100% core WooCommerce – no changes to the images or layout.

[Author]

Posts