A Designer’s Guidebook To WooCommerce
WooCommerce presents a wide array of alternatives which might be configured for client Internet sites. This text is for just a designer who is creating a WooCommerce shop from scratch or even a designer that is tailoring an current WooCommerce concept.
The fastest technique to see what options there are is to visit the Storefront demo inside WooCommerce.
Review the template to determine how it works. This document gives somewhat more details on the type of styling it is possible to transform inside your patterns. It only addresses WooCommerce similar pages.
Principles
You will find a massive selection of methods 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 methods supported by WooCommerce, you are able to quicken the process of design and development. Custom modifications is usually created, but frequently involve additional expenditure.
Different types of Internet pages
Product or service Web pages: you can find 2 sorts of item pages you will need to design for:
Products Archive Internet pages: these Exhibit thumbnails for offered solution classes and/or goods. Clicking on a classification thumbnail demonstrates One more solution archive web page, whereas clicking on an item thumbnail shows The only solution web page.
Product One Web pages: these Screen just one product, and include product or service impression(s), solution header information, products specific data and connected goods, cross sells and up sells.
Special Web pages:
Searching Cart: the buying cart is sometimes exhibited in condensed kind as being a sidebar widget, and sometimes in expanded variety about the Cart webpage together with Supply data,
Checkout: as soon as a customer is trying out, deal with information is necessary.
Merchandise
Item Header
Product Title – proven on the summary/archive internet pages and solitary pages)
Product or service Characteristic – shown to the summary/archive webpages and single web pages
Picture – Featured Impression displays over the summary, more photos on The one
Prolonged Description – proven during the Merchandise Description region, at The underside of solitary product site
Brief Description – revealed at the highest of the single product or service webpage
Products Groups
each group wants a equipped class image and an outline
categories might have subcategories, for instance, Crops is actually a classification and Trees can be a sub category. Besides navigation, they behave exactly the same.
Products Class archives are quickly produced with the subsequent sections:
title (class identify)
description (the class description)
a person class thumbnail for every sub class of the present class
optional products thumbs (with title, price tag and Add to Cart) for each products in The present classification
Clicking on a group opens a new group, clicking an item thumbnail opens the solution.
Products Webpages
Product or service Pages are routinely created with the following sections:
Product or service Image(s): the Highlighted Graphic and supplementary photos for that item.
Merchandise Title
Products Value
Product or service Brief Description
Amount so as to add to cart (with + and controls)
Include to Cart button
Merchandise SKU (Inventory Maintaining Device), Types and Tags
Solution Tabs
Description: the product or service long description, which includes optional graphic gallery
Additional Details: the products Attributes ticked to Screen on product or service page
Evaluations: optional product or service reviews
Connected Solutions
Upsells: ‘You may also like’ followed by thumbs/titles for upsells
Cross sells: ‘Relevant Products and solutions’ followed by thumbnails for connected solutions (assigned as Cross Sells or automatically selected)
Merchandise Graphic presentation options:
Regular presentation is usually to Exhibit the Showcased Image at the very best on the product or service page, Using the supplementary picture thumbnails beneath in three columns of thumbnails
Optional presentation should be to display the Featured Picture without thumbnails beneath, also to display all pictures in the Description tab.
Merchandise Research
Products Search widgets are available to place in sidebar widgets or footer widgets.
Web site Extensive Look for Solutions – these search widgets can be used on any web page in the website:
Merchandise research box (a textual content look for box that lookups product name, brief description, extended description)
Class drill-down (a dropdown discipline that enables number of any classification or sub classification)
Product tag cloud
Product Category Lookup Alternatives – these lookup widgets will only website look when routinely produced product or service classification archives are increasingly being exhibited
Layered Navigation
Products Rate Filter: shows a sliding scale allowing goods to become filtered to some cost assortment
Greatest Sellers: displays title/thumb/value for routinely chosen list of greatest offering merchandise
Highlighted Merchandise: shows title/thumb/price tag for merchandise ticked as Highlighted Items
On Sale: displays items that Possess a Sale Cost entered Along with their Cost
Styling Choices
Item thumbs: when goods appear as product thumbs, 4 elements are exhibited: thumbnail, title, rate, increase to cart. CSS styling can be employed for:
Product or service (Just about every merchandise team of 4 components): background, product border, padding, margin
Thumbnail: border, padding, margins
Title: font, weight, colour, size
Rate: font, pounds, colour, dimensions
Insert to Cart: button colour, label colour, border, radius
Sale sticker: the phrase ‘Sale’ appears more than item thumbs on sale – CSS styling can be used: history colour, font colour, border colour, border width, good/dashed border, border radius.
Product or service Versions
A product variation enables a client to set up a outfits product or service that is offered in numerous colours, or different layouts.
When products versions are utilised, solution archive pages will Display screen 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 simply’ll need to consider if you find yourself planning a WooCommerce shop. We’ve explained the differing types of web pages, the solution information and also the research and styling alternatives. Have a good time building your WooCommerce retail outlet.