A Designer’s Guide To WooCommerce

WooCommerce gives a variety of possibilities that may be configured for client Web-sites. This text is for any designer who is coming up with a WooCommerce retailer from scratch or a designer who's tailoring an present WooCommerce topic.

The quickest approach to see what options you'll find is to go to the Storefront demo within WooCommerce.

Review the template to view how it works. This doc supplies a tad more information on the sort of styling you could transform in your styles. It only addresses WooCommerce related pages.

You can find a huge assortment of methods to eCommerce. The WooCommerce plugin is very versatile, but just because a function is utilised on a web site someplace will not necessarily mean It's going to be supported by WooCommerce.

By using the options and ways supported by WooCommerce, it is possible to accelerate the whole process of design and improvement. Custom modifications might be produced, but usually entail extra price.
Varieties of Internet pages

Item Internet pages: you can find 2 sorts of solution webpages you need to style and design for:

Product or service Archive Pages: these Show thumbnails for readily available product or service categories and/or solutions. Clicking on a group thumbnail reveals One more products archive webpage, While clicking on a product thumbnail displays the single item page.
Solution Solitary Web pages: these Exhibit only one solution, and include solution picture(s), product or service header info, merchandise in-depth information and facts and linked solutions, cross sells and up sells.

Exclusive Web pages:

Purchasing Cart: the purchasing cart is usually shown in condensed kind for a sidebar widget, and sometimes in expanded type about the Cart webpage along with Delivery info,
Checkout: when a consumer is checking out, address facts is needed.


Product Header

Product Title – revealed to the summary/archive internet pages and solitary webpages)
Merchandise Element – revealed on the summary/archive internet pages and one pages
Image – Featured Graphic displays on the summary, supplemental illustrations or photos on the single
Long Description – revealed from the Product or service Description location, at the bottom of solitary solution website page
Quick Description – proven at the very best of The only solution site

Solution Types

every single category requires a supplied classification impression and a description
categories might have subcategories, by way of example, Vegetation is actually a class and Trees is really a sub classification. In addition to navigation, they behave a similar.

Products Classification archives are instantly created with the following sections:

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

Clicking on the category opens a new classification, clicking a product thumbnail opens the merchandise.
Products Webpages

Products Pages are routinely generated with the next sections:

Item Impression(s): the Featured Impression and supplementary photos for the products.
Merchandise Title
Product Selling price
Solution Short Description
Amount to incorporate to cart (with + and controls)
Insert to Cart button
Product SKU (Stock Retaining Device), Types and Tags
Item Tabs
Description: the solution extensive description, like optional graphic gallery
Further Information and facts: the item Characteristics ticked to Show on product or service webpage
Reviews: optional solution assessments
Relevant Products
Upsells: ‘You might also like’ followed by thumbs/titles for upsells
Cross sells: ‘Connected Items’ accompanied by thumbnails for relevant products and solutions (assigned as Cross Sells or automatically selected)

Item Picture presentation solutions:

Regular presentation is usually to Display screen the Showcased Image at the very best with the product webpage, While using the supplementary image thumbnails underneath in 3 columns of thumbnails
Optional presentation will be to display the Highlighted Impression without having thumbnails underneath, and also to Show all pictures in the Description tab.

Solution Lookup

Solution Lookup widgets can be found to put in sidebar widgets or footer widgets.

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

Product or service look for box (a text search box that searches solution identify, shorter description, long description)
Category drill-down (a dropdown area that enables variety of any class or sub category)
Products tag cloud

Products Classification Research Possibilities – these lookup widgets will only appear when automatically created products classification archives are increasingly being exhibited

Layered Navigation
Merchandise Price tag Filter: shows a sliding scale allowing goods here to become filtered into a price tag assortment
Greatest Sellers: displays title/thumb/price tag for routinely chosen listing of ideal promoting products
Showcased Items: displays title/thumb/rate for solutions ticked as Highlighted Products
On Sale: shows items that Have a very Sale Selling price entered In combination with their Price

Styling Choices

Solution thumbs: when merchandise look as merchandise thumbs, four aspects are shown: thumbnail, title, cost, include to cart. CSS styling can be employed for:
Merchandise (Every single solution group of four things): qualifications, merchandise border, padding, margin
Thumbnail: border, padding, margins
Title: font, weight, colour, dimensions
Cost: font, body weight, colour, dimension
Increase to Cart: button colour, label colour, border, radius

Sale sticker: the term ‘Sale’ appears around solution thumbs on sale – CSS styling can be employed: track record colour, font colour, border colour, border width, solid/dashed border, border radius.
Product or service Versions

An item variation lets a consumer to build a clothes product that is on the market in numerous colours, or distinctive types.

When item variants are employed, product archive web pages will Show a ‘Choose Selections’ button as opposed to an Add to Cart button.

In summary, we’ve established out here the most important elements which you’ll will need to consider when you are creating a WooCommerce retailer. We’ve stated the different types of web pages, the products info plus the look for and styling options. Rejoice making your WooCommerce shop.

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