Planning WP e-Commerce Category and Product Pages

To design a website with an online store, you need to consider how you will present Categories, Sub Categories and Products so visitors find the site easy to navigate.

Categories are often presented visually or through navigation options, allowing visitors to move straight to viewing products for a particular category. For example:

• Sarong.net.au: Each product category has an icon – Sarongs, Towels, Robes, Jewellery – allowing quick access to the respective Product Page.

A Product Page displays the products within a category, and is where the Add to Cart (or Buy) button is presented. For example:

• Sarong.net.au – Towels: This is the product page for the Towels category, each product displays an image, product name, product short description (and optional ‘more’ information), price and Add to Cart
• MyCarAccessories – Steering Wheels: See the product page for the Steering Wheels category on MyCarAccesories.

For a site like MyCarAccessories that has a lot of categories, it is useful to create Categories and Sub Categories. Once you do this, you’ll need to incorporate Category Pages to show the different categories that are available:

• MyCarAccessories – Interior: This is the category page for all of the sub-categories that come under the Interior category.
• BrideAndGroomStore.com.au – this site presents products in three different category groups – Category, Colour or Theme. These three groups of categories are shown from the main navigation bar and also from the sidebar navigation, which is available on any of the store pages.  Within each category group, there are individual categories, for example, there are Categories for Veils and Stationery, or under Theme there is Vintage and Eco Friendly.
• CastelliEstate.com.au – this site has three ranges of wines that constitute the categories, Castelli, Cerca and Cellar Range. There is a single Category page that shows the three categories available, which provides access to the three product pages.

Product Presentation

List View

When products are presented within categories, they are displayed in a list. Each product appears in summary format, with the product thumbnail on the left and the product details on the right. If the product has a detailed description entered, a ‘More Details’ button is included in the summary.

The product list can be presented in 1 column, 2 column or 3 column format.

Single Product View

When an individual product is clicked from the List View, the product is displayed in Single Product View.

Shopping Cart

The shopping cart incorporates a number of elements. It is possible to style how the elements look while retaining the basic structure.

Handling Out of Stock

WP eCommerce allows you to record available inventory for a product, and as the product is sold online the inventory level decreases. If you are selling online and from a retail store, you’ll need to up manually update the online inventory if items are sold through your retail store.

When a product drops to 0 available, the Add to Cart button for the product (which normally sits below the Price) is replaced by a text message “This product has sold out”. With a custom CSS rule it is possible to suppress this text and display an image instead. For example:

You can also tick a box in the settings to make the whole product disappear from the product page and send an email notification to the store owner:

Using the stock notifier plugin for WP e-Commerce, it should be possible to allow for visitors to request an email notification when an item is back in stock. (Note: this plugin is beta, and we haven’t had it running on a production site as yet).

Sidebar Bells and Whistles

The WP e-Commerce plugin has a range of widgets that can be placed in a sidebar. These include:

• Product Tags (displays a tag cloud of tags)
• Product Categories (displays links to individual product categories/brands)
• Shopping Cart (displays shopping cart in your sidebar)
• Price Range (lets customers narrow down their search for a product based on price)
• Donations (displays any products that are flagged as being a donation product in the sidebar)
• Specials (displays any products on sale in the side bar)
• Latest Products (displays your latest products in your sidebar)

Marketing Options and Cross Sale Recommendations

The WP e-Commerce plugin supports cross sale recommendations. These are automatically generated, and can’t be manually controlled.

From the Marketing documentation:

Display Cross Sales: If you have this option selected, when a customer views a product they will a list of other products purchased by customers who also purchased that particular product. Amazon.com has a similar feature (ok, we might have gotten the idea from them). This is a great way to nudge your customers toward other products they might be interested in. Increased nudging = increased sales. Note: Cross-sale suggestions are automatically generated from the purchase history in your store. There is not yet a way to specifically choose which products will be recommended.

Inspiration and Ideas

Browse the following sites that have been constructed on the OM4 platform using the WP eCommerce plugin.

Punch Coffee
Castelli Estate
My Car Accessories
Conscious Business
Ludwig Dance
Treeton Estate
Forester Estate

Or review the global portfolio of websites constructed using WP eCommerce: WP eCommerce Showcase

Return to eCommerce How To Articles