WooCommerce provides a wide range of options that can be configured for client websites. This article is for a designer who is designing a WooCommerce store from scratch or a designer who is tailoring an existing WooCommerce theme.
The quickest way to see what features there are is to visit the Storefront demo inside WooCommerce.
Review the template to see how it works. This document provides a bit more information on the kind of styling you can change in your designs. It only covers WooCommerce related pages.
Principles
There are a huge variety of approaches to eCommerce. The WooCommerce plugin is very flexible, but just because a feature is used on a website somewhere does not mean it will be supported by WooCommerce.
By using the features and approaches supported by WooCommerce, you can speed up the process of design and development. Custom modifications can be produced, but often involve additional expense.
Types of Pages
Product Pages: there are 2 kinds of product pages you will need to design for:
- Product Archive Pages: these display thumbnails for available product categories and/or products. Clicking on a category thumbnail shows another product archive page, whereas clicking on a product thumbnail displays the single product page.
- Product Single Pages: these display a single product, and incorporate product image(s), product header information, product detailed information and related products, cross sells and up sells.
- Shopping Cart: the shopping cart is sometimes displayed in condensed form as a sidebar widget, and sometimes in expanded form on the Cart page together with Delivery information,
- Checkout: once a customer is checking out, address information is required.
Products
Product Header
- Product Name – shown on the summary/archive pages and single pages)
- Product Feature – shown on the summary/archive pages and single pages
- Image – Featured Image displays on the summary, additional images on the single
- Long Description – shown in the Product Description area, at the bottom of single product page
- Short Description – shown at the top of the single product page
Product Categories
- every category needs a supplied category image and a description
- categories can have subcategories, for example, Plants is a category and Trees is a sub category. Other than navigation, they behave the same.
Product Category archives are automatically generated with the following sections:
- title (category name)
- description (the category description)
- one category thumbnail for each sub category of the current category
- optional product thumbs (with title, price and Add to Cart) for each product in the current category
Clicking on a category opens a new category, clicking a product thumbnail opens the product.
Product Pages
Product Pages are automatically generated with the following sections:
- Product Image(s): the Featured Image and supplementary images for the product.
- Product Title
- Product Price
- Product Short Description
- Quantity to add to cart (with + and controls)
- Add to Cart button
- Product SKU (Stock Keeping Unit), Categories and Tags
- Product Tabs
- Description: the product long description, including optional image gallery
- Additional Information: the product Attributes ticked to display on product page
- Reviews: optional product reviews
- Related Products
- Upsells: ‘You may also like’ followed by thumbs/titles for upsells
- Cross sells: ‘Related Products’ followed by thumbnails for related products (assigned as Cross Sells or automatically selected)
Product Image presentation options:
- Standard presentation is to display the Featured Image at the top of the product page, with the supplementary image thumbnails underneath in 3 columns of thumbnails
- Optional presentation is to display the Featured Image with no thumbnails underneath, and to display all images in the Description tab.
Product Search
Product Search widgets are available to place in sidebar widgets or footer widgets.
Site Wide Search Options – these search widgets can be used on any page in the website:
- Product search box (a text search box that searches product name, short description, long description)
- Category drill-down (a dropdown field that allows selection of any category or sub category)
- Product tag cloud
Product Category Search Options – these search widgets will only appear when automatically generated product category archives are being displayed
- Layered Navigation
- Product Price Filter: displays a sliding scale allowing products to be filtered to a price range
- Best Sellers: displays title/thumb/price for automatically selected list of best selling products
- Featured Products: displays title/thumb/price for products ticked as Featured Products
- On Sale: displays products that have a Sale Price entered in addition to their Price
Styling Options
- Product thumbs: when products appear as product thumbs, 4 elements are displayed: thumbnail, title, price, add to cart. CSS styling can be used for:
- Product (each product group of 4 elements): background, product border, padding, margin
- Thumbnail: border, padding, margins
- Title: font, weight, colour, size
- Price: font, weight, colour, size
- Add to Cart: button colour, label colour, border, radius
Sale sticker: the word ‘Sale’ appears over product thumbs on sale – CSS styling can be used: background colour, font colour, border colour, border width, solid/dashed border, border radius.
Product Variations
A product variation allows a client to set up a clothing product that is available in different colours, or different designs.
When product variations are used, product archive pages will display a ‘Choose Options’ button rather than an Add to Cart button.
In summary, we’ve set out here the major elements that you’ll need to think about when you are designing a WooCommerce store. We’ve explained the different types of pages, the product information as well as the search and styling options. Have fun building your WooCommerce store.