A Designer’s Guidebook To WooCommerce



WooCommerce delivers a wide array of selections which might be configured for client Web sites. This post is for your designer that's building a WooCommerce store from scratch or perhaps a designer who's tailoring an current WooCommerce concept.

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

Evaluate the template to see how it works. This document offers a little more details on the type of styling you'll be able to adjust with your types. It only addresses WooCommerce connected webpages.
Ideas

You'll find a massive selection of methods to eCommerce. The WooCommerce plugin is extremely flexible, but just because a feature is made use of on a web site someplace won't signify It's going to be supported by WooCommerce.

By using the functions and methods supported by WooCommerce, you are able to speed up the process of design and enhancement. Tailor made modifications is often developed, but typically include extra expense.
Different types of Internet pages

Product or service Web pages: you can find 2 types of product internet pages you have got to layout for:

Solution Archive Webpages: these display thumbnails for out there product or service groups and/or merchandise. Clicking on the category thumbnail shows A further product or service archive website page, While clicking on a product thumbnail shows The only solution web page.
Products One Webpages: 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.

Special Web pages:

Purchasing Cart: the buying cart is typically shown in condensed type to be a sidebar widget, and from time to time in expanded kind on the Cart site together with Delivery facts,
Checkout: after a consumer is testing, tackle info is necessary.

Merchandise

Item Header

Products Title – shown to the summary/archive webpages and one web pages)
Item Aspect – demonstrated on the summary/archive internet pages and solitary internet pages
Impression – Featured Impression displays over the summary, added 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 Classes

every group needs a provided category impression and a description
groups can have subcategories, one example is, Plants is often a class and Trees is usually a sub class. In addition to navigation, they behave the identical.

Products Class archives are quickly produced with the subsequent sections:

title (class identify)
description (the class description)
just one category thumbnail for every sub category of the present category
optional merchandise thumbs (with title, price and Incorporate to Cart) for each merchandise in The existing class

Clicking with a category opens a different class, clicking an item thumbnail opens the product.
Merchandise Internet pages

Solution Internet pages are instantly created with the following sections:

Product or service Image(s): the Highlighted Graphic and supplementary pictures for that item.
Merchandise Title
Product Value
Products Brief Description
Amount so as to add to cart (with + and controls)
Include to Cart button
Merchandise SKU (Inventory Retaining Device), Types and Tags
Solution Tabs
Description: the product or service long description, which includes optional graphic gallery
Extra Data: the product Attributes ticked to Exhibit on product webpage
Assessments: optional item testimonials
Similar Goods
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Related Items’ accompanied by thumbnails for similar products (assigned as Cross Sells or instantly picked)

Product Image presentation possibilities:

Typical presentation is to Show the Highlighted Impression at the best from the merchandise site, with the supplementary picture thumbnails underneath in three columns of thumbnails
Optional presentation should be to display the Featured Picture without thumbnails beneath, also to display all pictures in the Description tab.

Product or service Look for

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

Web-site Large Search Choices – these lookup widgets can be utilized on any website page in the web site:

Products search box (a text lookup box that queries merchandise title, small description, extensive description)
Category drill-down (a dropdown field that permits collection of any group or sub group)
Product or service tag cloud

Products Classification Search Options – these search widgets will only seem when instantly produced merchandise group archives are increasingly being exhibited

Layered Navigation
Products Rate Filter: shows a sliding scale allowing products to become filtered to some value assortment
Greatest Sellers: shows title/thumb/price tag for routinely chosen click here listing of finest providing products and solutions
Showcased Products and solutions: shows title/thumb/price for products ticked as Featured Products
On Sale: shows products which Have got a Sale Rate entered in addition to their Rate

Styling Solutions

Products thumbs: when products and solutions surface as products thumbs, four features are exhibited: thumbnail, title, rate, increase to cart. CSS styling can be employed for:
Products (Each individual product or service team of four aspects): track record, solution border, padding, margin
Thumbnail: border, padding, margins
Title: font, bodyweight, colour, dimension
Cost: font, weight, colour, size
Increase to Cart: button colour, label colour, border, radius

Sale sticker: the term ‘Sale’ seems in excess of merchandise thumbs on sale – CSS styling can be utilized: track record colour, font colour, border colour, border width, strong/dashed border, border radius.
Item Variations

An item variation will allow a customer to put in place a apparel solution that is accessible in different colors, or unique types.

When solution variations are used, product archive internet pages will Exhibit a ‘Decide on Alternatives’ button as opposed to an Add to Cart button.

In summary, we’ve established out below the most important factors that you simply’ll need to consider if you find yourself developing a WooCommerce shop. We’ve explained the differing types of web pages, the solution info as well as the look for and styling possibilities. Have a good time building your WooCommerce retail store.

Leave a Reply

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