A Designer’s Tutorial To WooCommerce

WooCommerce presents a variety of options that can be configured for consumer 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 you could modify as part of your designs. It only covers WooCommerce related pages.

You will find an enormous number of methods to eCommerce. The WooCommerce plugin is quite versatile, 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 can speed up the whole process of structure and enhancement. Tailor made modifications is usually generated, but generally require added price.
Varieties of Webpages

Item Pages: there are two styles of product or service web pages you need to design and style for:

Solution Archive Pages: these display thumbnails for out there products groups and/or merchandise. Clicking on the class thumbnail shows A further products archive site, While clicking on a product thumbnail displays The one product or service website page.
Solution Single Internet pages: these Screen just one product, and include merchandise picture(s), product header information and facts, merchandise in depth information and similar merchandise, cross sells and up sells.

Particular Pages:

Browsing Cart: the searching cart is sometimes exhibited in condensed kind as being a sidebar widget, and sometimes in expanded sort within the Cart page along with Shipping and delivery information,
Checkout: the moment a buyer is checking out, handle details is required.


Solution Header

Product Identify – proven on the summary/archive web pages and single internet pages)
Merchandise Function – revealed within the summary/archive pages and solitary pages
Graphic – Highlighted Graphic displays on the summary, more photos on The one
Prolonged Description – shown from the Solution Description space, at the bottom of single merchandise web page
Small Description – proven at the best of The only products website page

Product Groups

each group requirements a equipped class graphic and a description
types can have subcategories, one example is, Plants is often a class and Trees is usually a sub class. In addition to navigation, they behave the identical.

Products Class archives are quickly produced with the subsequent sections:

title (class identify)
description (the category description)
just one category thumbnail for every sub category of the current classification
optional solution thumbs (with title, selling price and Include to Cart) for every item in The present category

Clicking over a category opens a whole new classification, clicking a product thumbnail opens the product or service.
Item Web pages

Product Webpages are quickly generated with the next sections:

Product Picture(s): the Showcased Image and supplementary photographs for the solution.
Product or service Title
Item Price tag
Product Quick Description
Amount to add to cart (with + and controls)
Incorporate to Cart button
Products SKU (Stock Trying to keep Device), Categories and Tags
Merchandise Tabs
Description: the products lengthy description, like optional graphic gallery
Extra Facts: the product Attributes ticked to Exhibit on product webpage
Opinions: optional product critiques
Relevant Products
Upsells: ‘You may also like’ followed by thumbs/titles for upsells
Cross sells: ‘Linked Products’ followed by thumbnails for relevant products and solutions (assigned as Cross Sells or immediately chosen)

Product or service Graphic presentation choices:

Normal presentation will be 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 Graphic with no 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 used on any web page in the website:

Merchandise research box (a textual content look for box that lookups product name, quick description, prolonged description)
Group drill-down (a dropdown subject which allows selection of any category or sub category)
Item tag cloud

Solution Class Research Selections – these look for widgets will only surface when quickly generated product category archives are being displayed

Layered Navigation
Solution Value Filter: displays a sliding scale making it possible for merchandise being filtered to your rate vary
Most effective Sellers: shows title/thumb/price for automatically selected list of best promoting goods
Featured Goods: displays title/thumb/cost for goods ticked as Featured Goods
On Sale: displays products that have a Sale Price entered Along with their Cost

Styling Choices

Item thumbs: when goods appear as product thumbs, 4 elements are exhibited: thumbnail, title, selling price, insert to cart. CSS styling may be used for:
Merchandise (Each and every solution group of 4 features): history, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, body weight, colour, dimensions
Price tag: font, bodyweight, colour, dimension
Include to Cart: button colour, label colour, border, radius

Sale sticker: the word ‘Sale’ seems about product or service thumbs on sale – CSS styling may be used: track record colour, font colour, border colour, border width, strong/dashed border, border radius.
Item Variants

An item variation lets a customer to create a clothes product that is out there in various colors, or distinct styles.

When product variants are applied, merchandise archive webpages will display a ‘Pick out Solutions’ button in lieu of an Incorporate to Cart button.

In summary, we’ve set out here the foremost aspects which you’ll require to think about while you are coming up with a WooCommerce retailer. We’ve defined the different types of web more info pages, the merchandise info as well as the look for and styling possibilities. Have a good time building your WooCommerce retail outlet.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Comments on “A Designer’s Tutorial To WooCommerce”

Leave a Reply