A Designer’s Tutorial To WooCommerce



WooCommerce provides a variety of options that may be configured for consumer Sites. This information is for a designer who is creating a WooCommerce retailer from scratch or possibly a designer that is tailoring an present WooCommerce topic.

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

Assessment the template to find out how it works. This document supplies a tad additional information on the sort of styling you may improve in the designs. It only covers WooCommerce related pages.
Principles

There are an enormous number of methods to eCommerce. The WooCommerce plugin is extremely flexible, but just because a function is utilized on a website somewhere does not mean It will likely be supported by WooCommerce.

By using the features and approaches supported by WooCommerce, you can speed up the whole process of structure and enhancement. Tailor made modifications is usually generated, but generally require added price.
Varieties of Webpages

Solution Pages: you will find 2 styles of products internet pages you have got to layout for:

Solution Archive Webpages: these Show thumbnails for available product types and/or solutions. Clicking over a class thumbnail exhibits another products archive web site, While clicking on a product thumbnail displays the single products site.
Merchandise Single Pages: these Display screen only one product or service, and integrate solution image(s), product header information and facts, product or service thorough details and associated products, cross sells and up sells.

Distinctive Web pages:

Purchasing Cart: the buying cart is typically exhibited in condensed kind as being a sidebar widget, and sometimes in expanded variety about the Cart webpage together with Supply data,
Checkout: when a customer is testing, tackle details is required.

Products and solutions

Merchandise Header

Solution Name – demonstrated within the summary/archive pages and one webpages)
Product Element – proven around the summary/archive internet pages and solitary pages
Impression – Highlighted Graphic shows around the summary, supplemental illustrations or photos on the single
Extensive Description – demonstrated within the Products Description spot, at the bottom of one item web site
Limited Description – shown at the best of The only products website page

Item Types

each and every classification demands a supplied group image and an outline
classes might have subcategories, as an example, Crops can be a category and Trees is often a sub category. In addition to navigation, they behave the identical.

Products Class archives are automatically produced with the following sections:

title (group name)
description (the group description)
one group thumbnail for every sub class of the present class
optional product or service thumbs (with title, cost and Insert to Cart) for each merchandise in The existing class

Clicking with a category opens a different category, clicking an item thumbnail opens the products.
Solution Internet pages

Item Web pages are automatically produced with the subsequent sections:

Item Impression(s): the Featured Picture and supplementary visuals for your merchandise.
Product Title
Solution Selling price
Item Limited Description
Amount to incorporate to cart (with + and controls)
Insert to Cart button
Product SKU (Stock Preserving Unit), Classes and Tags
Product or service Tabs
Description: the product extended description, together with optional image gallery
Added Information and facts: the item Characteristics ticked to Display screen on item webpage
Assessments: optional product evaluations
Linked Products
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Similar Goods’ followed by thumbnails for linked products (assigned as Cross Sells or instantly chosen)

Products Image presentation alternatives:

Common presentation should be to display the Highlighted Impression at the best of the solution website page, While using the supplementary graphic thumbnails beneath in 3 columns of thumbnails
Optional presentation is always to Screen the Highlighted Graphic without having thumbnails underneath, and to Screen all photographs in The outline tab.

Products Search

Item Lookup widgets can be obtained to place in sidebar widgets or footer widgets.

Internet site Wide Lookup Selections – these look for widgets can be utilized on any web site in the website:

Solution research box (a textual content look for box that searches item name, limited description, long description)
Class drill-down (a dropdown area that enables number of any group or sub category)
Solution tag cloud

Merchandise Group Research Selections – these look for widgets will only appear when automatically generated item group archives are now being shown

Layered Navigation
Product or service Selling price Filter: shows a sliding scale allowing for products and solutions to be filtered to a cost variety
Very best Sellers: displays title/thumb/cost for immediately selected list of ideal marketing solutions
Showcased Products and solutions: shows title/thumb/rate for products and solutions ticked as Showcased Products
On Sale: shows products which Have got a Sale Price entered in addition to their Price

Styling Options

Product thumbs: when goods appear as item thumbs, 4 components are displayed: thumbnail, title, price, add to cart. CSS styling can be used for:
Solution (Each and every solution group of 4 factors): qualifications, products border, padding, margin
Thumbnail: border, padding, margins
Title: font, excess weight, colour, dimension
Cost: font, bodyweight, colour, measurement
Insert to Cart: button colour, label colour, border, radius

Sale sticker: the term ‘Sale’ appears about products thumbs on sale check here – CSS styling can be used: track record colour, font colour, border colour, border width, reliable/dashed border, border radius.
Products Variants

An item variation will allow a shopper to arrange a outfits product or service that is on the market in several colours, or various designs.

When product variants are applied, merchandise archive webpages will Show a ‘Select Options’ button rather then an Add to Cart button.

In summary, we’ve established out below the key factors that you simply’ll need to consider if you find yourself planning a WooCommerce retailer. We’ve defined the different types of internet pages, the merchandise details along with the look for and styling selections. Rejoice developing your WooCommerce store.

Leave a Reply

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