A Designer’s Guidebook To WooCommerce



WooCommerce presents a wide array of solutions that can be configured for client Internet sites. This text is for your designer that's designing a WooCommerce shop from scratch or perhaps a designer who's tailoring an current WooCommerce concept.

The quickest strategy to see what capabilities you will discover is to go to the Storefront demo inside of WooCommerce.

Evaluate the template to see how it works. This document supplies a little bit more info on the sort of styling you could improve in the designs. It only covers WooCommerce related pages.
Principles

There are a huge variety of approaches to eCommerce. The WooCommerce plugin is very flexible, but just because a feature is used on a website someplace would not necessarily mean It will probably be supported by WooCommerce.

By utilizing the options and strategies supported by WooCommerce, you may hasten the whole process of style and design and growth. Custom made modifications might be made, but usually include extra expense.
Types of Internet pages

Products Internet pages: you will discover two sorts of solution 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 reveals 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 sort about the Cart web page along with Shipping details,
Checkout: as soon as a shopper is trying out, tackle details is required.

Solutions

Solution Header

Item Identify – demonstrated around the summary/archive internet pages and solitary pages)
Products Attribute – shown over the summary/archive web pages and single internet pages
Picture – Featured Impression displays over the summary, added pictures on The one
Prolonged Description – shown during the Merchandise Description region, at The underside of solitary products website page
Brief Description – revealed at the very best of the single merchandise web page

Products Classes

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

Products Class archives are automatically produced with the following sections:

title (group name)
description (the group description)
one group thumbnail for each sub group of the current group
optional product thumbs (with title, value and Increase to Cart) for each product or service in the current group

Clicking on a group opens a completely new class, clicking an item thumbnail opens the item.
Product or service Pages

Merchandise Pages are instantly created with the following sections:

Merchandise Image(s): the Highlighted Graphic and supplementary pictures for that product.
Solution Title
Products Cost
Product or service Short Description
Quantity so as to add to cart (with + and controls)
Add to Cart button
Merchandise SKU (Inventory Maintaining Device), Types and Tags
Item Tabs
Description: the merchandise extensive description, which includes optional impression gallery
Additional Details: the product or service Attributes ticked to Screen on product or service page
Evaluations: optional product or service reviews
Related Solutions
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Relevant Products and solutions’ followed by thumbnails for similar goods (assigned as Cross Sells or immediately chosen)

Product or service Image presentation alternatives:

Typical presentation would be to Screen the Showcased Image at the very best with the product webpage, Along with the supplementary graphic thumbnails underneath in 3 columns of thumbnails
Optional presentation is usually to Display screen the Featured Picture without thumbnails beneath, also to Show all visuals in the Description tab.

Item Research

Product or service Search widgets can be found to put in sidebar widgets or footer widgets.

Web-site Large Lookup Alternatives – these look for widgets can be used on any webpage in the web site:

Item lookup box (a textual content look for box that queries product identify, quick description, extensive description)
Category drill-down (a dropdown subject that allows selection of any group or sub category)
Merchandise tag cloud

Products Classification Search Alternatives – these research widgets will only show up when routinely generated products category archives are being shown

Layered Navigation
Products Selling price Filter: displays a sliding scale making it possible for products and solutions to be filtered to some value selection
Finest Sellers: shows title/thumb/rate for automatically selected list of greatest marketing merchandise
Showcased Products and solutions: shows title/thumb/price for items ticked as Highlighted Merchandise
On Sale: shows products which Use a Sale Rate entered In combination with their Rate

Styling Options

Item thumbs: when merchandise show up as product or service thumbs, four things are exhibited: thumbnail, title, rate, increase to cart. CSS styling can be employed for:
Products (Each individual products team of four things): history, 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’ seems in excess of merchandise thumbs on sale – CSS styling may be used: history colour, font colour, border colour, border width, stable/dashed border, border radius.
Product or service Variants

An item variation will allow a shopper to set up a clothing product that is available in various colors, or unique types.

When merchandise versions are employed, solution archive pages will display a ‘Choose Options’ button rather website then an Insert to Cart button.

In summary, we’ve established out listed here the main factors that you simply’ll want to think about when you're designing a WooCommerce retail store. We’ve spelled out the different sorts of web pages, the merchandise details in addition to the search and styling options. Have some fun making your WooCommerce keep.

Leave a Reply

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