A Designer’s Tutorial To WooCommerce
WooCommerce gives an array of selections which might be configured for client Internet sites. This text is for just a designer who is creating a WooCommerce shop from scratch or perhaps a designer who's tailoring an existing WooCommerce theme.
The quickest approach to see what characteristics you will discover is to go to the Storefront demo within WooCommerce.
Critique the template to discover how it really works. This doc delivers a little bit more info on the sort of styling you may transform in the models. It only handles WooCommerce linked web pages.
Rules
You will discover a large range of techniques to eCommerce. The WooCommerce plugin is rather versatile, but Simply because a attribute is employed on an internet site somewhere doesn't imply It will likely be supported by WooCommerce.
By using the features and approaches supported by WooCommerce, you can increase the whole process of style and design and progress. Personalized modifications might be made, but usually include additional expense.
Types of Pages
Product Internet pages: there are actually two forms of solution webpages you will have to design and style for:
Item Archive Pages: these Show thumbnails for obtainable product or service classes and/or items. Clicking on a category thumbnail reveals A different merchandise archive webpage, Whilst clicking on an item thumbnail shows the single product or service website page.
Merchandise Single Pages: these Exhibit a single product, and integrate item graphic(s), solution header information, product detailed info and related products, cross sells and up sells.
Special Pages:
Procuring Cart: the shopping cart is typically exhibited in condensed sort like a sidebar widget, and occasionally in expanded form over the Cart web site along with Shipping and delivery details,
Checkout: as soon as a consumer is checking out, handle facts is needed.
Products
Products Header
Product Name – revealed over the summary/archive web pages and solitary pages)
Solution Element – revealed on the summary/archive pages and single internet pages
Graphic – Highlighted Graphic displays over the summary, added photos on The one
Very long Description – shown inside the Product or service Description space, at the bottom of solitary solution site
Quick Description – proven at the best of The only products site
Solution Types
each and every group requires a equipped classification image and a description
categories can have subcategories, as an example, Vegetation is usually a category and Trees is actually a sub group. In addition to navigation, they behave the identical.
Merchandise Group archives are mechanically generated with the following sections:
title (category title)
description (the group description)
just one category thumbnail for every sub category of the current class
optional merchandise thumbs (with title, rate and Include to Cart) for each merchandise in The present group
Clicking with a classification opens a completely new category, clicking an item thumbnail opens the products.
Products Internet pages
Product or service Internet pages are quickly created with the next sections:
Product or service Impression(s): the Highlighted Picture and supplementary pictures for your merchandise.
Merchandise Title
Merchandise Price tag
Merchandise Limited Description
Quantity to incorporate to cart (with + and controls)
Include to Cart button
Solution SKU (Inventory Holding Device), Categories and Tags
Item Tabs
Description: the merchandise very long description, together with optional picture gallery
Added Data: the product or service Characteristics ticked to Display screen on product webpage
Testimonials: optional product or service assessments
Related Goods
Upsells: ‘You might also like’ followed by thumbs/titles for upsells
Cross sells: ‘Relevant Solutions’ accompanied by thumbnails for linked products and solutions (assigned as Cross Sells or quickly selected)
Item Image presentation solutions:
Common presentation is always to Show the Featured Image at the top of the product website page, Using the supplementary graphic thumbnails underneath in three columns of thumbnails
Optional presentation is usually to Screen the Highlighted Picture without any thumbnails underneath, also to Exhibit all pictures in The outline tab.
Merchandise Lookup
Product Research widgets are offered to put in sidebar widgets or footer widgets.
Web page Huge Research Alternatives – these lookup widgets can be used on any web site in the web site:
Solution lookup box (a text look for box that lookups merchandise title, brief description, long description)
Classification drill-down (a dropdown subject that enables collection of any category or sub classification)
Product or service tag cloud
Merchandise Class Search Solutions – these look for widgets will only seem when mechanically produced item category archives are increasingly being shown
Layered Navigation
Item Selling price Filter: displays a sliding scale allowing for merchandise to be filtered into a rate range
Ideal Sellers: displays title/thumb/selling price for instantly selected listing of greatest advertising items
Showcased Goods: shows title/thumb/cost for products and solutions ticked as Showcased Goods
On Sale: shows items that Possess a Sale Rate entered In combination with their Rate
Styling Solutions
Products thumbs: when products and more info solutions surface as products thumbs, four things are exhibited: thumbnail, title, selling price, insert to cart. CSS styling may be used for:
Merchandise (Every single merchandise team of 4 aspects): track record, solution border, padding, margin
Thumbnail: border, padding, margins
Title: font, bodyweight, colour, dimension
Cost: font, excess weight, colour, size
Add to Cart: button colour, label colour, border, radius
Sale sticker: the word ‘Sale’ seems around product or service thumbs on sale – CSS styling may be used: qualifications colour, font colour, border colour, border width, sound/dashed border, border radius.
Solution Variations
A product variation allows a shopper to build a garments merchandise that is obtainable in numerous colours, or distinctive layouts.
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 foremost features you’ll need to have to think about when you're building a WooCommerce retail outlet. We’ve discussed the different sorts of pages, the products facts plus the lookup and styling options. Have some fun making your WooCommerce keep.