A Designer’s Manual To WooCommerce
WooCommerce supplies an array of selections which might be configured for consumer Sites. This information is for a designer who is developing a WooCommerce retailer from scratch or possibly a designer that is tailoring an present WooCommerce topic.
The fastest solution to see what features you will find is to visit the Storefront demo inside WooCommerce.
Assessment the template to find out how it 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
You will find a massive selection of ways to eCommerce. The WooCommerce plugin is quite versatile, but Simply because a characteristic is employed on an internet site somewhere doesn't imply It'll be supported by WooCommerce.
By using the attributes and ways supported by WooCommerce, you'll be able to quicken the process of style and improvement. Customized modifications may be produced, but often contain supplemental expenditure.
Sorts of Web pages
Merchandise Web pages: you'll find 2 types of item pages you must structure for:
Product or service Archive Web pages: these Screen thumbnails for obtainable item categories and/or products and solutions. Clicking with a group thumbnail displays Yet another item archive page, 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), products header information and facts, product or service thorough info and related solutions, cross sells and up sells.
Particular Pages:
Procuring Cart: the browsing cart is usually displayed in condensed sort like a sidebar widget, and sometimes in expanded variety about the Cart web page along with Shipping info,
Checkout: at the time a buyer is looking at, handle data is required.
Products and solutions
Merchandise Header
Item Identify – demonstrated around the summary/archive internet pages and solitary pages)
Product or service Characteristic – revealed about the summary/archive pages and one webpages
Graphic – Highlighted Image shows around the summary, supplemental photographs on the single
Very long Description – proven during the Merchandise Description area, at The underside of single product or service webpage
Short Description – shown at the highest of the single merchandise page
Product or service Categories
just about every category desires a supplied group image and an outline
categories may have subcategories, for example, Vegetation is usually a class and Trees is usually a sub class. In addition to navigation, they behave the identical.
Products Class archives are mechanically generated with the next sections:
title (category title)
description (the classification description)
a single classification thumbnail for each sub group of the present class
optional product or service thumbs (with title, cost and Insert to Cart) for each merchandise in The existing class
Clicking over a category opens a fresh classification, clicking a product thumbnail opens the merchandise.
Product Webpages
Product or service Pages are routinely created with the following sections:
Product or service Image(s): the Highlighted Impression and supplementary images to the product or service.
Item Title
Merchandise Rate
Product Shorter Description
Quantity to incorporate to cart (with + and controls)
Increase to Cart button
Item SKU (Stock Preserving Unit), Classes and Tags
Product or service Tabs
Description: the product extended description, which include optional image gallery
Further Data: the products Attributes ticked to Screen on product or service page
Evaluations: optional product or service reviews
Associated Merchandise
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Associated Merchandise’ accompanied by thumbnails for related goods (assigned as Cross Sells or routinely picked)
Product Image presentation alternatives:
Typical presentation should be to display the Highlighted Impression at the best of your item webpage, Along with the supplementary graphic thumbnails underneath in 3 columns of thumbnails
Optional presentation is always to Screen the Showcased Graphic with no thumbnails underneath, and to Screen all photographs in The outline tab.
Products Search
Item Lookup widgets can be obtained to put in sidebar widgets or footer widgets.
Web-site Large Search Choices – these lookup widgets may be used on any site in the web site:
Merchandise research box (a text research box that queries solution identify, limited description, extended description)
Category drill-down (a dropdown area that allows number of any classification or sub group)
Solution tag cloud
Product Category Look for Possibilities – these search widgets will only surface when routinely generated products class archives are being shown
Layered Navigation
Item Rate Filter: shows a sliding scale permitting products and solutions to get filtered to a selling price assortment
Best Sellers: shows title/thumb/cost for quickly chosen listing of ideal selling solutions
Highlighted Products and solutions: displays title/thumb/cost for goods ticked as Showcased Merchandise
On Sale: displays products which have a Sale Selling price entered As well as their Rate
Styling Alternatives
Product thumbs: when merchandise appear as solution thumbs, four factors are exhibited: thumbnail, title, price, add to cart. CSS styling can be used for:
Product (each item group of 4 elements): history, products check here border, padding, margin
Thumbnail: border, padding, margins
Title: font, weight, colour, dimension
Value: font, fat, colour, sizing
Add to Cart: button colour, label colour, border, radius
Sale sticker: the word ‘Sale’ seems around product or service thumbs on sale – CSS styling can be used: background colour, font colour, border colour, border width, solid/dashed border, border radius.
Product Variants
A product variation allows a shopper to arrange a garments merchandise that is offered in numerous colours, or various designs.
When item variations are employed, solution archive webpages will Screen a ‘Decide on Possibilities’ button as an alternative to an Insert to Cart button.
In summary, we’ve set out here the foremost elements you’ll need to have to think about when you find yourself creating a WooCommerce retail store. We’ve spelled out the different types of internet pages, the product or service details in addition to the search and styling solutions. Have a great time creating your WooCommerce retailer.