A Designer’s Guide To WooCommerce

WooCommerce delivers an array of possibilities that could be configured for shopper websites. This short article is for any designer who's developing a WooCommerce keep from scratch or maybe a designer that is tailoring an present WooCommerce topic.

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

Evaluate the template to check out how it really works. This doc presents a tiny bit more info on the sort of styling you could improve in the layouts. It only handles WooCommerce similar internet pages.

You will discover a large range of techniques to eCommerce. The WooCommerce plugin is rather versatile, but Simply because a attribute is employed on an internet site somewhere doesn't imply It will likely be supported by WooCommerce.

By using the options and strategies supported by WooCommerce, you could hasten the entire process of layout and growth. Custom made modifications could be created, but frequently involve supplemental expenditure.
Sorts of Web pages

Solution Webpages: you will find 2 styles of product or service web pages you need to style for:

Product Archive Internet pages: these Exhibit thumbnails for offered solution classes and/or products. Clicking with a group thumbnail displays Yet another product archive web site, Whilst clicking on a product thumbnail displays The one product or service website page.
Solution Single Internet pages: these Exhibit an individual item, and include product or service picture(s), item header information, product or service thorough info and related solutions, cross sells and up sells.

Specific Webpages:

Shopping Cart: the browsing cart is usually displayed in condensed variety being a sidebar widget, and at times in expanded form to the Cart website page together with Supply data,
Checkout: as soon as a shopper is trying out, deal with information and facts is needed.


Product Header

Product or service Title – revealed about the summary/archive webpages and one web pages)
Item Element – proven on the summary/archive web pages and single internet pages
Picture – Featured Impression displays over the summary, further images on The one
Lengthy Description – revealed while in the Product Description place, at the bottom of one solution web site
Limited Description – shown at the highest of the single product or service webpage

Products Groups

every group requirements a equipped category impression and a description
groups can have subcategories, one example is, Plants is usually a class and Trees is usually a sub class. In addition to navigation, they behave precisely the same.

Product Group archives are automatically produced with the following sections:

title (class identify)
description (the class description)
a person class thumbnail for every sub class of the present class
optional product or service thumbs (with title, cost and Insert to Cart) for each merchandise in the current group

Clicking on a class opens a completely new class, clicking an item thumbnail opens the item.
Merchandise Pages

Merchandise Internet pages are instantly created with the following sections:

Merchandise Graphic(s): the Highlighted Impression and supplementary pictures to the products.
Solution Title
Product or service Cost
Merchandise Short Description
Quantity to include to cart (with + and controls)
Add to Cart button
Solution SKU (Inventory Maintaining Unit), Types and Tags
Item Tabs
Description: the merchandise extensive description, such as optional impression gallery
Additional Details: the product or service Attributes ticked to Show on product or service page
Evaluations: optional product or service reviews
Connected Solutions
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Relevant Products and solutions’ followed by thumbnails for connected solutions (assigned as Cross Sells or automatically selected)

Merchandise Graphic presentation options:

Normal presentation is usually to Display screen the Featured Picture at the highest of your product webpage, Together with the supplementary graphic thumbnails underneath in 3 columns of thumbnails
Optional presentation is always to Exhibit the Showcased Image without any thumbnails underneath, and also to Display screen all images in the Description tab.

Solution Research

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

Internet site Huge Look for Options – these search widgets can be utilized on any website page in the web site:

Products search box (a text lookup box that queries merchandise identify, shorter description, long description)
Category drill-down (a dropdown area that permits variety of any group click here or sub classification)
Products tag cloud

Product Category Lookup Alternatives – these research widgets will only show up when mechanically created products category archives are being displayed

Layered Navigation
Item Value Filter: displays a sliding scale enabling merchandise to get filtered to your selling price vary
Most effective Sellers: shows title/thumb/price for automatically selected list of very best promoting goods
Featured Items: displays title/thumb/value for items ticked as Highlighted Items
On Sale: displays products that Have a very Sale Rate entered in addition to their Price tag

Styling Solutions

Product or service thumbs: when products and solutions appear as item thumbs, four aspects are shown: thumbnail, title, price tag, incorporate to cart. CSS styling may be used for:
Merchandise (Every single solution group of 4 components): background, item border, padding, margin
Thumbnail: border, padding, margins
Title: font, weight, colour, size
Rate: font, pounds, colour, sizing
Increase to Cart: button colour, label colour, border, radius

Sale sticker: the term ‘Sale’ seems in excess of solution thumbs on sale – CSS styling can be utilized: background colour, font colour, border colour, border width, solid/dashed border, border radius.
Product Versions

A product variation allows a shopper to arrange a outfits products that is on the market in different colours, or different layouts.

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 defined the different types of internet pages, the product information and facts together with the look for and styling possibilities. Rejoice constructing your WooCommerce keep.

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

Comments on “A Designer’s Guide To WooCommerce”

Leave a Reply