A Designer’s Manual To WooCommerce
WooCommerce presents a wide array of solutions that can be configured for client Internet sites. This post is for your designer that's building a WooCommerce retail store from scratch or a designer who is tailoring an existing WooCommerce theme.
The quickest way to see what features you will find is to visit the Storefront demo inside WooCommerce.
Evaluation the template to determine how it works. This document offers a little more information on the kind of styling you are able to alter inside your styles. It only covers WooCommerce associated pages.
Principles
There are a huge variety of approaches to eCommerce. The WooCommerce plugin may be very adaptable, but Because a element is applied on an internet site someplace will not suggest It'll be supported by WooCommerce.
By using the attributes and approaches supported by WooCommerce, you can increase the whole process of style and design and progress. Custom made modifications might be made, but frequently involve additional expenditure.
Sorts of Web pages
Merchandise Webpages: you will find 2 styles of product or service web pages you need to design and style for:
Item Archive Pages: these Display screen thumbnails for readily available merchandise classes and/or goods. Clicking with a classification thumbnail displays Yet another item archive page, Whilst clicking on a product 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 related solutions, cross sells and up sells.
Specific Pages:
Procuring Cart: the browsing cart is usually displayed in condensed sort like a sidebar widget, and occasionally in expanded variety about the Cart web page along with Shipping details,
Checkout: once a purchaser is looking at, address facts is needed.
Products
Product or service Header
Solution Name – demonstrated within the summary/archive internet pages and solitary pages)
Products Attribute – shown to the summary/archive webpages and one web pages
Image – Showcased Picture shows about the summary, extra illustrations or photos on The only
Long Description – demonstrated within the Product or service Description location, at The underside of solitary product site
Brief Description – revealed at the very best of The one solution web site
Solution Types
each and every classification wants a equipped class graphic and a description
types can have subcategories, such as, Plants is often a class and Trees is often a sub category. Besides navigation, they behave exactly the same.
Product or service 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 present class
optional product or service thumbs (with title, cost and Insert to Cart) for each merchandise in The existing class
Clicking over a category opens a whole new classification, clicking a product thumbnail opens the product or service.
Item Web pages
Products Webpages are mechanically generated with the next sections:
Products Image(s): the Highlighted Graphic and supplementary pictures for that product.
Solution Title
Product or service Price
Solution Small Description
Quantity to incorporate to cart (with + and controls)
Insert to Cart button
Product SKU (Stock Preserving Unit), Classes and Tags
Product or service Tabs
Description: the product extended description, which include optional image gallery
Extra Data: the products Attributes ticked to Screen on products web page
Testimonials: optional products reviews
Connected Solutions
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Connected Solutions’ accompanied by thumbnails for associated items (assigned as Cross Sells or mechanically picked)
Item Picture presentation selections:
Conventional presentation would be to Screen the Highlighted Graphic at the top from the solution site, While using the supplementary image thumbnails underneath in 3 columns of thumbnails
Optional presentation is usually to Display screen the Showcased Image without any thumbnails underneath, and also to Exhibit all visuals in the Description tab.
Item Lookup
Merchandise Look for widgets are offered to place in sidebar widgets or footer widgets.
Website Vast Research Selections – these look for widgets can be employed on any page in the website:
Item lookup box (a text look for box that lookups product name, quick description, extended description)
Group drill-down (a dropdown subject which allows array of any category or sub category)
Item tag cloud
Item Class Lookup Possibilities – these research widgets will only show up when mechanically created products classification archives are being displayed
Layered Navigation
Product Cost Filter: displays a sliding scale permitting items for being filtered into a price tag selection
Ideal Sellers: shows title/thumb/price tag for routinely chosen listing of ideal providing solutions
Showcased Solutions: shows title/thumb/price tag for solutions ticked as Highlighted Merchandise
On Sale: shows items that Have a very Sale Price tag entered Together with their Value
Styling Alternatives
Solution thumbs: when items seem as solution thumbs, 4 components are displayed: thumbnail, title, price, add to cart. CSS styling can be employed for:
Products (Each individual product or service team of four factors): track record, solution border, padding, margin
Thumbnail: border, padding, margins
Title: font, excess weight, colour, size
Price: font, weight, colour, sizing
Insert to Cart: button colour, label colour, border, radius
Sale sticker: the term ‘Sale’ seems above solution thumbs on sale – CSS styling can be used: background colour, font colour, border colour, border width, good/dashed border, border radius.
Products Variants
An item variation permits a client to set up a outfits product or service that is on the market in several colours, or various designs.
When products variants are utilised, solution archive pages will display a ‘Pick out Selections’ button as an alternative to an Incorporate to Cart button.
In summary, we’ve set out in this article the most important aspects which you’ll require to consider read more if you find yourself planning a WooCommerce retailer. We’ve defined the differing types of web pages, the solution info as well as the look for and styling possibilities. Have a good time building your WooCommerce retail outlet.