A Designer’s Tutorial To WooCommerce
WooCommerce supplies an array of selections which might be configured for client Internet sites. This text is for just a designer who is creating a WooCommerce retailer from scratch or possibly a designer that is tailoring an present WooCommerce topic.
The quickest method to see what functions you can find is to go to the Storefront demo inside of WooCommerce.
Critique the template to check out how it works. This document offers a little more details on the type of styling it is possible to transform as part of your layouts. It only handles WooCommerce related pages.
Rules
You can find a large range of strategies to eCommerce. The WooCommerce plugin may be very adaptable, but Because a feature is used on a website somewhere does not mean It will likely be supported by WooCommerce.
By using the attributes and methods supported by WooCommerce, you are able to quicken the process of design and style and advancement. Customized modifications could be made, but usually include extra cost.
Kinds of Pages
Item Pages: there are 2 styles of products internet pages you must style and design for:
Product or service Archive Web pages: these Screen thumbnails for offered solution classes and/or goods. Clicking on a category thumbnail shows another products archive web site, whereas clicking on an item thumbnail shows The only solution web page.
Item Single Internet pages: these Exhibit one merchandise, and incorporate merchandise graphic(s), item header facts, product specific information and related merchandise, cross sells and up sells.
Specific Webpages:
Shopping Cart: the procuring cart is typically shown in condensed type as being a sidebar widget, and sometimes in expanded variety around the Cart page along with Supply facts,
Checkout: when a client is checking out, handle data is needed.
Goods
Products Header
Merchandise Title – revealed to the summary/archive webpages and single internet pages)
Merchandise Feature – revealed about the summary/archive webpages and one web pages
Picture – Featured Impression displays over the summary, added pictures on The one
Very long Description – shown during the Merchandise Description region, at The underside of solitary product site
Quick Description – shown at the highest of the single products website page
Item Types
every single category desires a provided classification impression and a description
types may have subcategories, for instance, Crops is actually a classification and Trees can be a sub category. Besides navigation, they behave the identical.
Product Group archives are immediately created with the following sections:
title (classification title)
description (the classification description)
a single category thumbnail for every sub category of the present category
optional merchandise thumbs (with title, cost and Insert to Cart) for each products in The present classification
Clicking on the classification opens a fresh classification, clicking a product thumbnail opens the products.
Solution Internet pages
Merchandise Internet pages are routinely created with the next sections:
Products Picture(s): the Showcased Picture and supplementary visuals for your product or service.
Item Title
Product or service Cost
Product or service Brief Description
Amount to add to cart (with + and controls)
Incorporate to Cart button
Product SKU (Stock Holding Unit), Groups and Tags
Product Tabs
Description: the merchandise lengthy description, like optional image gallery
Further Information and facts: the solution Characteristics ticked to display on merchandise web site
Evaluations: optional product or service critiques
Relevant Products
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Related Items’ accompanied by thumbnails for associated merchandise (assigned as Cross Sells or quickly selected)
Merchandise Graphic presentation choices:
Typical presentation is to Show the Showcased Graphic at the very best on the products web page, Together with the supplementary graphic thumbnails underneath in 3 website columns of thumbnails
Optional presentation will be to display the Featured Impression without having thumbnails underneath, and to Screen all visuals in the Description tab.
Solution Research
Products Search widgets can be found to put in sidebar widgets or footer widgets.
Web page Broad Lookup Selections – these look for widgets can be used on any webpage in the web site:
Product or service search box (a text lookup box that queries products name, brief description, extended description)
Group drill-down (a dropdown industry that allows choice of any group or sub classification)
Product tag cloud
Item Class Research Selections – these look for widgets will only appear when immediately produced merchandise classification archives are increasingly being displayed
Layered Navigation
Item Value Filter: shows a sliding scale letting products and solutions to generally be filtered to a cost variety
Greatest Sellers: displays title/thumb/price tag for mechanically picked listing of most effective advertising products
Featured Goods: displays title/thumb/cost for items ticked as Highlighted Items
On Sale: displays items that Have a very Sale Price tag entered Together with their Selling price
Styling Selections
Product or service thumbs: when solutions surface as products thumbs, four features are exhibited: thumbnail, title, rate, increase to cart. CSS styling can be used for:
Products (Each individual products team of four features): history, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, body weight, colour, dimensions
Selling price: font, body weight, colour, dimensions
Insert to Cart: button colour, label colour, border, radius
Sale sticker: the phrase ‘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
A product variation will allow a shopper to arrange a garments product or service that is offered in several colours, or various styles.
When item variations are made use of, products archive internet pages will Exhibit a ‘Opt for Possibilities’ button as opposed to an Include to Cart button.
In summary, we’ve set out in this article the most important aspects that you just’ll want to think about when you are building a WooCommerce retail outlet. We’ve discussed the different sorts of pages, the products facts plus the lookup and styling choices. Have some fun making your WooCommerce keep.