WP e-Commerce, adding a product image

Posted by on Dec 2, 2011 in Blog, Storefront Themes, Wordpress, Working with Images, WP e-Commerce | 13 Comments

You need to know ALL of the steps

This is not hard but you must follow all of the steps. Some people jump right in, uploading images and miss crucial parts of the process. Then they wonder why they have extra thumbnails or small images etc. So here it is, the basic steps with screenshots.

The software will create the thumbnail and product page sizes for you. You should upload an image the correct size for the lightbox/thickbox popup that appears when a image on the single product page is clicked. Make it a decent size for your customers, they will have clicked several images by the time they get there, they deserve to be rewarded with a clear large image.

I prefer to select a image aspect ratio and stick with that, making my images to suit. No setting sizes in the product and it gives the site a uniform smooth look. What size should that be?  The answer to that is another post, actually two.

Method 1

Storefront Themes

For Storefront Themes users the following method should be used when working with these themes, Boutique, Designer, Echo, Edge, Gridport, Instant and Mylo. This applies to all WordPress versions

The Steps

These steps start from adding a new product. use the images below if you can not locate something mentioned in the list.

  1. Click Products/Add New
  2. Give your product a name
  3. Down the page a bit click “Manage Product Images”
  4. The media manager dialog box opens.
  5. Select the “From Computer” tab.
  6. Drag and drop files from your computers file manager to the window, you may drag several at once
  7. Select “Full Size” from the checkboxes
  8. Do the following step only for the image you want as your main image
  9. select “Use as product thumbnail”
  10. It should say “saving” wait for the little while “done” will  appear, then fade away.
  11. Click “Save all changes”
  12. Close the media panel by clicking the X top right or clicking the dark area around it.
  13. Click the blue “Update” button in the product screen (or you will lose the image)
  14. You should see two thumbnails of your product image above the words “Manage Product Images” Two is odd but is how it should be.

But I already uploaded my images.

  1. You can change the settings on ones you have already uploaded, the steps are basically the same,
  2. You open your existing product for editing
  3. Down the page a bit click “Manage Product Images”
  4. The media manager dialog box opens, it should be on the “Product Image Gallery” tab with your thumbnail showing. (if not switch tabs)
  5. Go to step 10 in the list above

How do I add extra product images for a gallery?

You can have extra images which then appear as thumbnails below your single product page image if you wish. You would upload them as normal but for the extra ones you skip step 12. They will automatically appear below your product image and when clicked launch the popup thickbox/lightbox window.

Method 2

New image uploading method

Storefront Themes

For Storefront Themes users the following method should be used when working with these themes, Elegance, Original and Xyloto.

The software will create the thumbnail and product page sizes for you.

  1. Select Products/Add New
  2. Down the page a bit click “Manage Product Images”
  3. The media manager dialog box opens, make sure “From Computer” tab is selected.
  4. Drag and drop files from your computers file manager to the window, you may drag several at once
  5. When they finish uploading you MUST click “Save All Changes”
  6. Now you can drag and drop them into order. The top one will be the main image. If you only have one put 1 in the little text box.
  7. Click “Save All Changes” again
  8. Close Media dialog box
  9. Click the blue Publish or Update button in the product screen (or you will lose the image) You should now see thumbnails above “Manage Product Images.” The one on the left is your main image

13 Comments

  1. Bhoxz
    December 14, 2015

    Yes. The behavior deepnds on how you have configured the theme to display those Featured Area posts. Go under APPEARANCE > HEADER. There are controls at the bottom. If you select Show Featured Area on Home & Category Pages Only , but you have only set one Post to be featured on the Home Page, then that Post will show on all Category pages too. However, if you set different posts to Feature in Category , then those posts will be featured on their category pages. You can feature a post on a specific category by editing that Post, then selecting that option on the right. For more information see here:

    Reply
  2. pepperberryknits
    January 30, 2013

    am I limited to how many gallery images I have for a product? I have 3 products but each product comes in 15 different colors. I would like to show an image of each color under it’s appropriate product but currently only 10 of my gallery images show up.

    I am using storefront elegance as my wp theme.

    Reply
  3. daniel mariz
    September 17, 2012

    Can I set my images from medias library instead from computer? I have all my images uploaded.

    Reply
  4. erik
    September 11, 2012

    I ended figuring out how to solve the problem I was having. For anyone using the Headway Theme if you are having double thumbnail image problems, go to your visual editor>grid mode>select “options” for the content block>uncheck “show featured image”. This can’t be done for a page that has been cloned. It must be the original page(ie Front Page). All the cloned pages will follow suit.

    Hope that helps anyone with Headway who is having the double thumbnail problem.

    Reply
  5. KatC
    August 8, 2012

    Okay Mark,

    Here is my problem:

    All the products are automatically downloaded from the supplier – there over over 12,000 of them. Each photo is of different dimension.

    The client does not like the thumbnail to be cropped so that you can’t tell what it is:

    http://gunandsafetycenter.com/products-page/parts/bcm-charging-hndl-7-62mm308-mod3-bk/

    So I’ve come up with two ideas but don’t know if they can be implemented:

    1. Somehow get the thumbnails cropped proportionally (I’ve a feeling that won’t work)
    2. Or when the customer goes to the single product page, the full image is shown instead of a thumbnail.

    I’ve researched and researched and have not come up with an answer.

    You are my only hope, Obi One. 😉

    By the way – I’m so glad you’ve put all these in your blog! It’s so easy to find the answers!

    Kat

    Reply
    • Mark
      August 8, 2012

      Hi,
      you have some options, none of them perfect.
      1. You can set a size for each single product page image individually when you upload. In the media manager window during upload you will see near the bottom “Products Page Thumbnail Size:” You can set it there to be proportional. the very handy Aspect Ratio Calculator can make quick work of finding the right numbers http://andrew.hedges.name/experiments/aspect_ratio/

      Problem is how does your theme handle it? If it sets a fixed image div size from the Settings/Store/Presentation tab settings you will get distortion. Some CSS and PHP might fix that.

      Nothing will fix the images in the grid view for GoldCart that I know of. They do not have to be square though.

      2. Write a Photoshop action, or Fireworks batch process that can take all of the images and automatically resize and add some white space so that they are square (or whatever shape you want). Something you can just run on a whole folder of images while you have a coffee. Then use those images.
      Do you have Photoshop or Fireworks?

      Reply
    • KatC
      August 8, 2012

      Uhhh… scratch that last comment. I figured out a way to do it.

      Thanks!

      Reply
      • Mark
        August 9, 2012

        Do share Kat 😉

        Reply
        • KatC
          September 6, 2012

          Hi Mark,

          It really was quite simple. We just nixed the idea of a thumbnail and put the whole photo on each single product.

          Reason why? Because each morning the product table is updated by the distributor. 12,000 of ’em each day!

          No way I can resize each one over coffee.

          Thanks for your suggestions, Mark!

          Reply
  6. erik
    August 8, 2012

    I’m using Headway.

    Reply
    • Mark
      August 9, 2012

      I am not familiar with Headway but one of the 2 methods should work. Have you tried method 1 where you use the “use as product thumbnail” link in the media manager?

      Reply
  7. erik
    August 7, 2012

    I am getting the extra thumbnail image. I am trying to follow your directions but I can’t get rid of the extra thumbnail. I am not using any advanced theme settings. Could these directions not be applicable to current versions?

    Reply
    • mgason
      August 7, 2012

      what theme are you using?

      Reply

Leave a Reply