A Designer’s Guide To WooCommerce

WooCommerce delivers a wide array of selections which might be configured for client Web sites. This post is for your designer that's building a WooCommerce store from scratch or perhaps a designer who's tailoring an existing WooCommerce concept.

The quickest method to see what functions you'll find is to visit the Storefront demo within WooCommerce.

Assessment the template to find out how it works. This document gives somewhat more details on the type of styling you'll be able to modify within your patterns. It only addresses WooCommerce connected webpages.
Ideas

You will find an enormous number of approaches to eCommerce. The WooCommerce plugin is extremely flexible, but just because a aspect is made use of on a web site someplace isn't going to indicate It's going to be supported by WooCommerce.

By using the functions and methods supported by WooCommerce, you are able to speed up the process of structure and progress. Personalized modifications might be made, but usually include additional expenditure.
Different types of Web pages

Merchandise Webpages: you will find 2 styles of products web pages you need to design and style for:

Item Archive Pages: these Display screen thumbnails for readily available merchandise classes and/or goods. Clicking with a group thumbnail displays Yet another product archive web site, Whilst clicking on a product thumbnail displays The one product or service website page.
Item Single Internet pages: these Screen just one product, and include merchandise picture(s), product header information and facts, merchandise in depth information and similar merchandise, cross sells and up sells.

Particular Pages:

Browsing Cart: the searching cart is sometimes exhibited in condensed kind as being a sidebar widget, and sometimes in expanded sort within the Cart page along with Shipping and delivery information,
Checkout: the moment a buyer is checking out, handle data is required.

Products and solutions

Merchandise Header

Item Identify – proven on the summary/archive internet pages and solitary internet pages)
Merchandise Function – revealed about the summary/archive pages and one webpages
Graphic – Highlighted Image shows around the summary, supplemental photographs on the single
Very long Description – proven during the Merchandise Description area, at The underside of single product or service webpage
Shorter Description – demonstrated at the top of The only item site

Solution Types

every single category demands a supplied group image and an outline
categories may have subcategories, for instance, Crops is really a group and Trees is really a sub classification. Apart from navigation, they behave the exact same.

Solution Classification archives are immediately created with the following sections:

title (group name)
description (the group description)
one group thumbnail for every sub class of the present class
optional product or service thumbs (with title, cost and Insert to Cart) for each product or service in the current group

Clicking with a class opens a different category, clicking an item thumbnail opens the product.
Merchandise Internet pages

Solution Internet pages are immediately produced with the following sections:

Solution Graphic(s): the Featured Impression and supplementary visuals for your product or service.
Item Title
Merchandise Price
Solution Small Description
Quantity to incorporate to cart (with + and controls)
Increase to Cart button
Item SKU (Inventory Holding Unit), Groups and Tags
Products Tabs
Description: the item very long description, including optional picture gallery
More Information: the solution Characteristics ticked to display on solution site
Reviews: optional item opinions
Similar Goods
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Related Items’ accompanied by thumbnails for similar goods (assigned as Cross Sells or routinely picked)

Product Picture presentation possibilities:

Conventional presentation would be to Screen the Showcased Graphic at the top in the merchandise web site, Using the supplementary picture thumbnails beneath in three columns of thumbnails
Optional presentation should be to display the Highlighted Impression without thumbnails beneath, and to Show all photographs in The outline tab.

Products Search

Item Lookup widgets can be obtained to place in sidebar widgets or footer widgets.

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

Merchandise research box (a textual content look for box that searches item name, quick description, prolonged description)
Group drill-down (a dropdown industry which allows selection of any class or sub class)
Solution tag cloud

Merchandise Group Look for Solutions – these look for widgets will only appear when immediately generated solution class archives are now being shown

Layered Navigation
Merchandise Selling price Filter: shows a sliding scale allowing for products and solutions to be filtered to a price variety
Greatest Sellers: displays title/thumb/value for instantly chosen list of greatest marketing merchandise
Highlighted Solutions: read more shows title/thumb/selling price for solutions ticked as Showcased Solutions
On Sale: shows products which Use a Sale Selling price entered Besides their Selling price

Styling Selections

Product or service thumbs: when solutions show up as product or service thumbs, four aspects are shown: thumbnail, title, price tag, incorporate to cart. CSS styling can be utilized for:
Solution (Each and every solution group of 4 elements): background, product border, padding, margin
Thumbnail: border, padding, margins
Title: font, pounds, colour, sizing
Selling price: font, body weight, colour, dimensions
Insert 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: history colour, font colour, border colour, border width, good/dashed border, border radius.
Product or service Versions

An item variation permits a consumer to setup a clothing products that is out there in several colors, or distinct styles.

When product variants are applied, merchandise archive webpages will Show a ‘Choose Options’ button rather then an Insert to Cart button.

In summary, we’ve set out right 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 pages, the products facts plus the lookup and styling options. Have some fun making your WooCommerce retailer.