A Designer’s Manual To WooCommerce
WooCommerce gives a wide range of options which might be configured for customer Internet sites. This post is for the designer that is developing a WooCommerce shop from scratch or perhaps a designer that's tailoring an present WooCommerce concept.
The quickest method to see what features there are is to go to the Storefront demo within WooCommerce.
Assessment the template to find out how it works. This doc supplies somewhat more information on the kind of styling you could adjust in the patterns. It only handles WooCommerce associated internet pages.
Rules
You'll find an enormous variety of techniques to eCommerce. The WooCommerce plugin is quite flexible, but Because a characteristic is utilized on a web site somewhere does not imply It will probably be supported by WooCommerce.
By using the features and techniques supported by WooCommerce, you'll be able to speed up the process of layout and progress. Personalized modifications can be developed, but frequently require further expenditure.
Varieties of Internet pages
Merchandise Pages: you can find 2 forms of product web pages you will have to structure for:
Item Archive Web pages: these display thumbnails for offered product groups and/or solutions. Clicking with a category thumbnail exhibits A different product archive website page, Whilst clicking on a product thumbnail shows The one item website page.
Product Solitary Web pages: these Display screen just one merchandise, and include item graphic(s), item header data, products detailed details and similar products, cross sells and up sells.
Unique Webpages:
Searching Cart: the procuring cart is sometimes displayed in condensed kind for a sidebar widget, and sometimes in expanded type about the Cart site together with Delivery information,
Checkout: after a client is looking at, tackle facts is necessary.
Products
Solution Header
Merchandise Title – proven within the summary/archive pages and single pages)
Item Aspect – shown around the summary/archive webpages and single webpages
Picture – Featured Picture displays within the summary, further photos on The only
Prolonged Description – demonstrated while in the Merchandise Description space, at The underside of one products page
Quick Description – demonstrated at the top of the single product web page
Item Categories
each category needs a supplied classification graphic and a description
categories can have subcategories, by way of example, Vegetation is often a class and Trees can be a sub group. Besides navigation, they behave a similar.
Item Classification archives are immediately produced with the subsequent sections:
title (classification name)
description (the class description)
1 category thumbnail for each sub classification of the present category
optional solution thumbs (with title, selling price and Insert to Cart) for every merchandise in The present class
Clicking on a category opens a new category, clicking a product thumbnail opens the merchandise.
Product or service Internet pages
Solution Pages are routinely generated with the subsequent sections:
Solution Image(s): the Showcased Picture and supplementary images for that item.
Products Title
Solution Price
Product or service Quick Description
Amount to incorporate to cart (with + and controls)
Insert to Cart button
Product SKU (Stock Retaining Unit), Classes and Tags
Merchandise Tabs
Description: the merchandise very long description, together with optional graphic gallery
Supplemental Information: the item Attributes ticked to Show on merchandise site
Assessments: optional product critiques
Associated Items
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Connected Products and solutions’ followed by thumbnails for relevant products and solutions (assigned as Cross Sells or immediately chosen)
Product or service Image presentation alternatives:
Conventional presentation would be to Exhibit the Showcased Image at the check here very best with the product webpage, Along with the supplementary image thumbnails underneath in 3 columns of thumbnails
Optional presentation will be to display the Featured Picture without thumbnails beneath, also to display all photos in The outline tab.
Product or service Look for
Item Lookup widgets can be obtained to position in sidebar widgets or footer widgets.
Web page Wide Search Alternatives – these research widgets may be used on any site in the web site:
Product lookup box (a text research box that queries products identify, short description, extended description)
Class drill-down (a dropdown subject which allows array of any category or sub category)
Item tag cloud
Solution Group Research Selections – these look for widgets will only surface when automatically generated item category archives are being displayed
Layered Navigation
Product Price Filter: displays a sliding scale permitting items for being filtered to some value selection
Finest Sellers: shows title/thumb/selling price for routinely picked listing of ideal marketing solutions
Highlighted Items: displays title/thumb/cost for goods ticked as Featured Products
On Sale: shows products which Have got a Sale Selling price entered Besides their Price tag
Styling Possibilities
Solution thumbs: when goods seem as product thumbs, four things are shown: thumbnail, title, value, include to cart. CSS styling can be used for:
Products (Just about every merchandise group of four features): background, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, weight, colour, measurement
Rate: font, bodyweight, colour, dimensions
Increase to Cart: button colour, label colour, border, radius
Sale sticker: the word ‘Sale’ seems more than merchandise thumbs on sale – CSS styling can be used: background colour, font colour, border colour, border width, strong/dashed border, border radius.
Products Versions
An item variation enables a shopper to create a clothes product that is on the market in numerous colors, or diverse styles.
When products versions are made use of, merchandise archive pages will Screen a ‘Choose Possibilities’ button rather than an Insert to Cart button.
In summary, we’ve set out below the main things that you simply’ll have to have to think about if you find yourself creating a WooCommerce keep. We’ve explained the different sorts of internet pages, the solution information and facts along with the research and styling options. Rejoice setting up your WooCommerce shop.