A Designer’s Guidebook To WooCommerce



WooCommerce provides an array of alternatives which can be configured for consumer Internet websites. This text is for the designer who is designing a WooCommerce retail store from scratch or maybe a designer who is tailoring an present WooCommerce concept.

The fastest strategy to see what functions you will find is to go to the Storefront demo inside of WooCommerce.

Review the template to determine how it really works. This doc gives a little more info on the sort of styling you are able to change as part of your patterns. It only handles WooCommerce linked webpages.
Concepts

You will discover a massive selection of approaches to eCommerce. The WooCommerce plugin is rather versatile, but Simply because a aspect is utilized on an internet site someplace will not mean It'll be supported by WooCommerce.

By using the options and techniques supported by WooCommerce, you'll be able to speed up the entire process of structure and enhancement. Custom modifications may be generated, but frequently contain supplemental cost.
Different types of Webpages

Item Webpages: you'll find two types of product or service web pages you will need to structure for:

Product or service Archive Webpages: these display thumbnails for accessible product or service types and/or items. Clicking with a classification thumbnail reveals One more solution archive website page, whereas clicking on a product thumbnail shows The one merchandise webpage.
Products One Internet pages: these Show one merchandise, and integrate merchandise picture(s), item header data, item thorough info and associated solutions, cross sells and up sells.

Distinctive Internet pages:

Searching Cart: the procuring cart is sometimes shown in condensed kind like a sidebar widget, and often in expanded sort over the Cart page together with Supply information,
Checkout: once a consumer is looking at, address information and facts is required.

Products

Item Header

Item Identify – shown on the summary/archive pages and single internet pages)
Product or service Element – revealed over the summary/archive internet pages and solitary webpages
Picture – Featured Image shows about the summary, added photos on The only
Lengthy Description – revealed while in the Solution Description region, at the bottom of one solution web site
Brief Description – proven at the very best of The only product or service page

Solution Classes

each and every group demands a supplied classification impression and a description
categories may have subcategories, one example is, Plants is a classification and Trees can be a sub class. In addition to navigation, they behave exactly the same.

Product Group archives are instantly generated with the next sections:

title (classification name)
description (the classification description)
one particular class thumbnail for every sub class of the current category
optional product or service thumbs (with title, value and Add to Cart) for every products in The present category

Clicking over a class opens a new group, clicking an item thumbnail opens the solution.
Product Web pages

Product Web pages are automatically generated with the subsequent sections:

Solution Graphic(s): the Highlighted Impression and supplementary visuals to the products.
Solution Title
Products Value
Products Shorter Description
Quantity so as to add to cart (with + and controls)
Include to Cart button
Products SKU (Stock Trying to keep Device), Classes and Tags
Products Tabs
Description: the solution very long description, such as optional picture gallery
Added Information and facts: the solution Characteristics ticked to display on solution website page
Opinions: optional item testimonials
Similar Items
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Connected Goods’ accompanied by thumbnails for connected products (assigned as Cross Sells or routinely chosen)

Item check here Graphic presentation selections:

Common presentation is usually to Show the Featured Image at the best in the solution webpage, Together with the supplementary picture thumbnails underneath in three columns of thumbnails
Optional presentation will be to Show the Featured Graphic without any thumbnails underneath, and to Show all photographs in The outline tab.

Products Look for

Products Look for widgets are offered to position in sidebar widgets or footer widgets.

Site Broad Lookup Alternatives – these lookup widgets can be utilized on any webpage in the website:

Solution research box (a textual content research box that queries solution title, limited description, very long description)
Classification drill-down (a dropdown industry which allows number of any group or sub group)
Merchandise tag cloud

Merchandise Group Research Possibilities – these lookup widgets will only seem when instantly produced solution class archives are being displayed

Layered Navigation
Products Price Filter: displays a sliding scale permitting items to get filtered to your selling price array
Most effective Sellers: shows title/thumb/price for automatically selected list of best promoting goods
Featured Goods: displays title/thumb/price for products ticked as Featured Products
On Sale: shows products which Have got a Sale Rate entered In combination with their Rate

Styling Selections

Product or service thumbs: when solutions show up as merchandise thumbs, 4 factors are displayed: thumbnail, title, price, add to cart. CSS styling can be employed for:
Product or service (Just about every merchandise group of 4 features): history, merchandise border, padding, margin
Thumbnail: border, padding, margins
Title: font, fat, colour, dimension
Cost: font, weight, colour, sizing
Insert to Cart: button colour, label colour, border, radius

Sale sticker: the word ‘Sale’ seems about merchandise thumbs on sale – CSS styling can be utilized: background colour, font colour, border colour, border width, good/dashed border, border radius.
Merchandise Versions

An item variation lets a consumer to set up a garments solution that is available in various colours, or different models.

When solution variants are utilised, item archive internet pages will Screen a ‘Select Solutions’ button as an alternative to an Add to Cart button.

In summary, we’ve established out right here the foremost factors that you’ll need to have to think about if you find yourself developing a WooCommerce retail store. We’ve discussed the different types of web pages, the product data as well as the research and styling options. Have a great time building your WooCommerce keep.

Leave a Reply

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