A Designer’s Guide To WooCommerce

WooCommerce offers a variety of options that may be configured for consumer Sites. This text is for just a designer that's building a WooCommerce store from scratch or a designer who is tailoring an existing WooCommerce theme.

The quickest way to see what features you will find is to visit the Storefront demo inside WooCommerce.

Evaluation the template to determine how it works. This document provides a bit more information on the kind of styling you can change in your designs. It only covers WooCommerce related internet pages.

There are actually a big a number of strategies to eCommerce. The WooCommerce plugin is rather adaptable, but Simply because a attribute is utilised 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 may be created, but often contain supplemental price.
Forms of Webpages

Item Pages: there are two varieties of merchandise webpages you will have to design for:

Products Archive Web pages: these Screen thumbnails for obtainable item categories and/or solutions. Clicking over a class thumbnail shows another products archive site, While clicking on a product thumbnail shows The only solution web page.
Product One Web pages: these Show a single product or service, and integrate item image(s), product or service header data, item detailed facts and relevant goods, cross sells and up sells.

Distinctive Web pages:

Purchasing Cart: the shopping cart is typically shown in condensed form for a sidebar widget, and at times in expanded form to the Cart webpage along with Shipping info,
Checkout: at the time a buyer is checking out, handle details is necessary.


Item Header

Products Title – shown to the summary/archive webpages and one webpages)
Product Element – proven over the summary/archive web pages and single web pages
Image – Showcased Image shows around the summary, supplemental photos on The one
Prolonged Description – shown while in the Item Description place, at the bottom of one item site
Brief Description – revealed at the very best of The one item site

Solution Types

each and every classification wants a equipped class graphic and a description
groups can have subcategories, by way of example, Plants can be a category and Trees can be a sub category. Aside from navigation, they behave the same.

Solution Classification archives are instantly created with the following sections:

title (group name)
description (the class description)
a person class thumbnail for every sub category of the present classification
optional item thumbs (with title, selling price and Add to Cart) for every products in the current group

Clicking on a class opens a completely new class, clicking an item thumbnail opens the product.
Merchandise Internet pages

Item Web pages are automatically produced with the subsequent sections:

Product Impression(s): the Showcased Image and supplementary photographs with the item.
Merchandise Title
Product Value
Product or service Short Description
Quantity to include to cart (with + and controls)
Add to Cart button
Solution SKU (Inventory Holding Unit), Groups and Tags
Product or service Tabs
Description: the item prolonged description, together with optional image gallery
Further Information and facts: the item Attributes ticked to Exhibit on product webpage
Opinions: optional product evaluations
Linked Products and solutions
Upsells: ‘You may also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Similar Products’ followed by thumbnails for relevant solutions (assigned as Cross Sells or automatically selected)

Solution Impression presentation solutions:

Standard presentation is always to Screen the Showcased Graphic at the top from the solution site, While using the supplementary image thumbnails underneath in 3 columns of thumbnails
Optional presentation is usually to Exhibit the Showcased Image without any thumbnails underneath, and also to Exhibit all visuals in The outline tab.

Product Lookup

Solution Research widgets can be obtained to position in sidebar widgets or footer widgets.

Web page Wide Search Alternatives – these lookup widgets may be used on any site in the web site:

Products look for box (a text search box that searches item title, quick description, prolonged description)
Group drill-down (a dropdown subject which allows array of here any category or sub category)
Item tag cloud

Item Class Lookup Possibilities – these research widgets will only show up when mechanically created products classification archives are increasingly being exhibited

Layered Navigation
Product Cost Filter: displays a sliding scale enabling items for being filtered into a price tag array
Finest Sellers: shows title/thumb/selling price for quickly picked listing of finest providing products and solutions
Showcased Products and solutions: shows title/thumb/price for products ticked as Featured Products
On Sale: displays products which Have got a Sale Rate entered In combination with their Rate

Styling Solutions

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

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

An item variation makes it possible for a consumer to setup a clothing product that is out there in several colours, or distinct styles.

When product variants are applied, product or service archive web pages will Show a ‘Select Options’ button rather then an Insert to Cart button.

In summary, we’ve set out right here the major features you’ll need to have to think about when you're designing a WooCommerce retail outlet. We’ve discussed the different sorts of pages, the products data in addition to the search and styling solutions. Have a great time creating 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