A Designer’s Guidebook To WooCommerce

WooCommerce gives a wide range of choices which can be configured for consumer Sites. This information is for just a designer who is designing a WooCommerce store from scratch or perhaps a designer who is tailoring an existing WooCommerce theme.

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

Evaluation 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 associated pages.
Principles

There are a huge variety of approaches to eCommerce. The WooCommerce plugin is very adaptable, but Because a element is applied on a web site someplace isn't going to suggest It'll be supported by WooCommerce.

By using the attributes and approaches supported by WooCommerce, you can speed up the whole process of structure and progress. Personalized modifications might be made, but usually include additional expenditure.
Different types of Web pages

Merchandise Webpages: you will find 2 styles of products web pages you need to style for:

Item Archive Pages: these Display screen thumbnails for readily available solution classes and/or products. Clicking with a group thumbnail displays An additional product archive web site, Whilst clicking on a product thumbnail displays The one product or service website page.
Item Single Internet pages: these Exhibit an individual item, and incorporate products impression(s), item header information, products thorough details and related products and solutions, cross sells and up sells.

Specific Webpages:

Shopping Cart: the browsing cart is usually displayed in condensed variety being a sidebar widget, and occasionally in expanded variety to the Cart website page along with Supply information and facts,
Checkout: after a client is checking out, handle data is required.

Products and solutions

Merchandise Header

Item Identify – demonstrated within the summary/archive pages and one webpages)
Product Element – proven on the summary/archive web pages and single internet pages
Impression – Featured Graphic displays over the summary, added pictures on The one
Extended Description – revealed while in the Item Description place, at the bottom of one solution page
Small Description – shown at the best of the single products webpage

Product Groups

every group requirements a provided class picture and a description
types can have subcategories, such as, Vegetation is really a classification and Trees is actually a sub classification. Aside from navigation, they behave a similar.

Solution Classification archives are instantly created with the following sections:

title (group title)
description (the classification description)
a single classification thumbnail for each sub group of the current group
optional products thumbs (with title, value and Increase to Cart) for each products in the current group

Clicking on a group opens a new group, clicking an item thumbnail opens the solution.
Product or service Webpages

Product or service Web pages are automatically produced with the subsequent sections:

Solution Graphic(s): the Featured Impression and supplementary visuals for your product or service.
Product Title
Merchandise Rate
Solution Shorter Description
Quantity to include to cart (with + and controls)
Increase to Cart button
Solution SKU (Inventory Keeping Device), Types and Tags
Item Tabs
Description: the product or service long description, like optional graphic gallery
Further Information and facts: the solution Attributes ticked to Exhibit on product webpage
Assessments: optional item testimonials
Similar Merchandise
Upsells: ‘You may also like’ followed by thumbs/titles for upsells
Cross sells: ‘Connected Merchandise’ followed by thumbnails for similar goods (assigned as Cross Sells or routinely selected)

Merchandise Graphic presentation choices:

Common presentation should be to Show the Highlighted Graphic at the top from the merchandise web site, Using the supplementary picture thumbnails beneath in three columns of thumbnails
Optional presentation is to Show the Highlighted Graphic with no thumbnails underneath, also to Display screen all pictures in the Description tab.

Merchandise Look for

Product Lookup widgets can be check here found to put in sidebar widgets or footer widgets.

Web page Wide Lookup Possibilities – these research widgets can be employed on any page in the website:

Merchandise research box (a textual content search box that searches solution title, shorter description, long description)
Category drill-down (a dropdown discipline that enables array of any category or sub category)
Solution tag cloud

Merchandise Group Look for Options – these search widgets will only seem when routinely produced product or service classification archives are increasingly being displayed

Layered Navigation
Product Cost Filter: displays a sliding scale making it possible for solutions being filtered to the price variety
Greatest Sellers: displays title/thumb/value for routinely chosen listing of finest advertising 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

Solution thumbs: when merchandise look as merchandise thumbs, four aspects are shown: thumbnail, title, value, incorporate to cart. CSS styling can be utilized for:
Solution (Each and every solution group of 4 components): background, product border, padding, margin
Thumbnail: border, padding, margins
Title: font, weight, colour, size
Price: font, weight, colour, sizing
Increase to Cart: button colour, label colour, border, radius

Sale sticker: the term ‘Sale’ seems in excess of merchandise thumbs on sale – CSS styling may be used: track record colour, font colour, border colour, border width, sound/dashed border, border radius.
Item Variations

A product variation will allow a shopper to build a garments merchandise that is offered in numerous colours, or different designs.

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

In summary, we’ve established out right here the main elements that you choose to’ll will need to consider when you find yourself creating a WooCommerce store. We’ve stated the differing types of web pages, the solution information as well as the look for and styling possibilities. Have a good time developing your WooCommerce retail store.