A Designer’s Guide To WooCommerce

WooCommerce delivers a variety of choices that can be configured for consumer Internet sites. This post is for the designer that is coming up with a WooCommerce retail store from scratch or simply a designer that's tailoring an present WooCommerce topic.

The fastest solution 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 sort of styling you could change in your designs. It only handles WooCommerce similar internet pages.
Concepts

There are actually a big range of techniques to eCommerce. The WooCommerce plugin is rather versatile, but Simply because a attribute is utilised on an internet site somewhere doesn't mean it will be supported by WooCommerce.

By using the features and approaches supported by WooCommerce, you could increase the whole process of style and design and growth. Custom made modifications might be manufactured, but frequently include extra expense.
Types of Internet pages

Products Internet pages: you will discover two sorts of item pages you must style and design for:

Merchandise Archive Webpages: these Show thumbnails for available products types and/or merchandise. Clicking on the category thumbnail reveals A different merchandise archive webpage, whereas clicking on an item thumbnail shows the single item web site.
Product or service Solitary Webpages: these display only one merchandise, and integrate solution image(s), products header data, solution comprehensive information and facts and linked items, cross sells and up sells.

Unique Internet pages:

Searching Cart: the purchasing cart is sometimes exhibited in condensed kind as a sidebar widget, and in some cases in expanded kind around the Cart web site along with Shipping and delivery information,
Checkout: the moment a client is checking out, handle details is required.

Solutions

Solution Header

Product Identify – proven on the summary/archive web pages and single internet pages)
Merchandise Function – revealed about the summary/archive pages and one webpages
Graphic – Highlighted Image shows around the summary, supplemental photos on the single
Prolonged Description – proven during the Solution Description area, at the bottom of one solution web site
Limited Description – shown at the highest of the single product or service webpage

Products Groups

every group requirements a equipped class graphic and a description
types can have subcategories, such as, Vegetation is usually a class and Trees is usually a sub class. Other than navigation, they behave precisely the same.

Product Group archives are automatically produced with the subsequent sections:

title (class identify)
description (the class description)
a person class thumbnail for every sub category of the present category
optional product or service thumbs (with title, cost and Increase to Cart) for each product or service in the current group

Clicking on a class opens a different category, clicking an item thumbnail opens the products.
Solution Web pages

Product Webpages are quickly generated with the next sections:

Product Picture(s): the Showcased Picture and supplementary images for that solution.
Products Title
Solution Selling price
Item Limited Description
Amount to incorporate to cart (with + and controls)
Insert to Cart button
Product SKU (Stock Preserving Device), Classes and Tags
Product or service Tabs
Description: the product lengthy description, like optional graphic gallery
Extra Data: the products Attributes ticked to Exhibit on products webpage
Opinions: optional products critiques
Relevant Products and solutions
Upsells: ‘You may also like’ followed by thumbs/titles for upsells
Cross sells: ‘Relevant Products and solutions’ followed by thumbnails for linked goods (assigned as Cross Sells or mechanically selected)

Solution Impression presentation options:

Regular presentation is usually to Display screen the Featured Picture at the highest of your item webpage, Along with the supplementary graphic thumbnails underneath in 3 columns of thumbnails
Optional presentation is usually to Display screen the Featured Picture without any thumbnails beneath, also to display all photos in The outline tab.

Product or service Look for

Item Lookup widgets are offered to put in sidebar widgets or footer widgets.

Web site Large Lookup Solutions – these lookup widgets can be employed on any page in the website:

Solution research box (a textual content look for box that searches item title, limited description, very long description)
Classification drill-down (a dropdown field that permits variety of any group or sub classification)
Products tag cloud

Product Category Lookup Possibilities – these research widgets will only show up when quickly created product category archives are being shown

Layered Navigation
Product or service Selling price Filter: shows a sliding scale allowing products to become filtered to some value selection
Ideal Sellers: shows title/thumb/selling price for quickly picked listing of greatest marketing products and get more info solutions
Showcased Products: displays title/thumb/value for solutions ticked as Showcased Merchandise
On Sale: shows products which Use a Sale Selling price entered Besides their Selling price

Styling Solutions

Products thumbs: when products and solutions surface as products thumbs, four features are exhibited: thumbnail, title, rate, increase to cart. CSS styling can be employed for:
Product or service (Each individual products team of four things): qualifications, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, body weight, colour, dimensions
Selling price: font, fat, colour, measurement
Incorporate to Cart: button colour, label colour, border, radius

Sale sticker: the phrase ‘Sale’ appears more than item thumbs on sale – CSS styling can be used: background colour, font colour, border colour, border width, solid/dashed border, border radius.
Product Variants

An item variation lets a customer to create a apparel item that is accessible in different colors, or distinctive models.

When product or service versions are employed, item archive pages will display a ‘Pick out Selections’ button as an alternative to an Incorporate to Cart button.

In summary, we’ve set out here the major features you’ll need to have to think about when you're designing a WooCommerce retail store. We’ve spelled out the different sorts of webpages, the product information and facts together with the research and styling possibilities. Have a good time building your WooCommerce retail store.