A Designer’s Guide To WooCommerce



WooCommerce offers a variety of options that may be configured for consumer Sites. This text is for just a designer who is creating a WooCommerce shop from scratch or even a designer who's tailoring an current WooCommerce concept.

The fastest strategy to see what capabilities there are actually is to go to the Storefront demo inside of WooCommerce.

Evaluate the template to see how it works. This document provides a little more information on the kind of styling you are able to modify within your patterns. It only addresses WooCommerce connected webpages.
Ideas

You'll find a tremendous assortment of ways to eCommerce. The WooCommerce plugin is incredibly versatile, but Simply because a characteristic is employed on an internet site somewhere will not imply It will likely be supported by WooCommerce.

By using the attributes and approaches supported by WooCommerce, you are able to speed up the process of design and enhancement. Tailor made modifications is usually generated, but generally require added price.
Varieties of Webpages

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

Item Archive Pages: these Display screen thumbnails for out there product or service groups and/or items. Clicking on the category thumbnail shows A further product or service archive website page, While clicking on a product thumbnail shows The one merchandise webpage.
Item Single Internet pages: these Exhibit an individual item, and incorporate products impression(s), solution header info, product in-depth data and connected goods, cross sells and up sells.

Special Internet pages:

Searching Cart: the buying cart is sometimes exhibited in condensed kind as being a sidebar widget, and sometimes in expanded variety about the Cart web page together with Shipping details,
Checkout: as soon as a shopper is trying out, deal with information is necessary.

Items

Item Header

Products Title – proven over the summary/archive web pages and single internet pages)
Merchandise Characteristic – shown to the summary/archive webpages and one web pages
Image – Showcased Picture displays to the summary, further images on The one
Extended Description – revealed while in the Item Description space, at the bottom of single product or service webpage
Shorter Description – demonstrated at the top of The one solution web site

Merchandise Categories

just about every class requires a provided category impression and a description
groups can have subcategories, such as, Vegetation is a group and Trees is a sub group. Apart from navigation, they behave a similar.

Solution Classification archives are instantly created with the next sections:

title (category title)
description (the classification description)
one particular category thumbnail for every sub category of the current classification
optional merchandise thumbs (with title, price and Insert to Cart) for each product or service in the current group

Clicking on a group opens a new group, clicking an item thumbnail opens the solution.
Products Webpages

Products Webpages are quickly generated with the subsequent sections:

Item Impression(s): the Featured Picture and supplementary visuals for your product or service.
Item Title
Product or service Cost
Merchandise Short Description
Quantity so as to add to cart (with + and controls)
Include to Cart button
Product or service SKU (Stock Retaining Device), Categories and Tags
Merchandise Tabs
Description: the product extended description, together with optional image gallery
Added Information: the solution Characteristics ticked to display on solution web site
Critiques: optional merchandise reviews
Connected Solutions
Upsells: ‘You may also like’ followed by thumbs/titles for upsells
Cross sells: ‘Linked Products’ followed by thumbnails for linked products and solutions (assigned as Cross Sells or instantly chosen)

Products Image presentation possibilities:

Conventional presentation would be to Screen the Showcased Image at the very best on the products web page, Together with the supplementary graphic thumbnails beneath in 3 columns of thumbnails
Optional presentation is always to Exhibit the Showcased Image without any thumbnails beneath, also to display all photos in The outline tab.

Product or service Search

Item Research widgets can be obtained to position in sidebar widgets or footer widgets.

Site Vast Research Selections – these search widgets can be used on any webpage in the web site:

Product or service look for box (a text lookup box that queries merchandise identify, shorter description, lengthy description)
Class drill-down (a dropdown discipline that enables array of any category or sub category)
Solution tag cloud

Merchandise Group Look for Solutions – these search widgets will only seem when instantly produced product or service classification archives are increasingly being exhibited

Layered Navigation
Product Cost Filter: displays a sliding scale enabling merchandise being filtered to the rate range
Very best Sellers: displays title/thumb/value for instantly chosen listing of ideal providing products and solutions
Showcased Products and solutions: displays title/thumb/price for goods ticked as Featured Goods
On Sale: displays products that Possess a Sale Value entered As well as their Price tag

Styling Possibilities

Merchandise thumbs: when solutions show up as product or service thumbs, four things are exhibited: thumbnail, title, selling price, insert to cart. CSS styling can be employed for:
Product or service (Each individual products team of four things): qualifications, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, body weight, colour, dimensions
Selling price: font, body weight, colour, dimensions
Insert to Cart: button colour, label colour, border, radius

Sale sticker: the phrase ‘Sale’ appears above solution thumbs on sale – CSS styling can be utilized: track record colour, font colour, border colour, border width, strong/dashed border, border radius.
Item Variations

A product variation will allow a shopper to arrange a garments product or service that is on the market in several colours, here or distinct styles.

When item variations are used, products archive internet pages will Exhibit a ‘Decide on Possibilities’ button as opposed to an Include to Cart button.

In summary, we’ve set out here the foremost things you’ll need to have to think about when you're designing a WooCommerce store. We’ve stated the differing types of webpages, the solution info as well as the look for and styling selections. Rejoice developing your WooCommerce store.

Leave a Reply

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