A Designer’s Manual To WooCommerce
WooCommerce offers a variety of options that may be configured for consumer Internet sites. This post is for your designer that's building a WooCommerce retail store from scratch or a designer who is tailoring an existing WooCommerce theme.
The fastest way to see what features you will find is to visit the Storefront demo inside WooCommerce.
Review the template to determine how it works. This document provides a bit more information on the kind of styling you can change in your designs. It only covers WooCommerce related internet pages.
Concepts
There are actually a big a number of strategies to eCommerce. The WooCommerce plugin is rather adaptable, but Simply because a aspect is made use of on a web site someplace won't 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 process of structure and enhancement. Tailor made modifications is often developed, but usually include extra expense.
Different types of Internet pages
Product or service Web pages: you'll find 2 kinds of products internet pages you have got to layout for:
Solution Archive Pages: these display thumbnails for out there product or service classes and/or goods. Clicking on a classification thumbnail demonstrates One more item archive page, Whilst clicking on an item thumbnail displays the single products site.
Solution Solitary Pages: these Display screen one solution, and incorporate products impression(s), solution header info, products specific details and associated products and solutions, cross sells and up sells.
Exclusive Webpages:
Shopping Cart: the procuring cart is usually displayed in condensed variety being a sidebar widget, and at times in expanded form to the Cart webpage together with Supply data,
Checkout: as soon as a shopper is trying out, address information and facts is needed.
Goods
Products Header
Merchandise Name – revealed within the summary/archive pages and one webpages)
Products Attribute – proven over the summary/archive web pages and single web pages
Picture – Showcased Picture displays about the summary, extra visuals on The only
Prolonged Description – revealed inside the Product Description spot, at the bottom of solitary product site
Brief Description – revealed at the very best of The one solution web site
Solution Types
each and every classification wants a equipped class graphic and a description
types can have subcategories, one example is, Plants is often a category and Trees can be a sub category. Aside from navigation, they behave the same.
Merchandise Classification archives are instantly created with the following sections:
title (group name)
description (the group description)
one class thumbnail for every sub category of the present category
optional solution thumbs (with title, rate and Include to Cart) for every product in The present classification
Clicking on the group opens a brand new group, clicking an item thumbnail opens the item.
Product or service Pages
Solution Internet pages are immediately produced with the following sections:
Product or service Picture(s): the Featured Picture and supplementary illustrations or photos for your merchandise.
Product Title
Solution Selling price
Item Limited Description
Amount to add to cart (with + and controls)
Insert to Cart button
Products SKU (Stock Trying to keep Device), Categories and Tags
Merchandise Tabs
Description: the products lengthy description, like optional graphic gallery
Additional Details: the product or service Attributes ticked to Show on merchandise web site
Critiques: optional merchandise assessments
Related Items
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Related Items’ accompanied by thumbnails for similar products (assigned as Cross Sells or instantly chosen)
Products Image presentation alternatives:
Common presentation should be to display the Featured Picture at the highest of your product web page, Together with the supplementary impression thumbnails beneath in three columns of thumbnails
Optional presentation would be to Show the Highlighted Impression without having thumbnails beneath, and also to Exhibit all visuals in the Description tab.
Item Lookup
Merchandise Research widgets are offered to position in sidebar widgets or footer widgets.
Site Broad Lookup Possibilities – these research widgets may be used on any web site in the web site:
Product search box (a text lookup box that queries product or service identify, shorter description, lengthy description)
Class drill-down (a dropdown discipline that enables number of any classification or sub classification)
Products tag cloud
Product Category Lookup Alternatives – these lookup widgets will only look when routinely produced product or service classification archives are increasingly being exhibited
Layered Navigation
Products Rate Filter: shows a sliding scale allowing products to be filtered to some cost variety
Greatest Sellers: displays title/thumb/value for instantly chosen list of greatest offering items
Highlighted Items: displays title/thumb/value for items read more ticked as Highlighted Items
On Sale: displays products that Possess a Sale Cost entered Along with their Cost
Styling Options
Product thumbs: when products appear as product thumbs, four features are exhibited: thumbnail, title, selling price, insert to cart. CSS styling may be used for:
Merchandise (Each and every solution group of four aspects): qualifications, solution border, padding, margin
Thumbnail: border, padding, margins
Title: font, bodyweight, colour, dimension
Cost: font, excess weight, colour, size
Add to Cart: button colour, label colour, border, radius
Sale sticker: the term ‘Sale’ seems about product or service thumbs on sale – CSS styling may be used: track record colour, font colour, border colour, border width, sound/dashed border, border radius.
Item Variations
A product variation will allow a shopper to put in place a apparel solution that is accessible in different colors, or unique types.
When solution variations are used, products archive web pages will Screen a ‘Pick Choices’ button rather than an Increase to Cart button.
In summary, we’ve established out right here the main elements that you choose to’ll need to have to think about when you're designing a WooCommerce retail outlet. We’ve discussed the different sorts of pages, the products data in addition to the search and styling solutions. Have a great time creating your WooCommerce shop.