A Designer’s Guide To WooCommerce
WooCommerce presents a variety of solutions that can be configured for client Web sites. This informative article is for the designer who's developing a WooCommerce retailer from scratch or even a designer who's tailoring an existing WooCommerce theme.
The quickest way to see what features there are is to go to the Storefront demo inside of WooCommerce.
Critique the template to discover how it really works. This document gives somewhat more details on the kind of styling you'll be able to adjust in your designs. It only addresses WooCommerce associated pages.
Concepts
There are a huge variety of strategies to eCommerce. The WooCommerce plugin is incredibly versatile, but just because a feature is made use of on an internet site somewhere doesn't imply It will likely be supported by WooCommerce.
By using the options and techniques supported by WooCommerce, you may accelerate the entire process of style and development. Tailor made modifications is often developed, but frequently involve supplemental price.
Kinds of Internet pages
Merchandise Pages: you will discover 2 styles of solution internet pages you need to design for:
Product or service Archive Webpages: these display thumbnails for readily available merchandise categories and/or goods. Clicking over a class thumbnail reveals One more item archive site, whereas clicking on an item thumbnail shows the single product or service web site.
Merchandise One Webpages: these Display screen an individual product, and integrate product impression(s), product header details, product or service specific data and connected products and solutions, cross sells and up sells.
Specific Web pages:
Procuring Cart: the browsing cart is sometimes shown in condensed sort like a sidebar widget, and at times in expanded variety on the Cart page along with Delivery details,
Checkout: the moment a client is checking out, deal with data is required.
Goods
Item Header
Products Identify – demonstrated within the summary/archive internet pages and single web pages)
Merchandise Feature – demonstrated over the summary/archive web pages and single internet pages
Graphic – Highlighted Graphic displays about the summary, supplemental images on the single
Very long Description – shown within the Solution Description spot, at The underside of solitary product or service web site
Short Description – shown at the top of the single item webpage
Merchandise Groups
each and every class wants a provided group impression and a description
classes might have subcategories, by way of example, Plants can be a group and Trees is actually a sub category. Besides navigation, they behave the identical.
Product Classification archives are instantly created with the next sections:
title (category title)
description (the category description)
just one class thumbnail for every sub class of the current classification
optional solution thumbs (with title, price and Incorporate to Cart) for each merchandise in the current group
Clicking on a group opens a brand new group, clicking a product thumbnail opens the product or service.
Item Internet pages
Solution Internet pages are instantly created with the following sections:
Products Picture(s): the Showcased Image and supplementary illustrations or photos for your product or service.
Item Title
Product or service Cost
Product or service Brief Description
Amount to add to cart (with + and controls)
Incorporate to Cart button
Product SKU (Stock Holding Unit), Groups and Tags
Item Tabs
Description: the merchandise long description, like optional graphic gallery
Further Information and facts: the item Characteristics ticked to display on merchandise web site
Evaluations: optional product or service critiques
Relevant Products
Upsells: ‘You might also 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 instantly picked)
Product Picture presentation selections:
Standard presentation is usually to Display screen the Featured Picture at the best of the merchandise web site, With all the supplementary impression thumbnails beneath in 3 columns of thumbnails
Optional presentation is usually to Display screen the Featured Picture without thumbnails beneath, and to Screen all illustrations or photos in The outline tab.
Item Research
Product or service Search widgets can be found to put in sidebar widgets or footer widgets.
Web page Broad Lookup Selections – these look for widgets can be used on any webpage in the web site:
Products search box (a text lookup box that queries products name, brief description, prolonged description)
Classification drill-down (a dropdown field that allows collection of any group or sub classification)
Product tag cloud
Item Class Research Selections – these look for widgets will only appear when immediately produced merchandise classification archives are increasingly being displayed
Layered Navigation
Item Value Filter: shows a sliding scale letting products and solutions to be filtered to some value selection
Finest Sellers: shows title/thumb/price for automatically selected list of greatest marketing solutions
Showcased Products and solutions: shows title/thumb/price for goods ticked as Featured Items
On Sale: displays items that Have a very Sale Price tag entered Besides their Rate
Styling Solutions
Product thumbs: when products appear as item thumbs, 4 components are displayed: thumbnail, title, value, incorporate to cart. CSS styling can be utilized for:
Merchandise (Every single merchandise team of four aspects): qualifications, merchandise 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 term ‘Sale’ seems about merchandise thumbs on sale – CSS styling may be used: qualifications colour, font colour, border colour, border width, reliable/dashed border, border radius.
Merchandise Versions
A product variation permits a consumer to create a clothes item that is accessible in different colours, or different designs.
When products variants are made more info use of, product or service archive web pages will Screen a ‘Decide on Alternatives’ button as opposed to an Include to Cart button.
In summary, we’ve set out here the foremost features you’ll will need to consider if you are developing a WooCommerce shop. We’ve defined the different types of internet pages, the product or service data plus the lookup and styling choices. Have fun setting up your WooCommerce retail outlet.