A Designer’s Guideline To WooCommerce

WooCommerce delivers a wide array of solutions that can be configured for consumer Internet sites. This text is for a designer who is developing a WooCommerce keep from scratch or maybe a designer that's tailoring an present WooCommerce theme.

The quickest method to see what functions you can find is to go to the Storefront demo inside of WooCommerce.

Evaluate the template to see how it works. This document offers somewhat more details on the type of styling you may transform in the layouts. It only covers WooCommerce related pages.
Principles

You'll find a massive selection of ways to eCommerce. The WooCommerce plugin is incredibly versatile, but Simply because a element is made use of on a web site someplace would not necessarily 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 improvement. Custom modifications can be produced, but often involve additional expense.
Types of Internet pages

Products Internet pages: there are actually two varieties of product or service web pages you need to layout for:

Solution Archive Webpages: these Show thumbnails for accessible product categories and/or products and solutions. Clicking with a classification thumbnail demonstrates One more merchandise archive webpage, whereas clicking on a product thumbnail shows The one product or service website page.
Product or service Solitary Webpages: these Show a single product, and include product or service impression(s), solution header info, product in-depth facts and linked merchandise, cross sells and up sells.

Particular Pages:

Procuring Cart: the procuring cart is usually shown in condensed form to be a sidebar widget, and from time to time in expanded kind within the Cart web page along with Supply data,
Checkout: as soon as a customer is testing, tackle details is required.

Products and solutions

Product or service Header

Solution Name – revealed about the summary/archive webpages and single internet pages)
Merchandise Function – revealed to the summary/archive webpages and single internet pages
Picture – Featured Graphic displays within the summary, added photographs on The one
Prolonged Description – proven within the Products Description spot, at the bottom of one merchandise web page
Shorter Description – revealed at the best of The only item web site

Products Classes

each and every category demands a provided group impression and a description
groups can have subcategories, by way of example, Crops is really a classification and Trees is usually a sub category. Other than navigation, they behave precisely the same.

Product or service Class archives are immediately created with the following sections:

title (category title)
description (the group description)
1 category thumbnail for every sub group of the current group
optional item thumbs (with title, selling price and Include to Cart) for every merchandise in The existing classification

Clicking with a group opens a new classification, clicking an item thumbnail opens the merchandise.
Products Internet pages

Product or service Internet pages are immediately created with the following sections:

Products Impression(s): click here the Featured Image and supplementary photos for your product.
Products Title
Solution Price
Item Quick Description
Amount to incorporate to cart (with + and controls)
Add to Cart button
Solution SKU (Inventory Trying to keep Device), Types and Tags
Item Tabs
Description: the merchandise extensive description, which includes optional graphic gallery
Extra Facts: the item Characteristics ticked to Display screen on solution web site
Evaluations: optional products critiques
Linked Products
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Associated Merchandise’ accompanied by thumbnails for associated solutions (assigned as Cross Sells or automatically chosen)

Product or service Image presentation alternatives:

Conventional presentation would be to Screen the Showcased Image at the very best with the product webpage, While using the supplementary image thumbnails underneath in three columns of thumbnails
Optional presentation should be to Show the Highlighted Graphic with no thumbnails underneath, and also to Display screen all pictures in the Description tab.

Product or service Look for

Item Research widgets are offered to place in sidebar widgets or footer widgets.

Website Extensive Look for Options – these lookup widgets may be used on any site in the website:

Item lookup box (a textual content look for box that searches item title, small description, long description)
Category drill-down (a dropdown discipline that enables number of any category or sub category)
Solution tag cloud

Merchandise Classification Look for Choices – these lookup widgets will only look when mechanically created product classification archives are being displayed

Layered Navigation
Solution Selling price Filter: shows a sliding scale allowing for goods for being filtered into a price tag array
Most effective Sellers: displays title/thumb/cost for routinely chosen listing of most effective promoting items
Highlighted Solutions: shows title/thumb/price for goods ticked as Highlighted Merchandise
On Sale: shows products which Have got a Sale Price entered Along with their Value

Styling Possibilities

Product or service thumbs: when solutions surface as product thumbs, 4 components are shown: thumbnail, title, value, incorporate to cart. CSS styling may be used for:
Product or service (Each individual product group of 4 components): background, solution border, padding, margin
Thumbnail: border, padding, margins
Title: font, bodyweight, colour, measurement
Price tag: font, body weight, colour, dimensions
Increase to Cart: button colour, label colour, border, radius

Sale sticker: the term ‘Sale’ seems around products thumbs on sale – CSS styling can be employed: history 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 accessible in different colours, or different designs.

When product variations are used, product archive pages will display a ‘Pick out Solutions’ button rather then an Increase to Cart button.

In summary, we’ve established out in this article the foremost features that you choose to’ll have to have to consider if you find yourself coming up with a WooCommerce retail outlet. We’ve discussed the different sorts of webpages, the solution info along with the search and styling solutions. Have some fun making your WooCommerce retail outlet.