A Designer’s Information To WooCommerce
WooCommerce supplies an array of possibilities which might be configured for shopper Sites. This information is for a designer who is developing a WooCommerce keep from scratch or possibly a designer that is tailoring an present WooCommerce topic.
The fastest way to see what features you will find is to visit the Storefront demo within WooCommerce.
Assessment the template to view how it really works. This doc supplies a little bit more info on the sort of styling you could improve in your designs. It only covers WooCommerce related pages.
Principles
You will find an enormous number of methods to eCommerce. The WooCommerce plugin is quite flexible, but just because a function is utilized on a website somewhere doesn't imply It will likely be supported by WooCommerce.
By using the features and approaches supported by WooCommerce, you'll be able to accelerate the entire process of style and improvement. Customized modifications may be created, but often involve additional expenditure.
Different types of Web pages
Product or service Web pages: you can find 2 types of item pages you must structure for:
Product or service Archive Web pages: these Screen thumbnails for obtainable solution categories and/or products. Clicking with a classification thumbnail demonstrates Yet another solution archive web page, whereas clicking on an item thumbnail shows The only item page.
Products One Web pages: these Show a single products, and include merchandise picture(s), product header information and facts, product in depth data and associated products, cross sells and up sells.
Distinctive Web pages:
Purchasing Cart: the buying cart is typically exhibited in condensed kind as being a sidebar widget, and in some cases in expanded sort about the Cart web page along with Shipping details,
Checkout: once a shopper is trying out, address information and facts is needed.
Items
Merchandise Header
Product Name – shown on the summary/archive pages and solitary pages)
Product or service Attribute – proven to the summary/archive webpages and one pages
Image – Highlighted Impression displays around the summary, further pictures on the single
Long Description – revealed during the Product or service Description place, at The underside of solitary solution web page
Brief Description – shown at the best of The only solution web page
Product Types
just about every group demands a provided class image and an outline
types may have subcategories, as an example, Plants is a classification and Trees is often a sub class. Apart from navigation, they behave the same.
Products Group archives are instantly created with the next sections:
title (class name)
description (the classification description)
one particular class thumbnail for each sub classification of the present class
optional product thumbs (with title, rate and Incorporate to Cart) for each product in The existing class
Clicking on a category opens a whole new category, clicking an item thumbnail opens the merchandise.
Item Internet pages
Product or service Webpages are routinely created with the following sections:
Solution Graphic(s): the Featured Image and supplementary visuals to the product.
Product or service Title
Item Selling price
Solution Shorter Description
Quantity so as to add to cart (with + and controls)
Incorporate to Cart button
Product SKU (Stock Holding Unit), Types and Tags
Solution Tabs
Description: the here products extended description, together with optional picture gallery
More Info: the product or service Attributes ticked to Exhibit on product website page
Assessments: optional solution opinions
Associated Merchandise
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Linked Products’ followed by thumbnails for linked products (assigned as Cross Sells or instantly picked)
Product Picture presentation possibilities:
Conventional presentation would be to Screen the Showcased Image at the very best in the product or service page, Together with the supplementary graphic thumbnails underneath in 3 columns of thumbnails
Optional presentation is usually to Display screen the Featured Picture without thumbnails beneath, also to Show all photographs in The outline tab.
Products Search
Item Lookup widgets can be obtained to position in sidebar widgets or footer widgets.
Web-site Wide Search Choices – these lookup widgets may be used on any site in the web site:
Products look for box (a textual content lookup box that searches products identify, limited description, prolonged description)
Class drill-down (a dropdown discipline that permits collection of any class or sub class)
Solution tag cloud
Solution Class Lookup Choices – these search widgets will only appear when automatically created products classification archives are increasingly being shown
Layered Navigation
Solution Value Filter: displays a sliding scale allowing products to generally be filtered to the selling price selection
Ideal Sellers: displays title/thumb/value for automatically picked listing of greatest offering goods
Showcased Solutions: shows title/thumb/value for goods ticked as Showcased Solutions
On Sale: displays products that Have got a Sale Price tag entered As well as their Price
Styling Solutions
Merchandise thumbs: when items appear as product or service thumbs, 4 components are exhibited: thumbnail, title, price tag, add to cart. CSS styling can be employed for:
Merchandise (Every products group of four factors): background, products border, padding, margin
Thumbnail: border, padding, margins
Title: font, fat, colour, dimension
Price: font, body weight, colour, measurement
Add to Cart: button colour, label colour, border, radius
Sale sticker: the term ‘Sale’ appears around merchandise thumbs on sale – CSS styling can be utilized: history colour, font colour, border colour, border width, reliable/dashed border, border radius.
Product Variants
A product variation will allow a consumer to set up a garments item that is out there in several colors, or diverse designs.
When product or service variations are applied, solution archive internet pages will Screen a ‘Pick out Possibilities’ button rather than an Incorporate to Cart button.
In summary, we’ve established out listed here the foremost factors that you choose to’ll need to have to consider when you're planning a WooCommerce retail outlet. We’ve explained the different types of webpages, the product or service information in addition to the research and styling solutions. Have a good time constructing your WooCommerce retail store.