A Designer’s Guide To WooCommerce

WooCommerce gives an array of possibilities that can be configured for consumer Sites. This information is for a designer who is developing a WooCommerce keep from scratch or maybe a designer that's tailoring an present WooCommerce theme.

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

Evaluate the template to see how it works. This document gives a tad more information on the kind of styling you'll be able to adjust with your models. It only handles WooCommerce similar internet pages.

There are an enormous number of methods to eCommerce. The WooCommerce plugin is quite versatile, but Simply because a attribute is utilised on an internet site someplace isn't going to signify Will probably be supported by WooCommerce.

By utilizing the capabilities and techniques supported by WooCommerce, you may increase the whole process of structure and enhancement. Tailor made modifications is usually produced, but often involve additional expense.
Types of Internet pages

Products Internet pages: there are actually two varieties of product or service web pages you need to style and design for:

Product or service Archive Web pages: these Exhibit thumbnails for offered merchandise classes and/or items. Clicking on the category thumbnail shows A further products archive site, Whilst clicking on an item thumbnail displays the single product web site.
Products One Web pages: these Screen just one product, and incorporate solution image(s), merchandise header facts, product comprehensive info and connected solutions, cross sells and up sells.

Special Internet pages:

Browsing Cart: the searching cart is usually displayed in condensed variety for a sidebar widget, and often in expanded type around the Cart web site along with Shipping data,
Checkout: after a client is checking out, handle data is needed.


Products Header

Product or service Title – shown over the summary/archive web pages and single internet pages)
Product or service Characteristic – shown over the summary/archive web pages and single internet pages
Impression – Highlighted Image shows within the summary, additional images on The one
Prolonged Description – proven during the Product or service Description location, at the bottom of solitary item page
Small Description – proven at the best of The only item web site

Merchandise Categories

each individual group requirements a equipped class graphic and an outline
categories might have subcategories, for example, Crops is really a classification and Trees is actually a sub classification. Apart from navigation, they behave a similar.

Solution Classification archives are instantly created with the next sections:

title (classification name)
description (the group description)
one group thumbnail for every sub class of the present category
optional product or service thumbs (with title, price and Incorporate to Cart) for every solution in The existing category

Clicking on the category opens a fresh classification, clicking a product thumbnail opens the merchandise.
Products Pages

Merchandise Internet pages are instantly created with the following sections:

Solution Graphic(s): the Featured Impression and supplementary visuals for your solution.
Products Title
Item Selling price
Product Quick Description
Amount to incorporate to cart (with + and controls)
Insert to Cart button
Solution SKU (Stock Retaining Unit), Categories and Tags
Solution Tabs
Description: the merchandise extensive description, such as optional impression gallery
Additional Details: the product Characteristics ticked to display on product or service web page
Assessments: optional solution assessments
Connected Products
Upsells: ‘You might also like’ followed by thumbs/titles for upsells
Cross sells: ‘Relevant Products’ followed by thumbnails for similar items (assigned as Cross Sells or quickly selected)

Product or service Image presentation possibilities:

Standard presentation is usually to Display screen the Featured Impression at the top in the products web page, Along with the supplementary image thumbnails underneath in three columns of thumbnails
Optional presentation is to Screen the Showcased Image without any thumbnails beneath, also to display all photographs in The outline tab.

Product Lookup

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

Web-site Large Lookup Possibilities – these look for widgets can be employed on any web page in the website:

Merchandise look for box (a textual content search box that queries merchandise identify, shorter 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 Choices – these lookup widgets will only show up when quickly generated item class archives are now being shown

Layered Navigation
Product or service Price Filter: displays a sliding scale permitting items to get filtered to your rate vary
Best Sellers: displays title/thumb/cost for instantly chosen list of ideal marketing solutions
Showcased Solutions: shows title/thumb/selling price for solutions ticked as Showcased Solutions
On Sale: shows products which Use a Sale Selling price entered In combination with their Rate

Styling Solutions

Products thumbs: when products and solutions surface as products more info thumbs, four things are exhibited: thumbnail, title, selling price, insert to cart. CSS styling may be used for:
Merchandise (Just about every merchandise group of 4 components): background, product border, padding, margin
Thumbnail: border, padding, margins
Title: font, pounds, colour, dimensions
Price tag: font, fat, colour, dimension
Include to Cart: button colour, label colour, border, radius

Sale sticker: the word ‘Sale’ seems in excess of merchandise thumbs on sale – CSS styling can be utilized: background colour, font colour, border colour, border width, good/dashed border, border radius.
Product or service Versions

A product variation allows a shopper to put in place a clothes product that is out there in several colors, or distinct styles.

When products variants are employed, item archive internet pages will Exhibit a ‘Pick Options’ button rather then an Insert to Cart button.

In summary, we’ve set out here the foremost aspects that you simply’ll have to have to consider when you're designing a WooCommerce retail outlet. We’ve defined the differing types of webpages, the product data along with the research and styling choices. Have some fun creating your WooCommerce retail store.

Leave a Reply

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