A Designer’s Guideline To WooCommerce
WooCommerce gives a wide range of choices that may be configured for client Web sites. This post is for the designer who's developing a WooCommerce retailer from scratch or perhaps a designer who is tailoring an present WooCommerce concept.
The quickest solution to see what characteristics you can find is to visit the Storefront demo inside WooCommerce.
Overview the template to find out how it really works. This document supplies a tad additional information on the sort of styling you may improve in the layouts. It only handles WooCommerce related pages.
Principles
There are a huge number of methods to eCommerce. The WooCommerce plugin is extremely flexible, but just because a function is utilized on a website somewhere does not mean it will be supported by WooCommerce.
By using the attributes and methods supported by WooCommerce, you are able to speed up the process of design and development. Custom modifications is usually manufactured, but normally require more price.
Forms of Webpages
Solution Webpages: you will find 2 kinds of product internet pages you must style and design for:
Merchandise Archive Webpages: these Show thumbnails for accessible product types and/or solutions. Clicking over a group thumbnail exhibits An additional product archive web site, Whilst clicking on an item thumbnail displays the single product web site.
Product or service Solitary Webpages: these display only one product or service, and integrate solution image(s), solution header info, product detailed details and connected items, cross sells and up sells.
Particular Webpages:
Buying Cart: the procuring cart is typically shown in condensed form to be a sidebar widget, and from time to time in expanded sort about the Cart website page along with Shipping details,
Checkout: once a customer is testing, tackle information and facts is necessary.
Solutions
Product Header
Product or service Title – revealed to the summary/archive internet pages and solitary webpages)
Product Attribute – shown over the summary/archive web pages and solitary pages
Impression – Featured Graphic displays around the summary, supplemental photographs on The one
Lengthy Description – shown from the Solution Description area, at The underside of solitary product site
Limited Description – shown at the best of The only product or service webpage
Product Groups
each classification wants a supplied group picture and an outline
classes might have subcategories, by way of example, Plants can be a category and Trees can be a sub category. Aside from navigation, they behave the same.
Merchandise Category archives are routinely generated with the next sections:
title (category title)
description (the classification description)
a single classification thumbnail for each sub classification of the current group
optional product thumbs (with title, price tag and Add to Cart) for each item in The present category
Clicking on the classification opens a fresh classification, clicking a product thumbnail opens the merchandise.
Product Webpages
Products Webpages are mechanically generated with the next sections:
Products Picture(s): the Showcased Image and supplementary photographs with the item.
Product or service Title
Product Price tag
Products Quick Description
Amount to add to cart (with + and controls)
Incorporate to Cart button
Products SKU (Stock Trying to keep Device), Classes and Tags
Merchandise Tabs
Description: the products prolonged description, together with optional image gallery
Added Information and facts: the item Characteristics ticked to Display screen on solution site
Reviews: optional merchandise more info opinions
Associated Merchandise
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Connected Solutions’ accompanied by thumbnails for associated merchandise (assigned as Cross Sells or quickly selected)
Solution Impression presentation solutions:
Regular presentation is usually to Display screen the Featured Picture at the highest of the products page, With all the supplementary impression thumbnails beneath in 3 columns of thumbnails
Optional presentation is always to Exhibit the Showcased Image without any thumbnails beneath, also to Display screen all pictures in the Description tab.
Product or service Look for
Solution Research widgets are offered to position in sidebar widgets or footer widgets.
Website Vast Research Selections – these search widgets can be used on any webpage in the web site:
Product or service look for box (a text lookup box that queries merchandise identify, shorter description, long description)
Class drill-down (a dropdown discipline that enables array of any category or sub category)
Item tag cloud
Solution Group Research Solutions – these search widgets will only appear when immediately produced merchandise group archives are increasingly being exhibited
Layered Navigation
Products Price Filter: displays a sliding scale permitting items to get filtered to your selling price array
Finest Sellers: shows title/thumb/rate for quickly picked list of best selling goods
Featured Goods: displays title/thumb/cost for items ticked as Highlighted Merchandise
On Sale: shows products which Have got a Sale Selling price entered In combination with their Rate
Styling Solutions
Products thumbs: when products and 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 group of 4 components): background, item border, padding, margin
Thumbnail: border, padding, margins
Title: font, weight, colour, size
Rate: font, pounds, colour, sizing
Increase to Cart: button colour, label colour, border, radius
Sale sticker: the term ‘Sale’ seems above solution thumbs on sale – CSS styling can be utilized: background colour, font colour, border colour, border width, solid/dashed border, border radius.
Products Variants
An item variation makes it possible for a consumer to create a clothes product that is available in various colors, or diverse types.
When solution variations are used, products archive internet pages will Screen a ‘Pick Choices’ button rather than an Add 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 store. We’ve stated the differing types of web pages, the item information and also the research and styling alternatives. Have fun setting up your WooCommerce retail outlet.