A Designer’s Guidebook To WooCommerce
WooCommerce supplies an array of selections which might be configured for shopper websites. This informative article is for the designer that is coming up with a WooCommerce retail store from scratch or simply a designer who is tailoring an existing WooCommerce theme.
The quickest method to see what functions you'll find is to go to the Storefront demo within WooCommerce.
Overview the template to discover how it really works. This doc delivers a little bit more info on the sort of styling you could change in your designs. It only covers WooCommerce related pages.
Principles
You will find an enormous number of methods to eCommerce. The WooCommerce plugin is extremely flexible, but just because a feature is utilized on a website somewhere does not mean it will be supported by WooCommerce.
By utilizing the options and strategies supported by WooCommerce, you could increase the whole process of style and design and progress. Personalized modifications might be developed, but usually entail further cost.
Kinds of Pages
Product Internet pages: there are actually two forms of solution webpages you will have to style for:
Product Archive Internet pages: these Exhibit thumbnails for readily available merchandise classes and/or goods. Clicking on a classification thumbnail reveals One more merchandise archive webpage, whereas clicking on an item thumbnail shows The only solution web page.
Product One Web pages: these Screen just one product, and include merchandise picture(s), item header information, products thorough details and associated products, cross sells and up sells.
Distinctive Web pages:
Purchasing Cart: the shopping cart is typically shown in condensed type as a sidebar widget, and in some cases in expanded sort within the Cart page along with Shipping info,
Checkout: once a purchaser is looking at, address information and facts is needed.
Goods
Product Header
Product or service Title – shown to the summary/archive webpages and single internet pages)
Solution Feature – revealed within the summary/archive pages and one webpages
Image – Showcased Picture shows about the summary, extra visuals on The only
Lengthy Description – revealed inside the Product Description place, at the bottom of one merchandise web page
Shorter Description – proven at the top of The only item web site
Solution Categories
every single category desires a provided classification picture and a description
groups can have subcategories, one example is, Plants is usually a class and Trees is usually a sub group. Other than navigation, they behave precisely the same.
Item Classification archives are immediately created with the following sections:
title (classification name)
description (the classification description)
a single classification thumbnail for each sub classification of the current classification
optional solution thumbs (with title, rate and Incorporate to Cart) for every merchandise in the current class
Clicking with a class opens a completely new class, clicking an item thumbnail opens the item.
Product or service Webpages
Product or service Pages are mechanically generated with the next sections:
Product Picture(s): the Showcased Picture and supplementary illustrations or photos for your product or service.
Product Title
Merchandise Price
Merchandise Shorter Description
Quantity to include to cart (with + and controls)
Add to Cart button
Merchandise SKU (Inventory Retaining Device), Categories and Tags
Merchandise Tabs
Description: the products extended description, which include optional image gallery
Added Information and facts: the solution Characteristics ticked to display on solution site
Critiques: optional merchandise assessments
Associated Solutions
Upsells: ‘You may also like’ followed by thumbs/titles for upsells
Cross sells: ‘Linked Products’ followed by thumbnails for relevant products (assigned as Cross Sells or immediately chosen)
Products Image presentation possibilities:
Conventional presentation would be to Screen the Showcased Image at the very best on the products web page, Together with the supplementary graphic thumbnails beneath in 3 columns of thumbnails
Optional presentation is usually to Exhibit the Featured Image without any thumbnails beneath, also to display all photos in The outline tab.
Products Search
Solution Research widgets are offered to position in sidebar widgets or footer widgets.
Website Vast Research Solutions – these search widgets can be utilized on any webpage in the web site:
Products search box (a text lookup box that queries product or service identify, short description, lengthy description)
Class drill-down (a dropdown subject which allows selection of any category or sub class)
Solution tag cloud
Product or service Category Research Solutions – these search widgets will only appear when immediately produced merchandise group archives are increasingly being exhibited
Layered Navigation
Product Cost Filter: displays a sliding scale enabling merchandise being filtered to your rate range
Best Sellers: displays title/thumb/cost for instantly chosen listing of ideal providing solutions
Showcased Products and solutions: shows title/thumb/price for products ticked as Featured Goods
On Sale: displays products that Possess a Sale Value entered As well as their Value
Styling Possibilities
Merchandise thumbs: when merchandise show up as product or service thumbs, four things are exhibited: thumbnail, title, selling price, insert to cart. CSS styling may be used for:
Product or service (Just about every product or service team of four things): qualifications, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, body weight, read more colour, dimensions
Price tag: font, fat, colour, dimensions
Incorporate to Cart: button colour, label colour, border, radius
Sale sticker: the phrase ‘Sale’ appears above solution thumbs on sale – CSS styling can be utilized: track record colour, font colour, border colour, border width, strong/dashed border, border radius.
Item Variations
An item variation will allow a shopper to build a garments product or service that is offered in several colours, or various styles.
When item variations are made use of, products archive internet pages will Exhibit a ‘Decide on Possibilities’ button as opposed to an Increase to Cart button.
In summary, we’ve set out right here the key things that you choose to’ll require to consider while you are coming up with a WooCommerce keep. We’ve described the different types of pages, the products facts together with the lookup and styling alternatives. Have fun setting up your WooCommerce retail outlet.