A Designer’s Manual To WooCommerce

WooCommerce offers a variety of choices which can be configured for customer Internet websites. This article is to get a designer who's developing a WooCommerce keep from scratch or maybe a designer that's tailoring an present WooCommerce topic.

The fastest way to see what features you will find is to visit the Storefront demo inside WooCommerce.

Assessment the template to find out how it really works. This doc supplies a little bit additional information on the sort of styling you could improve in the layouts. It only handles WooCommerce related webpages.
Concepts

There are actually 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 options and strategies supported by WooCommerce, you could increase the whole process of structure and progress. Personalized modifications is often generated, but typically entail added cost.
Varieties of Webpages

Item Pages: there are two varieties of product or service web pages you need to design and style for:

Item Archive Pages: these display thumbnails for out there product or service groups and/or merchandise. Clicking on the category thumbnail shows A further product or service archive website page, While clicking on a product thumbnail displays The one merchandise webpage.
Item Single Internet pages: these Exhibit an individual solution, and incorporate products graphic(s), merchandise header details, item in-depth facts and relevant items, cross sells and up sells.

Unique Internet pages:

Browsing Cart: the purchasing cart is sometimes exhibited in condensed sort like a sidebar widget, and occasionally in expanded variety to the Cart webpage together with Supply data,
Checkout: when a customer is testing, deal with data is needed.

Items

Item Header

Solution Title – shown on the summary/archive internet pages and solitary pages)
Merchandise Function – revealed about the summary/archive pages and solitary pages
Graphic – Highlighted Image shows around the summary, supplemental photographs on the single
Very long Description – proven in the Product or service Description region, at The underside of solitary item site
Quick Description – demonstrated at the highest of the single product or service webpage

Solution Types

every classification wants a supplied group image and an outline
categories may have subcategories, for instance, Crops is actually a classification and Trees is actually a sub category. Aside from navigation, they behave exactly the same.

Product or more info service Category archives are mechanically generated with the subsequent sections:

title (category identify)
description (the category description)
just one category thumbnail for every sub category of the present class
optional product or service thumbs (with title, value and Increase to Cart) for each products in The present classification

Clicking on the group opens a brand new group, clicking a product thumbnail opens the merchandise.
Product Web pages

Products Webpages are quickly produced with the subsequent sections:

Item Impression(s): the Featured Impression and supplementary images to the products.
Solution Title
Product or service Price
Merchandise Shorter Description
Quantity so as to add to cart (with + and controls)
Add to Cart button
Merchandise SKU (Inventory Retaining Device), Categories and Tags
Merchandise Tabs
Description: the product extended description, which include optional image gallery
Added Information and facts: the solution Characteristics ticked to Display screen on item site
Reviews: optional solution 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 is to Screen the Highlighted Graphic at the top in the product or service web site, Using the supplementary picture thumbnails beneath in three columns of thumbnails
Optional presentation is to Show the Highlighted Impression without having thumbnails underneath, and also to Screen all illustrations or photos in The outline tab.

Item Lookup

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

Website Vast Research Solutions – these search widgets can be used on any webpage in the website:

Merchandise look for box (a textual content search box that searches item title, limited description, prolonged description)
Classification drill-down (a dropdown industry that allows choice of any class or sub group)
Merchandise tag cloud

Product or service Classification Look for Options – these search widgets will only seem when instantly produced merchandise group archives are increasingly being exhibited

Layered Navigation
Product Price Filter: displays a sliding scale permitting items for being filtered into a price tag selection
Finest Sellers: shows title/thumb/selling price for quickly picked listing of most effective selling products
Featured Goods: displays title/thumb/cost for goods ticked as Featured Goods
On Sale: displays products that have a Sale Price entered Along with their Cost

Styling Choices

Item thumbs: when goods appear as product thumbs, 4 elements 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, 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: background colour, font colour, border colour, border width, good/dashed border, border radius.
Product or service Variants

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, product or service archive webpages will Show a ‘Select Choices’ button rather than an Increase to Cart button.

In summary, we’ve established out below the key components that you’ll have to have to consider if you are developing a WooCommerce shop. We’ve explained the differing types of web pages, the item information and also the research and styling alternatives. Have a good time building your WooCommerce retail outlet.