A Designer’s Manual To WooCommerce

WooCommerce presents a variety of selections that may be configured for shopper Internet websites. This post is for any designer who is coming up with a WooCommerce retailer from scratch or even a designer that is tailoring an existing WooCommerce topic.

The fastest strategy to see what functions you'll find is to visit the Storefront demo inside of WooCommerce.

Overview the template to find out how it really works. This doc supplies a little additional information on the type of styling you'll be able to alter in your styles. It only addresses WooCommerce connected webpages.

You will find a massive assortment of ways to eCommerce. The WooCommerce plugin is incredibly versatile, but just because a feature is used on a web site someplace would not mean Will probably be supported by WooCommerce.

By utilizing the functions and strategies supported by WooCommerce, you may accelerate the process of layout and improvement. Custom modifications is usually produced, but often require more price.
Varieties of Internet pages

Product or service Web pages: you will find two forms of merchandise pages you must style and design for:

Item Archive Web pages: these Display screen thumbnails for obtainable product categories and/or items. Clicking over a category thumbnail shows another product archive page, whereas clicking on an item thumbnail shows The only product or service website page.
Product or service Solitary Webpages: these Show a single product or service, and incorporate merchandise image(s), product or service header details, product thorough information and linked goods, cross sells and up sells.

Distinctive Web pages:

Shopping Cart: the searching cart is typically shown in condensed sort as a sidebar widget, and often in expanded form to the Cart web page along with Delivery information and facts,
Checkout: as soon as a buyer is testing, handle facts is needed.


Item Header

Products Title – revealed on the summary/archive pages and single webpages)
Product or service Feature – shown around the summary/archive webpages and solitary web pages
Graphic – Showcased Image displays around the summary, further photographs on The only
Extensive Description – shown in the Item Description region, at the bottom of single solution website page
Small Description – revealed at the best of The one product or service site

Products Types

each individual classification requires a equipped classification graphic and an outline
groups might have subcategories, one example is, Vegetation can be a class and Trees is actually a sub class. Apart from navigation, they behave the identical.

Solution Category archives are immediately generated with the following sections:

title (category identify)
description (the classification description)
a person classification thumbnail for every sub group of the current class
optional item thumbs (with title, cost and Add to Cart) for every products in The existing group

Clicking on the category opens a new classification, clicking an item thumbnail opens the merchandise.
Merchandise Webpages

Product Internet pages are quickly produced with the next sections:

Product Graphic(s): the Highlighted Picture and supplementary pictures for the product or service.
Merchandise Title
Solution Cost
Products Small Description
Quantity to add to cart (with + and controls)
Insert to Cart button
Merchandise SKU (Stock Holding Device), Categories and Tags
Products Tabs
Description: the merchandise lengthy description, together with optional impression gallery
Further Information: the product or service Attributes ticked to Exhibit on solution page
Opinions: optional item assessments
Relevant Goods
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Similar Items’ accompanied by thumbnails for connected products (assigned as Cross Sells or routinely selected)

Merchandise Image presentation possibilities:

Standard presentation is usually to display the Highlighted Graphic at the very best of your solution site, Using the supplementary impression thumbnails beneath in 3 columns of thumbnails
Optional presentation will be to display the Highlighted Graphic with no thumbnails beneath, also to display all photographs in The outline tab.

Item Research

Products Search widgets can be obtained to position in sidebar widgets or footer widgets.

Site Vast Look for Options – these lookup widgets may be used on any web site in the website:

Solution research box (a textual content look for box that searches solution title, small description, long description)
Class drill-down (a dropdown discipline that enables array of any category or sub class)
Solution tag cloud

Product or service Classification Look for Options – these search widgets will only seem when instantly produced merchandise group archives are increasingly being exhibited

Layered Navigation
Products Price Filter: displays a sliding scale permitting items to get filtered into a price tag selection
Finest Sellers: shows title/thumb/price tag for routinely chosen list of very best promoting goods
Featured Products: shows title/thumb/selling price for solutions ticked as Highlighted Items
On Sale: displays products that Have got a Sale Rate entered Besides their Price tag

Styling Possibilities

Solution thumbs: when goods seem as item thumbs, four things are shown: thumbnail, title, value, include to cart. CSS styling can be used for:
Products (Each individual merchandise group of 4 features): history, more info merchandise border, padding, margin
Thumbnail: border, padding, margins
Title: font, excess weight, colour, sizing
Selling price: font, bodyweight, colour, size
Insert to Cart: button colour, label colour, border, radius

Sale sticker: the phrase ‘Sale’ seems about solution thumbs on sale – CSS styling can be employed: qualifications colour, font colour, border colour, border width, strong/dashed border, border radius.
Products Versions

A product variation lets a consumer to arrange a apparel product that is on the market in numerous colors, or distinct designs.

When merchandise variations are applied, item archive internet pages will Show a ‘Opt for Alternatives’ button rather then an Incorporate to Cart button.

In summary, we’ve established out right here the foremost factors that you choose to’ll want to consider when you're coming up with a WooCommerce shop. We’ve spelled out the different types of web pages, the products details and also the search and styling possibilities. Have some fun creating your WooCommerce retail outlet.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Comments on “A Designer’s Manual To WooCommerce”

Leave a Reply