A Designer’s Manual To WooCommerce
WooCommerce gives a wide range of alternatives which can be configured for customer Internet websites. This information is for a designer who is creating a WooCommerce shop from scratch or perhaps a designer who's tailoring an existing WooCommerce concept.
The quickest strategy to see what capabilities there are actually is to go to the Storefront demo inside of WooCommerce.
Review the template to see how it works. This document offers a little more details on the type of styling you are able to modify within your patterns. It only addresses WooCommerce connected webpages.
Ideas
You will find an enormous number of methods to eCommerce. The WooCommerce plugin is extremely flexible, but just because a feature is used on a web site someplace won't signify Will probably be supported by WooCommerce.
By utilizing the characteristics and ways supported by WooCommerce, you'll be able to accelerate the entire process of design and style and advancement. Customized modifications may be created, but frequently involve additional expenditure.
Different types of Internet pages
Product or service Web pages: you can find two sorts of solution webpages you will have to design for:
Product Archive Internet pages: these Exhibit thumbnails for readily available merchandise classes and/or goods. Clicking on a classification thumbnail reveals A further product or service archive website page, While clicking on a product thumbnail displays The one product or service website page.
Solution Single Pages: these Display screen one solution, and incorporate product graphic(s), product or service header data, solution comprehensive information and facts and linked merchandise, cross sells and up sells.
Particular Pages:
Procuring Cart: the browsing cart is usually displayed in condensed variety for a sidebar widget, and often in expanded type on the Cart site along with Shipping and delivery information,
Checkout: the moment a buyer is checking out, handle data is needed.
Products
Products Header
Merchandise Name – revealed to the summary/archive webpages and one web pages)
Solution Feature – demonstrated within the summary/archive pages and one webpages
Graphic – Highlighted Picture shows about the summary, extra visuals on The only
Lengthy Description – revealed inside the Product Description place, at the bottom of one merchandise web page
Shorter Description – proven at the top of The only item web site
Merchandise Categories
just about every class requires a provided category impression and a description
types can have subcategories, such as, Vegetation is a group and Trees is really a sub group. Apart from navigation, they behave a similar.
Solution Category archives are routinely generated with the next sections:
title (category title)
description (the category description)
one particular category thumbnail for every sub category of the present category
optional merchandise thumbs (with title, price and Incorporate to Cart) for each merchandise in the current group
Clicking on a class opens a completely new class, clicking an item thumbnail opens the solution.
Products Webpages
Product or service Pages are mechanically generated with the next sections:
Product Impression(s): the Featured Picture and supplementary visuals for your products.
Item Title
Product or service Cost
Merchandise Short Description
Quantity so as to add to cart (with + and controls)
Include to Cart button
Product or service SKU (Stock Retaining Device), Categories and Tags
Merchandise Tabs
Description: the product extended description, which include optional image gallery
Further Facts: the product Attributes ticked to Exhibit on product webpage
Opinions: optional product evaluations
Linked Products
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Similar Goods’ accompanied by thumbnails for similar goods (assigned as Cross Sells or instantly picked)
Product Picture presentation possibilities:
Typical presentation is to Show the Highlighted Graphic at the top from the merchandise site, with the supplementary picture thumbnails underneath in three columns of thumbnails
Optional presentation should be to display the Featured Impression without thumbnails beneath, and to Show all photos in The outline tab.
Products Search
Item Lookup widgets can be obtained to position in sidebar widgets or footer widgets.
Web page Wide Lookup Alternatives – these research widgets can be employed on any web site in the website:
Item lookup box (a text research box that lookups products identify, short description, lengthy description)
Class drill-down more info (a dropdown discipline that enables number of any classification or sub category)
Item tag cloud
Item Class Research Possibilities – these research widgets will only surface when quickly created product category archives are being displayed
Layered Navigation
Solution Value Filter: displays a sliding scale making it possible for solutions being filtered to the rate vary
Best Sellers: displays title/thumb/price for automatically selected list of very best promoting goods
Featured Items: displays title/thumb/value for items ticked as Highlighted Items
On Sale: displays items that Possess a Sale Value entered As well as their Value
Styling Alternatives
Solution thumbs: when items seem as solution thumbs, 4 components are displayed: thumbnail, title, cost, add to cart. CSS styling can be used for:
Product (each product group of four features): history, products border, padding, margin
Thumbnail: border, padding, margins
Title: font, pounds, colour, sizing
Selling price: font, body weight, colour, dimensions
Incorporate to Cart: button colour, label colour, border, radius
Sale sticker: the phrase ‘Sale’ appears over product thumbs on sale – CSS styling can be employed: history colour, font colour, border colour, border width, stable/dashed border, border radius.
Product or service Versions
A product variation enables a client to set up a outfits products that is on the market in several colours, or various designs.
When product variants are applied, merchandise archive webpages will Show a ‘Choose Options’ button rather then 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 pages, the products facts plus the lookup and styling options. Have some fun creating your WooCommerce retailer.