A Designer’s Guideline To WooCommerce
WooCommerce offers a wide range of choices which can be configured for customer Internet websites. This information is for a designer who is creating a WooCommerce retail store from scratch or simply a designer who is tailoring an existing WooCommerce theme.
The quickest way to see what features you will find is to visit the Storefront demo inside WooCommerce.
Evaluation the template to determine how it works. This document provides a little more information on the kind of styling you can alter inside your styles. It only covers WooCommerce associated pages.
Principles
There are a huge variety of approaches to eCommerce. The WooCommerce plugin is very adaptable, but Because a aspect is applied on a web site someplace isn't going to indicate It's going to be supported by WooCommerce.
By using the functions and methods supported by WooCommerce, you are able to speed up the whole process of structure and advancement. Custom made modifications is often manufactured, but normally require more price.
Forms of Web pages
Solution Webpages: you'll find two forms of merchandise webpages you will have to design and style for:
Item Archive Pages: these Display screen thumbnails for out there products groups and/or items. Clicking on the category thumbnail shows A further product or service archive website page, While clicking on a product thumbnail displays The only product or service site.
Solution Solitary Pages: these Screen a single product, and incorporate solution picture(s), product header information and facts, products in-depth data and connected goods, cross sells and up sells.
Unique Pages:
Procuring Cart: the browsing cart is usually shown in condensed form to be a sidebar widget, and often in expanded sort within the Cart web page together with Supply facts,
Checkout: after a consumer is testing, tackle data is required.
Products
Product or service Header
Solution Name – shown on the summary/archive internet pages and single pages)
Products Attribute – demonstrated around the summary/archive pages and single internet pages
Graphic – Highlighted Picture shows to the summary, extra illustrations or photos on The only
Prolonged Description – proven in the Products Description place, at the bottom of one merchandise page
Small Description – proven at the best of The only product site
Solution Types
each and every classification demands a supplied group image and an outline
categories may have subcategories, for example, Vegetation is really a group and Trees is really a sub group. Other than navigation, they behave the exact same.
Item Group archives are immediately created with the following sections:
title (group name)
description (the group description)
one classification thumbnail for each sub classification of the current group
optional item thumbs (with title, price tag and Add to Cart) for every products in The present classification
Clicking on the group opens a brand new group, clicking an item thumbnail opens the solution.
Products Webpages
Product or service Pages are routinely created with the following sections:
Product or service Image(s): the Highlighted Graphic and supplementary pictures for that product.
Solution Title
Products Cost
Product or service Short Description
Quantity to include to cart (with + and controls)
Add to Cart button
Solution SKU (Inventory Maintaining Unit), Types and Tags
Item Tabs
Description: the merchandise extensive description, such as optional impression gallery
Supplemental Info: the merchandise Characteristics ticked to Show on merchandise web site
Critiques: optional merchandise assessments
Associated Merchandise
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Relevant Products and solutions’ followed by thumbnails for connected solutions (assigned as Cross Sells or automatically chosen)
Products Image presentation alternatives:
Typical presentation is to Show the Highlighted Graphic at the top in the product or service page, With all the supplementary impression thumbnails beneath in three columns of thumbnails
Optional presentation is always to Show the Showcased Impression without thumbnails beneath, and to display all images in the Description tab.
Products Look get more info for
Products Look for widgets are offered to position in sidebar widgets or footer widgets.
Internet site Extensive Research Selections – these research widgets may be used on any webpage in the website:
Product lookup box (a text lookup box that queries product or service identify, short description, lengthy description)
Class drill-down (a dropdown discipline that enables number of any classification or sub classification)
Product tag cloud
Item Class Lookup Possibilities – these lookup widgets will only show up when automatically produced product group archives are being exhibited
Layered Navigation
Merchandise Cost Filter: shows a sliding scale enabling products being filtered into a price array
Very best Sellers: shows title/thumb/price tag for instantly picked list of greatest providing goods
Showcased Goods: shows title/thumb/cost for solutions ticked as Showcased Merchandise
On Sale: shows items that have a Sale Selling price entered Together with their Rate
Styling Possibilities
Product thumbs: when solutions appear as merchandise thumbs, four factors are exhibited: thumbnail, title, value, add to cart. CSS styling may be used for:
Item (Each individual merchandise group of four factors): background, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, bodyweight, colour, size
Selling price: font, bodyweight, colour, size
Insert to Cart: button colour, label colour, border, radius
Sale sticker: the phrase ‘Sale’ seems above products thumbs on sale – CSS styling can be utilized: history colour, font colour, border colour, border width, strong/dashed border, border radius.
Product or service Variations
An item variation enables a customer to setup a garments item that is on the market in different colors, or different patterns.
When products variations are employed, merchandise archive internet pages will Show a ‘Opt for Options’ button as opposed to an Increase to Cart button.
In summary, we’ve set out in this article the key features that you simply’ll will need to think about when you find yourself coming up with a WooCommerce store. We’ve defined the different sorts of internet pages, the product info plus the research and styling solutions. Have fun creating your WooCommerce keep.