A Designer’s Guideline 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 planning a WooCommerce retail store from scratch or simply a designer that's tailoring an present WooCommerce topic.
The fastest way to see what attributes you'll find is to visit the Storefront demo within WooCommerce.
Assessment the template to find out how it works. This document gives somewhat more details on the kind of styling you'll be able to modify within your styles. It only covers WooCommerce associated pages.
Principles
You will find a huge variety of approaches to eCommerce. The WooCommerce plugin is very flexible, but Because a aspect is applied on a web site someplace isn't going to indicate It's going to be supported by WooCommerce.
By using the attributes and methods supported by WooCommerce, you can speed up the whole process of structure and progress. Personalized modifications might be made, but usually include extra expense.
Different types of Internet pages
Product or service Web pages: you'll find 2 kinds of products internet pages you have got to design and style for:
Solution Archive Pages: these Display screen thumbnails for readily available merchandise classes and/or goods. Clicking on a classification thumbnail demonstrates Yet another item archive page, Whilst clicking on an item thumbnail displays the single product or service website page.
Solution Single Internet pages: these Exhibit an individual item, and include product or service picture(s), item header information and facts, product or service in depth info and similar solutions, cross sells and up sells.
Specific Pages:
Procuring Cart: the browsing cart is usually displayed in condensed sort being a sidebar widget, and occasionally in expanded variety about the Cart webpage along with Shipping details,
Checkout: once a purchaser is looking at, address facts is needed.
Products
Product or service Header
Solution Name – demonstrated around the summary/archive internet pages and solitary pages)
Product or service Characteristic – shown to the summary/archive webpages and one web pages
Image – Showcased Picture shows about the summary, extra visuals on The only
Long Description – demonstrated within the Products Description location, at the bottom of solitary item site
Quick Description – revealed at the very best of The one merchandise page
Product or service Categories
each individual class needs a provided category impression and a description
groups can have subcategories, by way of example, Plants is often a category and Trees is often a sub classification. Besides navigation, they behave precisely the same.
Item Group archives are instantly created with the following sections:
title (classification name)
description (the group description)
1 classification thumbnail for each sub group of the current group
optional product thumbs (with title, selling price and Include to Cart) for every product in The present category
Clicking over a classification opens a fresh classification, clicking a product thumbnail opens the merchandise.
Product Webpages
Products Webpages are routinely created with the next sections:
Product or service Image(s): the Highlighted Graphic and supplementary images to the products.
Item Title
Merchandise Rate
Solution Small Description
Amount to incorporate to cart (with + and controls)
Insert to Cart button
Products SKU (Stock Trying to keep Device), Classes and Tags
Product or service Tabs
Description: the products extended description, like optional graphic gallery
Extra Data: the products Attributes ticked to Screen on product or service page
Critiques: optional merchandise assessments
Associated Merchandise
Upsells: ‘You may additionally like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Associated Merchandise’ accompanied by thumbnails for similar goods (assigned as Cross Sells or instantly picked)
Products Image presentation alternatives:
Common presentation should be to display the Highlighted Impression at the best of the item webpage, Along with the supplementary graphic thumbnails underneath in 3 columns of thumbnails
Optional presentation is usually to Exhibit the Showcased Image with no thumbnails underneath, and also to Exhibit all visuals in the Description tab.
Item Lookup
Solution Research widgets can be obtained to position in sidebar widgets or footer widgets.
Site Broad Lookup Alternatives – these research widgets may be used on any site in the web site:
Product search box (a text lookup box that queries merchandise title, small description, extensive description)
Classification drill-down (a dropdown field that allows choice of any class or sub group)
Merchandise tag cloud
Product or service Classification Look for Options – these search widgets will only appear when immediately produced solution class archives are now being shown
Layered Navigation
Merchandise Price tag Filter: shows a sliding scale letting solutions to generally be filtered to the price range
Best Sellers: displays title/thumb/cost for instantly selected list of greatest offering items
Highlighted Merchandise: shows title/thumb/price tag for merchandise ticked as Highlighted Merchandise
On website Sale: displays items that Have a very Sale Value entered As well as their Value
Styling Alternatives
Solution thumbs: when items seem as item thumbs, 4 components are displayed: thumbnail, title, price, add to cart. CSS styling can be used for:
Product (each products team of four aspects): qualifications, solution border, padding, margin
Thumbnail: border, padding, margins
Title: font, bodyweight, colour, dimension
Cost: font, weight, colour, sizing
Increase to Cart: button colour, label colour, border, radius
Sale sticker: the term ‘Sale’ seems in excess of merchandise thumbs on sale – CSS styling can be utilized: track record colour, font colour, border colour, border width, strong/dashed border, border radius.
Item Variations
An item variation lets a customer to put in place a apparel item that is accessible in different colors, or diverse patterns.
When solution variations are used, products archive web pages will Screen a ‘Pick Choices’ button rather than an Increase to Cart button.
In summary, we’ve established out right here the major features you’ll need to have to think about when you're building a WooCommerce retail outlet. We’ve discussed the different types of pages, the product or service data in addition to the search and styling solutions. Have a great time creating your WooCommerce store.