A Designer’s Guidebook To WooCommerce
WooCommerce gives a wide range of alternatives which can be configured for customer Internet websites. This article is to get a designer who's developing a WooCommerce retailer from scratch or possibly a designer that is tailoring an current WooCommerce concept.
The fastest strategy to see what capabilities you will discover is to go to the Storefront demo inside of WooCommerce.
Evaluate the template to check out how it really works. This doc presents a tiny bit more info on the sort of styling you could improve in the layouts. It only handles WooCommerce similar internet pages.
Concepts
You will discover a large range of techniques to eCommerce. The WooCommerce plugin is rather versatile, but Simply because a attribute is employed on an internet site somewhere doesn't imply It will likely be supported by WooCommerce.
By using the features and strategies supported by WooCommerce, you could hasten the whole process of layout and growth. Custom made modifications could be created, but frequently involve supplemental expenditure.
Sorts of Web pages
Solution Pages: there are two varieties of merchandise webpages you will have to style for:
Product Archive Internet pages: these Exhibit thumbnails for offered solution categories and/or products. Clicking with a group thumbnail displays An additional product archive web site, While clicking on a product thumbnail displays The one merchandise webpage.
Item One Web pages: these Screen just one product, and include solution image(s), product header facts, merchandise comprehensive information and linked merchandise, cross sells and up sells.
Unique Internet pages:
Browsing Cart: the purchasing cart is sometimes exhibited in condensed kind as being a sidebar widget, and in some cases in expanded sort within the Cart page along with Shipping and delivery information,
Checkout: the moment a client is checking out, handle details is required.
Solutions
Merchandise Header
Item Identify – proven on the summary/archive internet pages and solitary pages)
Product or service Characteristic – revealed about the summary/archive webpages and one webpages
Image – Showcased Picture shows within the summary, additional illustrations or photos on the single
Extensive Description – proven in the Product or service Description region, at The underside of solitary products website page
Brief Description – demonstrated at the very best of The one solution web site
Merchandise Categories
just about every category desires a supplied classification picture and an outline
classes might have subcategories, as an example, Crops is actually a classification and Trees can be a sub category. Aside from navigation, they behave the same.
Merchandise Category archives are routinely generated with the next sections:
title (classification title)
description (the classification description)
a single classification thumbnail for each sub group of the current group
optional product thumbs (with title, price tag and Add to Cart) for each products in The present classification
Clicking on the classification opens a brand new group, clicking a product thumbnail opens the merchandise.
Product Webpages
Products Webpages are mechanically generated with the next sections:
Products Picture(s): the Showcased Image and supplementary photographs with the solution.
Product or service Title
Item Price tag
Products Quick Description
Amount to include to cart (with + and controls)
Incorporate to Cart button
Products SKU (Stock Preserving Unit), Classes and Tags
Product or service Tabs
Description: the item prolonged description, together with optional picture gallery
Added Information and facts: the solution Characteristics ticked to Show on product page
Assessments: optional products assessments
Associated Merchandise
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Connected Solutions’ followed by thumbnails for connected solutions (assigned as website Cross Sells or automatically selected)
Merchandise Graphic presentation options:
Normal presentation is usually to Display screen the Featured Picture at the highest of your product webpage, Together with the supplementary graphic thumbnails underneath in 3 columns of thumbnails
Optional presentation is always to Exhibit the Showcased Image without any thumbnails underneath, and also to Display screen all images in the Description tab.
Solution Research
Products Search widgets are available to put in sidebar widgets or footer widgets.
Internet site Large Search Choices – these lookup widgets may be used on any site in the web site:
Products search box (a text lookup box that queries merchandise identify, shorter description, long description)
Category drill-down (a dropdown area that permits variety of any classification or sub classification)
Product tag cloud
Item Category Lookup Alternatives – these research widgets will only show up when mechanically created products category archives are being displayed
Layered Navigation
Item Value Filter: displays a sliding scale making it possible for merchandise being filtered to the rate vary
Best Sellers: displays title/thumb/price for immediately selected list of very best promoting items
Highlighted Items: displays title/thumb/value for items ticked as Highlighted Items
On Sale: displays items that Have a very Sale Value entered As well as their Value
Styling Alternatives
Solution thumbs: when items look as solution thumbs, 4 factors are displayed: thumbnail, title, cost, include to cart. CSS styling can be used for:
Item (Every product group of four features): history, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, body weight, colour, dimensions
Price tag: font, fat, colour, measurement
Incorporate to Cart: button colour, label colour, border, radius
Sale sticker: the word ‘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.
Merchandise Versions
A product variation enables a client to arrange a outfits product or service that is on the market in several colours, or various designs.
When products variants are applied, merchandise archive webpages will Show a ‘Choose Solutions’ button in lieu of 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 discussed the different sorts of pages, the product facts plus the lookup and styling options. Have some fun making your WooCommerce retailer.