A Designer’s Tutorial To WooCommerce

WooCommerce supplies an array of possibilities that could be configured for shopper websites. This informative article is for the designer that is coming up with a WooCommerce retail store from scratch or simply a designer that's tailoring an present WooCommerce topic.

The quickest way to see what attributes you'll find is to visit the Storefront demo inside WooCommerce.

Assessment the template to find out how it works. This document offers a little more details on the kind of styling you are able to alter inside your styles. It only covers WooCommerce related internet pages.

You will discover a large assortment of ways to eCommerce. The WooCommerce plugin is quite flexible, but just because a feature is made use of on a web site someplace isn't going to suggest It'll be supported by WooCommerce.

By using the features and strategies supported by WooCommerce, you could hasten the entire process of design and style and improvement. Custom modifications can be manufactured, but generally require further cost.
Kinds of Pages

Products Internet pages: you will discover 2 types of product internet pages you have got to design and style for:

Item Archive Pages: these Display screen thumbnails for offered solution categories and/or products and solutions. Clicking over a class thumbnail shows A further product or service archive webpage, whereas clicking on an item thumbnail shows The only product web site.
Merchandise Solitary Pages: these Exhibit an individual item, and include product or service picture(s), product header information and facts, merchandise comprehensive information and facts and linked items, cross sells and up sells.

Special Internet pages:

Searching Cart: the buying cart is typically shown in condensed type as a sidebar widget, and in some cases in expanded sort within the Cart page along with Shipping and delivery information,
Checkout: the moment a client is checking out, tackle info is necessary.


Item Header

Product or service Title – revealed about the summary/archive pages and one webpages)
Products Attribute – shown to the summary/archive webpages and one webpages
Graphic – Highlighted Image shows on the summary, more pictures on The one
Extended Description – revealed while in the Product Description region, at The underside of single item web page
Limited Description – demonstrated at the top of The one solution page

Merchandise Groups

every group requirements a equipped class graphic and an outline
categories may have subcategories, for instance, Crops is really a classification and Trees is actually a sub classification. Aside from navigation, they behave the same.

Product or service Category archives are mechanically generated with the subsequent sections:

title (group title)
description (the classification description)
one particular class thumbnail for every sub class of the current group
optional product thumbs (with title, selling price and Add to Cart) for every product in The present classification

Clicking on the classification opens a brand new classification, clicking a product thumbnail opens the product or service.
Product Web pages

Product Webpages are quickly generated with the subsequent sections:

Product Impression(s): the Showcased Picture and supplementary illustrations or photos for the merchandise.
Products Title
Item Selling price
Product Limited Description
Amount to incorporate to cart (with + and controls)
Insert to Cart button
Product SKU (Inventory Holding Unit), Types and Tags
Merchandise Tabs
Description: the products extended description, together with optional image gallery
Added Information: the product or service Attributes ticked to Exhibit on item website page
Reviews: optional product or service critiques
Related Items
Upsells: ‘You may also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Related Items’ accompanied by thumbnails for related items (assigned as Cross Sells or mechanically picked)

Item Impression presentation solutions:

Regular presentation is usually to Display screen the Featured Impression at the best of the solution site, Using the supplementary picture thumbnails beneath in three columns of thumbnails
Optional presentation is to Screen the Highlighted Graphic with no thumbnails beneath, also to display all photos in the Description tab.

Product Lookup

Product or service Look for widgets are available to put in sidebar widgets or footer widgets.

Internet site Large Search Choices – these research widgets may be used on any web site in the website:

Item lookup box (a textual content research box that lookups product name, quick description, prolonged description)
Group drill-down (a dropdown industry that allows choice of any class or sub group)
Merchandise tag cloud

Product or service Classification Search Choices – these lookup widgets will only look when routinely created products classification archives are being displayed

Layered Navigation
Item Value Filter: shows a sliding scale letting products and solutions to generally be filtered to a price variety
Greatest Sellers: displays title/thumb/value for routinely chosen listing of finest providing products and solutions
Showcased Products: displays title/thumb/price for goods ticked as Featured Goods
On Sale: displays products that Possess a Sale Value entered As well as their Value

Styling Alternatives

Merchandise thumbs: when solutions show up as product or service thumbs, four things are exhibited: thumbnail, title, rate, increase to cart. CSS styling can be employed for:
Product or service (Just about every product or service team of four things): qualifications, merchandise border, padding, margin
Thumbnail: border, padding, margins
Title: font, fat, colour, dimensions
Price tag: font, fat, colour, measurement
Incorporate to Cart: button colour, label colour, border, radius

Sale sticker: the phrase ‘Sale’ appears more than read more item thumbs on sale – CSS styling can be used: background colour, font colour, border colour, border width, solid/dashed border, border radius.
Product Variations

An item variation will allow a customer to build a apparel solution that is obtainable in numerous colours, or different designs.

When products variants are utilised, merchandise archive webpages will Show a ‘Choose Options’ button rather then an Insert to Cart button.

In summary, we’ve established out listed here the main elements that you choose to’ll have to have to consider if you are developing a WooCommerce shop. We’ve explained the differing types of web pages, the merchandise details as well as the look for and styling selections. Rejoice developing your WooCommerce store.

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