A Designer’s Guide To WooCommerce



WooCommerce offers a variety of choices 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 method to see what attributes you will find is to visit the Storefront demo inside WooCommerce.

Evaluation the template to determine how it works. This document offers a little more information on the kind of styling you are able to alter inside your styles. It only covers WooCommerce associated pages.
Principles

You will find an enormous number of approaches to eCommerce. The WooCommerce plugin is very flexible, but Because a aspect is used on a web site someplace won't signify Will probably be supported by WooCommerce.

By utilizing the characteristics and ways supported by WooCommerce, you'll be able to quicken the process of design and development. Tailor made modifications is usually generated, but typically entail further expense.
Types of Internet pages

Products Web pages: you can find 2 types of product internet pages you must layout for:

Solution Archive Webpages: these display thumbnails for out there product or service groups and/or items. Clicking on a classification thumbnail demonstrates One more solution archive page, Whilst clicking on an item thumbnail displays the single products site.
Solution Single Internet pages: these Exhibit an individual item, and include product or service picture(s), item header information, product or service thorough info and similar solutions, cross sells and up sells.

Particular Pages:

Procuring Cart: the searching cart is sometimes exhibited in condensed sort like a sidebar widget, and sometimes in expanded sort about the Cart web page along with Shipping info,
Checkout: at the time a buyer is looking at, handle data is required.

Products and solutions

Merchandise Header

Item Identify – proven on the summary/archive internet pages and solitary internet pages)
Merchandise Function – revealed within the summary/archive pages and solitary webpages
Graphic – Highlighted Graphic shows around the summary, more photos on the single
Prolonged Description – shown from the Solution Description space, at The underside of single merchandise web page
Small Description – proven at the best of The only products website page

Product Groups

each group requirements a equipped class graphic and a description
types may have subcategories, for example, Vegetation is a group and Trees is really a sub group. Apart from navigation, they behave the exact same.

Solution Classification archives are instantly created with the next sections:

title (classification name)
description (the group description)
1 group thumbnail for each sub group of the current class
optional products thumbs (with title, value and Increase to Cart) for each website product or service in the current group

Clicking on a group opens a new class, clicking an item thumbnail opens the item.
Products Webpages

Products Pages are mechanically generated with the next sections:

Products Picture(s): the Showcased Image and supplementary photographs for the merchandise.
Products Title
Item Selling price
Product Limited Description
Amount to add to cart (with + and controls)
Insert to Cart button
Product SKU (Stock Preserving Unit), Classes and Tags
Product or service Tabs
Description: the item prolonged description, together with optional picture gallery
Added Information: the solution Characteristics ticked to Display screen on item website page
Assessments: optional item testimonials
Similar Goods
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Similar Goods’ accompanied by thumbnails for similar goods (assigned as Cross Sells or instantly picked)

Product Picture presentation possibilities:

Conventional presentation is to Show the Highlighted Graphic at the top from the merchandise site, with the supplementary picture thumbnails underneath in three columns of thumbnails
Optional presentation will be to display the Featured Picture without thumbnails beneath, also to display all photos in The outline tab.

Product or service Look for

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

Web-site Large Search Choices – these lookup widgets may be used on any site in the web site:

Products search box (a text lookup box that queries product or service identify, short description, lengthy description)
Class drill-down (a dropdown discipline that enables number of any classification or sub classification)
Product tag cloud

Product Category Lookup Alternatives – these lookup widgets will only look when mechanically created products classification archives are increasingly being exhibited

Layered Navigation
Product Price Filter: displays a sliding scale permitting items for being filtered into a price tag array
Finest Sellers: shows title/thumb/rate for automatically selected listing of best selling products
Featured Products: displays title/thumb/cost for goods ticked as Featured Goods
On Sale: displays products that Possess a Sale Cost entered Along with their Cost

Styling Choices

Item thumbs: when goods seem as item thumbs, 4 components are displayed: thumbnail, title, price, add to cart. CSS styling can be used for:
Product (each product group of four features): history, products border, padding, margin
Thumbnail: border, padding, margins
Title: font, body weight, colour, dimensions
Price tag: font, fat, colour, measurement
Incorporate to Cart: button colour, label colour, border, radius

Sale sticker: the word ‘Sale’ appears over products thumbs on sale – CSS styling can be employed: history colour, font colour, border colour, border width, stable/dashed border, border radius.
Merchandise Versions

A product variation allows a client to arrange a garments merchandise that is offered in numerous colours, or different 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 need to have to think about when you're designing a WooCommerce store. We’ve spelled out the different sorts of webpages, the item information and also the research and styling choices. Have fun setting up your WooCommerce keep.

Leave a Reply

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