Add Product to WordPress/WP-eCommerce Website

Here’s a quick tutorial on how to add and edit products using the WP-eCommerce Plugin on a WordPress site.

Login as WordPress Admin

Go to Products–>Add New

Step 1 – Add Product Information

1. Enter name of product in ‘title’
2. Enter description of product in editor area
3. Tag product to one or more categories
4. If adding a new category, make certain that you assign it to the correct parent category.
5. Enter Price the price of the product.  You may also enter a sale price if this item is currently on sale.
6. Enter Shipping Weight and Dimensions or alternatively set a Flat Rate shipping amount for this product.  Make sure these setting are accurate to ensure a reliable shipping estimate for the customer at checkout time.
7. Optionally enter SKU under Stock Control if you want the system to track inventory for this product.
8. Taxes are typically setup in the Store Configuration and calculated automatically during the checkout process.

Step 2 – Adding Product Images

1. Under ‘Product Images’ tab, click ‘Manage Product Images’.
2. Choose the ‘From Computer’ tab
3. Click ‘Select Files’ and choose one or more files you have stored on your hard drive
4. Enter a short description of the product in the ‘Alternate Text’ field. Be sure to include a keyword or two for Search Engine Optimization purposes.
5. Click the ‘Use as Product Thumbnail’ link
6. Click ‘Save Changes’
7. Exit by clicking outside the ‘Manage Your Product Images’ box

Click ‘Publish’ to add the product to your store, or select ‘Save Draft’ if you want to save changes, to publish later. Once saved you can click ‘View Product’ to view the item in the store as a customer sees it.

Don’t want to scroll? Consider the Alternatives

1. monitors are different sizes which affects the viewable window size
2. a user can set a monitor to different resolutions which affects the viewable window size drastically
3. some users increase the font size within their browser settings, which affects the viewable window size
4. many users (unfortunately) install 1-3 toolbars on top of their browser, which eat up a significant amount of displayable ‘real estate’.

They might not like scrolling, but they will hate the alternatives!

Sometimes those reasons still aren’t enough to convince a client that this is a bad idea, so have them consider the alternatives:

1. to have VERY little content – which isn’t the case for most sites.  This would have to be the case for ALL pages if you care anything for consistency in your design.
2. having a window scroll within a window – which defeats the purpose and makes it a very unfriendly experience, particularly for mobile devices.
3. scroll horizontally, which is obviously not a natural experience for most users.

Fix GIF Thumbnails with Black Background in WordPress

I have a few website that I’ve designed in WordPress using a shopping cart plugin, and then trained the owner how to insert new products along with images of the products.  After the client uploaded a hundred or so products we found that all the thumbnails WordPress automatically generated had black backgrounds.  All of the client’s images were gifs.  Here’s a quick fix:

Step 1 – Edit WordPress media.php

Edit the WordPress file /wp-includes/media.php and edit starting on line 422:
$newimage = wp_imagecreatetruecolor( $dst_w, $dst_h );
if(IMAGETYPE_GIF == $orig_type){
$black=imagecolorallocate($image, 0,0,0);
imagecolortransparent($image, $black);
}
imagecopyresampled( $newimage, $image, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h);

This doesn’t preserve the tranparency, but sets the black background in the image to transparent just before the thumbnail is created. FYI, this will most likely be overwritten next time you update WordPress.

Step 2 – Regenerate Thumbnails

Step 1 only covers thumbnails that will be created in the future, so we need to regenerate the thumbnails. Luckily, you don’t have to do all of this manually, you can install the Regenerate Thumbnails plugin. Once you run that plugin, all your thumbnails should be fixed!

Sources: http://core.trac.wordpress.org/ticket/13461