A Designer’s Information To WooCommerce

WooCommerce offers a variety of options that may be configured for consumer Sites. This text is for your designer that's building a WooCommerce retail 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.

Review the template to see how it works. This document provides a bit more information on the kind of styling you can change in your designs. It only handles WooCommerce similar internet pages.

There are actually a big 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 mean It's going to be supported by WooCommerce.

By using the characteristics and approaches supported by WooCommerce, you'll be able to quicken the process of style and development. Custom modifications can be manufactured, but normally contain supplemental expenditure.
Different types of Internet pages

Product or service Web pages: you can find 2 sorts of item pages you will have to design for:

Product Archive Internet pages: these Exhibit thumbnails for offered solution categories and/or products and solutions. Clicking with a group thumbnail displays Yet another item archive page, Whilst clicking on a product thumbnail displays the single product or service website page.
Solution Single Internet pages: these Display screen one solution, and incorporate product graphic(s), merchandise header details, item detailed information and facts and linked merchandise, cross sells and up sells.

Specific Pages:

Procuring Cart: the browsing cart is usually displayed in condensed variety for a sidebar widget, and often in expanded type over the Cart site along with Shipping and delivery information,
Checkout: at the time a buyer is checking out, handle data is required.


Product or service Header

Solution Name – revealed within the summary/archive pages and one webpages)
Item Aspect – demonstrated around the summary/archive internet pages and solitary pages
Graphic – Highlighted Image shows within the summary, additional illustrations or photos on the single
Extensive Description – demonstrated inside the Product Description place, at the bottom of one solution page
Small Description – proven at the best of The only product site

Item Types

every single category demands a supplied classification picture and an outline
groups can have subcategories, one example is, Plants is usually a class and Trees is a sub group. Apart from navigation, they behave a similar.

Solution Classification archives are routinely generated with the next sections:

title (category identify)
description (the class description)
a person class thumbnail for every sub class of the present class
optional products thumbs (with title, value and Increase to Cart) for each products in The present classification

Clicking on the classification opens a fresh classification, clicking a product thumbnail opens the product or service.
Item Internet pages

Item Web pages are immediately created with the following sections:

Merchandise Image(s): the Highlighted Graphic and supplementary photos with the solution.
Product or service Title
Item Selling price
Item Small Description
Quantity to incorporate to cart (with + and controls)
Increase to Cart button
Item SKU (Inventory Keeping Unit), Types and Tags
Item Tabs
Description: the merchandise extensive description, which includes optional impression gallery
Extra Data: the products Attributes ticked to Screen on products web page
Opinions: optional product evaluations
Linked Goods
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Related Items’ accompanied by thumbnails for related items (assigned as Cross Sells or mechanically selected)

Solution Impression presentation options:

Normal presentation is usually to Display screen the Featured Picture at the highest of your item website page, While using the supplementary picture thumbnails underneath in three columns of thumbnails
Optional presentation should be to Show the Highlighted Graphic with no thumbnails underneath, and also to Exhibit all visuals in the Description tab.

Solution Research

Product or service Search widgets can be found to put in sidebar widgets or footer widgets.

Web-site Wide Lookup Possibilities – these research widgets can be employed on any web site in the website:

Item lookup box (a textual content research box that lookups products name, brief description, extended description)
Class drill-down (a dropdown subject that enables array of any classification or sub category)
Item tag cloud

Item Class Lookup Possibilities – these research widgets will only show up when quickly generated item category archives are being displayed

Layered Navigation
Solution Price tag Filter: shows a sliding scale letting solutions to generally be filtered to a price variety
Very best Sellers: displays title/thumb/value for instantly chosen list of greatest marketing merchandise
Highlighted Merchandise: shows title/thumb/price tag for merchandise ticked as Highlighted Merchandise
On Sale: shows items website that Have a very Sale Price tag entered Together with their Price tag

Styling Possibilities

Merchandise thumbs: when merchandise look as merchandise thumbs, 4 factors are shown: thumbnail, title, value, include to cart. CSS styling can be used for:
Item (Every product group of four features): history, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, body weight, colour, dimensions
Price tag: font, fat, colour, measurement
Include to Cart: button colour, label colour, border, radius

Sale sticker: the word ‘Sale’ appears around products thumbs on sale – CSS styling can be employed: qualifications colour, font colour, border colour, border width, reliable/dashed border, border radius.
Solution Variations

A product variation allows a shopper to arrange a garments merchandise that is offered in numerous colours, or various designs.

When products variants are utilised, merchandise archive webpages will display a ‘Choose Solutions’ button in lieu of an Insert to Cart button.

In summary, we’ve set out right here the major features you’ll want to think about while you are coming up with a WooCommerce keep. We’ve described the different types of internet pages, the merchandise details along with the look for and styling selections. Rejoice developing your WooCommerce retail store.

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

Comments on “A Designer’s Information To WooCommerce”

Leave a Reply