Adding Product Images

Product Image Basics

Adding product images is similar to adding images to any normal WordPress post with one minor difference; you do not *insert* the image into the post editor. WordPress and WP e-Commerce will handle creating your thumbnails and placing the product image into your product pages.

To add an image you can click one of 2 places… essentially they do the exact same thing. Upload Image is the standard WordPress image tool above the post editor. The Manage Product Images link is further down the post editor page in it’s own box.

Add / Upload / Manage Product ImagesAdd / Upload / Manage Product Images

Tips About Images

Several things to keep in mind when creating or selecting images for use online and especially as product images.

  • Make sure your image clearly represents what you are selling. Its best to keep them on neutral backgrounds without clutter.
  • Make sure the image is not overly compressed or too small. Small images will be hard to see and if they are scaled larger will become fuzzy.
  • Make sure your images aren’t too large. Overly large images (unoptimised for web use or straight from a digital camera) will often be extremely large files that will take a very long time to add to your site, cause the store pages to take extremely long to load, take forever for your visitors to see and even often cause WordPress to become unstable if not crash all-together. If you are unsure how to best optimise your images for web use you might want to hire someone to do this for you. Both over and under optimising can ruin a great site.
  • Make sure your images all have the same aspect ration. This means make sure they are all the same size height and width. Varying the height and width will result in sloppy display if you aren’t using the crop thumbnails option and will result in cropped images (cut off) if you have cropping enabled. This is normal and how all auto cropping works. If you don’t want your images cropped and you want a clean display just make sure your images are uniform. If you are unsure how to do this you may want to hire someone to help with this.
  • Select Full Size from the checkboxes this will ensure the use of proper sizes.

Resizing product images and thumbnails

Product image and product thumbnail sizes are globally managed in the store presentation tab.

Admin > Settings > Store > Presentation

Product Image and Thumbnail Size Settings
Product Image and Thumbnail Size Settings (Click to Enlarge)

Basic Image Size Settings Include:

Default Product Thumbnail Size: Width: / Height:

Default Product Group Thumbnail Size: Width: / Height:

Single Product Image Size: Width: / Height:

Crop Thumbnails: Yes / No

Gallery Thumbnail Image Size: Width: / Height:

You will want to adjust the default sizes to suite your needs.

Product Image and Thumbnails prior to setting sizes
Product Image and Thumbnails prior to setting sizes
Product Image and Thumbnails after setting sizes
Product Image and Thumbnails after setting sizes

Adding Multiple Product Images (Gold Cart)

Setting the default product image
Setting the default product image

Gold Cart offers the ability to present your product with multiple thumbnail images that when clicked show alternate product views. To add additional product images just add additional images to the product. Again, do not add the image to the post editor, WP e-Commerce / Gold Cart will handle building the thumbnail gallery.

One thing to keep in mind when using multiple images is to remember to set the default product image. To specify a default product image open the image manager and click “Use as Product Thumbnail” This will set the gallery to use this image first when loading the product page.

After clicking just close the Image manger you do not need to do anything else.

Fixing odd sized thumbnails or unexpected image sizes

If you encounter unexpected odd sized results this may be due to several possible reason.

  • You are using mixed sized images to start with and not using the crop option.
  • You didn’t make sure to check use Full Size during upload.
  • Your theme CSS might be altering the sizes.

As mentioned above it is strongly suggested that you start off with images with the same dimensions. This will go a long way to making sure you have a clean starting point for all image scaling.

If you are certain your images are the same height and width you may have missed checking the use Full Size checkbox at upload time. You can go back to the image manager and select it to make sure all images are using the correct sizes. Do this for all your images especially those that are showing an incorrect size.

CSS messing with sizes gets a little more tricky… you will need to identify the CSS style rule that is altering the image size and then adjust it or by creating a new rule that loads after it to alter the previous style rule. A tool like Firebug is strongly suggested for tracking things like this down.

If you’re still having trouble you may want to try rebuilding all your thumbnails. Before doing something it is advisable to make a backup. The plugin AJAX Thumbnail Rebuild (not related to WP e-Commerce) might help in some cases where you just can’t get image sizes set right.

My images look like they are cut off… You have the crop option enabled in the Store > Presentation settings. This will take all images and cut them to your specified height and width. In order to do this it does cut parts of your image off. This is normal and not a bug. If you don’t want your images to be cut off you will need to make sure your images are all the same height and width or turn off cropping just keep in mind if you aren’t making your images the same dimensions they will now be all different sizes, this is also normal and not a bug.

Image Size and Ratio guides and tips

The following is added to help with understanding why image ratio is so critical… I want to thank and credit for the following information as I don’t think I could have put it any better myself.

All of the images you upload must have the same aspect ratio.

Why is this so important?

WP e-Commerce generates all of the images required for your shop from the one file that you upload. This saves you a lot of work making multiple versions of each image, but it creates it’s own set of issues. If I upload this image on the left with the incorrect settings I could end up with the product image on the right displayed on my site.

Image ratio distortion example
Image ratio distortion example

I strongly suggest picking a nice easy aspect ratio from the start 1 x 1, 3 x 4, but if you find yourself already committed to a complicated one like 693 x 397 the internet, comes to your rescue, use the Aspect Ratio Calculator to get the correct size for your thumbnails etc.

So what actually happens when you upload an image? Where do they go? What gets made? Lets break that down.

  1. The image you upload is displayed without change in the popup “lightbox” when a user clicks the main image on a single product page. So pick a size that is generous but reasonable.
  2. Single Product Image Size: The next largest image is generated by the plugin and displayed on the single product page.
  3. Default Product Thumbnail Size: The thumbnail which is displayed on product pages in either list or grid views. Make it a reasonable size. The user wants to quickly see which product it is so they can click through to more information on the single product page.
  4. Gallery Thumbnail Image Size: lastly the image size that is displayed in Gold Cart galleries on the single product page. This is only of interest to users of that plugin. If you do not have it, you will not see these settings in your WordPress backend.

Image size recommendations (but that is all they are)

The main image for the lightbox, no more than 800 pixels wide or 700 pixels high so that it fits on most screens comfortably.

Main product image no more than 500 pixels wide as it starts to overwhelm the text. Height is not such an issue but 550 pixels would be pretty large.

Thumbnails, it really depends on your product and how many you wish to display on a page.

Here are some suggestions that may work nicely

1. aspect ratio 3 x 4 portrait

  • Main image uploaded 600w x 800h
  • Single Product Image Size: 360w x 480h
  • Default Product Thumbnail Size: 180w x 240h
  • Gallery Thumbnail Image Size: 111w x 148h

2. aspect ratio 5 x 4 slightly wider than square

  • Main image uploaded 800w x 640h
  • Single Product Image Size: 400w x 320h
  • Default Product Thumbnail Size: 250w x 200h
  • Gallery Thumbnail Image Size: 120w x 150h

3. aspect ratio 1 x 1 square

  • Main image uploaded 700w x 700h
  • Single Product Image Size: 380w x 380h
  • Default Product Thumbnail Size: 230w x 230h
  • Gallery Thumbnail Image Size: 125w x 100h

Gallery Thumbnail Image Size…

The gallery thumbnail image will be displayed beneath the main single product image. To make things line up nicely choose a size that will fit neatly. Divide the Single Product Image Size width by the number of thumbnails you want per row adjusting for  margin, padding and border values you have on the the thumbnail. You may need to adjust this value up or down 1 pixel at a time until you find what works and looks best.