A Designer’s Guideline To WooCommerce
WooCommerce offers a wide range of alternatives which can be configured for customer Web-sites. This short article is for any designer who's planning a WooCommerce retail outlet from scratch or simply a designer that's tailoring an existing WooCommerce theme.
The quickest method to see what attributes you'll find is to visit the Storefront demo within WooCommerce.
Overview the template to discover how it really works. This doc delivers a tiny bit more info on the sort of styling you are able to modify within your patterns. It only covers WooCommerce associated pages.
Concepts
You will discover a massive a number of methods to eCommerce. The WooCommerce plugin may be very versatile, but just because a aspect is utilized on a web site somewhere will not necessarily mean Will probably be supported by WooCommerce.
By using the features and techniques supported by WooCommerce, it is possible to quicken the whole process of style and enhancement. Customized modifications can be developed, but frequently contain supplemental price.
Forms of Pages
Product Internet pages: you'll find two varieties of merchandise webpages you must layout for:
Solution Archive Pages: these Exhibit thumbnails for obtainable merchandise groups and/or products. Clicking on the group thumbnail shows One more product archive website page, whereas clicking on an item thumbnail shows The only product website page.
Item Solitary Web pages: these Show only one solution, and incorporate merchandise graphic(s), item header information and facts, product or service in depth info and related merchandise, cross sells and up sells.
Particular Internet pages:
Purchasing Cart: the searching cart is sometimes displayed in condensed form to be a sidebar widget, and in some cases in expanded sort about the Cart site along with Supply information and facts,
Checkout: at the time a consumer is testing, tackle details is needed.
Merchandise
Product or service Header
Products Name – shown within the summary/archive web pages and one internet pages)
Product Attribute – revealed around the summary/archive webpages and single pages
Picture – Highlighted Graphic displays on the summary, added illustrations or photos on The one
Long Description – shown inside the Products Description region, at The underside of single solution web site
Quick Description – revealed at the top of The one product website page
Product Groups
every group requirements a equipped category graphic and a description
classes might have subcategories, such as, Crops is a category and Trees can be a sub group. Besides navigation, they behave the exact same.
Product or service Classification archives are quickly produced with the next sections:
title (class name)
description (the class description)
one particular group thumbnail for every sub category of the current group
optional product or service thumbs (with title, rate and Increase to Cart) for each solution in The present classification
Clicking on the class opens a brand new category, clicking a product thumbnail opens the product.
Products Pages
Product Pages are automatically created with the subsequent sections:
Product or service Impression(s): the Highlighted Picture and supplementary photographs with the item.
Product or read more service Title
Product Cost
Item Shorter Description
Quantity to include to cart (with + and controls)
Add to Cart button
Merchandise SKU (Inventory Retaining Device), Classes and Tags
Merchandise Tabs
Description: the products lengthy description, together with optional impression gallery
Supplemental Information and facts: the products Characteristics ticked to Show on merchandise page
Critiques: optional merchandise assessments
Associated Merchandise
Upsells: ‘You may also like’ followed by thumbs/titles for upsells
Cross sells: ‘Relevant Products and solutions’ followed by thumbnails for relevant products and solutions (assigned as Cross Sells or instantly picked)
Products Picture presentation possibilities:
Conventional presentation would be to Screen the Showcased Graphic at the top in the product or service page, With all the supplementary graphic thumbnails underneath in three columns of thumbnails
Optional presentation would be to Show the Featured Picture without thumbnails beneath, and also to display all photographs in The outline tab.
Products Search
Solution Look for widgets can be found to position in sidebar widgets or footer widgets.
Web page Large Lookup Solutions – these lookup widgets can be employed on any webpage in the website:
Solution research box (a textual content search box that queries product title, shorter description, prolonged description)
Classification drill-down (a dropdown discipline that allows array of any class or sub class)
Item tag cloud
Product or service Class Research Options – these research widgets will only surface when routinely created solution classification archives are now being displayed
Layered Navigation
Product or service Value Filter: displays a sliding scale allowing for merchandise to become filtered into a cost array
Greatest Sellers: displays title/thumb/cost for immediately selected list of greatest offering merchandise
Highlighted Merchandise: shows title/thumb/price tag for merchandise ticked as Highlighted Merchandise
On Sale: shows items that Have a very Sale Price tag entered Besides their Selling price
Styling Selections
Product or service thumbs: when solutions show up as product or service thumbs, four things are shown: thumbnail, title, price tag, incorporate to cart. CSS styling may be used for:
Solution (Each and every solution group of 4 components): background, product border, padding, margin
Thumbnail: border, padding, margins
Title: font, excess weight, colour, size
Rate: font, pounds, colour, sizing
Increase to Cart: button colour, label colour, border, radius
Sale sticker: the term ‘Sale’ seems in excess of 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 customer to put in place a apparel solution that is accessible in different colours, or distinctive layouts.
When product or service versions are utilised, solution archive webpages will Show a ‘Choose Solutions’ button in lieu of an Insert to Cart button.
In summary, we’ve set out right here the major features you’ll need to have to think about when you're designing a WooCommerce retail store. We’ve spelled out the different sorts of webpages, the item information and also the research and styling possibilities. Have a good time developing your WooCommerce retail store.