A Designer’s Tutorial To WooCommerce



WooCommerce presents a wide array of solutions that can be configured for client Web sites. This post is for your designer that's creating a WooCommerce keep from scratch or simply a designer that's tailoring an existing WooCommerce theme.

The quickest method to see what functions you can find is to go to the Storefront demo within WooCommerce.

Overview the template to discover how it really works. This doc delivers a little bit additional information on the sort of styling you may improve in the layouts. It only handles WooCommerce related pages.
Principles

There are a huge variety of methods to eCommerce. The WooCommerce plugin is extremely flexible, but just because a function is utilized on a website somewhere does not mean it will be supported by WooCommerce.

By using the features and strategies supported by WooCommerce, you'll be able to quicken the process of style and improvement. Personalized modifications can be made, but frequently include added expense.
Forms of Web pages

Merchandise Webpages: you'll find 2 kinds of product internet pages you must style and design for:

Merchandise Archive Webpages: these Show thumbnails for accessible product types and/or products and solutions. Clicking over a group thumbnail exhibits An additional product archive web site, Whilst clicking on an item thumbnail displays the single products site.
Merchandise Solitary Pages: these display only one product, and incorporate product graphic(s), product or service header data, item detailed information and facts and linked merchandise, cross sells and up sells.

Unique Pages:

Browsing Cart: the searching cart is usually displayed in condensed sort being a sidebar widget, and at times in expanded form over the Cart site together with Delivery information and facts,
Checkout: after a client is checking out, handle data is required.

Products and solutions

Merchandise Header

Item Identify – demonstrated around the summary/archive internet pages and solitary pages)
Product or service Characteristic – proven on the summary/archive web pages and single internet pages
Picture – Featured Impression displays over the summary, added pictures on The one
Extended Description – shown from the Solution Description space, at The underside of single product or service web page
Shorter Description – proven at the top of The only product site

Item Types

each and every classification wants a supplied group image and an outline
categories may have subcategories, for instance, 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 classification of the current group
optional item thumbs (with title, price tag and Add to Cart) for every product in The present classification

Clicking on the classification opens a fresh classification, clicking a product thumbnail opens the merchandise.
Product Web pages

Products Webpages are automatically produced with the subsequent sections:

Solution Impression(s): the Featured Picture and supplementary visuals for the merchandise.
Products Title
Solution Selling price
Product Quick Description
Amount to add to cart (with + and controls)
Incorporate to Cart button
Product or service SKU (Stock Retaining Device), Categories and Tags
Item Tabs
Description: the product or service long description, which includes optional impression gallery
Supplemental Info: the merchandise Characteristics ticked to display on solution site
Reviews: optional item testimonials
Similar Products
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Similar Goods’ accompanied by thumbnails for linked products (assigned as Cross Sells or instantly chosen)

Products Image presentation alternatives:

Typical presentation is to Show the Highlighted Graphic at the top in the product or service web site, with the supplementary picture thumbnails beneath in three columns of thumbnails
Optional presentation will be to display the Highlighted Impression without having thumbnails beneath, and to display all photos in the Description tab.

Product or service Look for

Products website Search widgets can be found to put in sidebar widgets or footer widgets.

Internet site Huge Look for Solutions – these search widgets can be used on any webpage in the website:

Merchandise research box (a textual content look for box that lookups product name, brief description, extended description)
Class drill-down (a dropdown discipline that enables number of any classification or sub classification)
Product tag cloud

Product Category Search Alternatives – these lookup widgets will only look when routinely produced product or service group archives are increasingly being exhibited

Layered Navigation
Products Rate Filter: shows a sliding scale allowing for products to be filtered to a price variety
Very best Sellers: displays title/thumb/cost for immediately selected list of very best promoting goods
Featured Goods: displays title/thumb/cost for goods ticked as Featured Products
On Sale: displays products that Have got a Sale Rate entered In combination with their Rate

Styling Options

Product thumbs: when products and solutions surface as products thumbs, four things are shown: thumbnail, title, price tag, incorporate to cart. CSS styling can be utilized for:
Product or service (Each individual products team of four things): qualifications, merchandise border, padding, margin
Thumbnail: border, padding, margins
Title: font, fat, colour, dimensions
Price tag: font, bodyweight, colour, dimension
Include to Cart: button colour, label colour, border, radius

Sale sticker: the word ‘Sale’ appears around product or service thumbs on sale – CSS styling may be used: qualifications colour, font colour, border colour, border width, sound/dashed border, border radius.
Solution Variations

A product variation will allow a shopper to put in place a apparel solution that is accessible in different colors, or unique types.

When solution variations are used, products archive web pages will Screen a ‘Pick out Selections’ button as an alternative to an Incorporate to Cart button.

In summary, we’ve set out here the foremost features that you just’ll need to have to think about when you are building a WooCommerce retail outlet. We’ve discussed the different sorts of pages, the products facts plus the lookup and styling options. Have some fun constructing your WooCommerce retailer.

Leave a Reply

Your email address will not be published. Required fields are marked *