A Designer’s Guidebook To WooCommerce



WooCommerce provides a variety of solutions that can be configured for client Web sites. This post is for the designer that is coming up with a WooCommerce retail outlet from scratch or simply a designer that's tailoring an present WooCommerce topic.

The fastest solution to see what options there are is to visit the Storefront demo inside of WooCommerce.

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

There are actually a big a number of techniques to eCommerce. The WooCommerce plugin is rather versatile, but Simply because a characteristic is utilized on a website someplace would not signify It's going to be supported by WooCommerce.

By using the functions and methods supported by WooCommerce, you can increase the whole process of style and design and growth. Custom made modifications may be created, but normally contain added cost.
Kinds of Pages

Products Web pages: you can find 2 kinds of products web pages you need to style for:

Product Archive Internet pages: these Exhibit thumbnails for obtainable item types and/or solutions. Clicking on the category thumbnail reveals A different solution archive web page, Whilst clicking on an item thumbnail displays the single products website page.
Solution Single Internet pages: these Screen just one products, and integrate item image(s), product or service header details, product in-depth data and associated products and solutions, cross sells and up sells.

Specific Webpages:

Shopping Cart: the browsing cart is sometimes exhibited in condensed sort as being a sidebar widget, and sometimes in expanded sort around the Cart web site along with Delivery information and facts,
Checkout: when a customer is trying out, deal with information and facts is needed.

Goods

Products Header

Solution Name – demonstrated around the summary/archive internet pages and solitary internet pages)
Merchandise Feature – demonstrated within the summary/archive internet pages and solitary pages
Impression – Featured Impression displays to the summary, further visuals on The only
Long Description – demonstrated in the Product or service Description space, at The underside of single product page
Short Description – revealed at the very best of The one solution page

Product or service Classes

just about every class desires a provided category impression and a description
groups can have subcategories, by way of example, Plants is usually a class and Trees is actually a sub classification. Aside from navigation, they behave the same.

Merchandise Category archives are routinely generated with the next sections:

title (classification title)
description (the classification description)
a single classification thumbnail for each sub classification of the current group
optional item thumbs (with title, selling price and Include to Cart) for every item in The existing class

Clicking over a category opens a different category, clicking an item thumbnail opens the product.
Merchandise Pages

Merchandise Web pages are automatically produced with the next sections:

Merchandise Picture(s): the Featured Graphic and supplementary illustrations or photos for that merchandise.
Product Title
Merchandise Rate
Merchandise Short Description
Quantity so as to add to cart (with + and controls)
Add to Cart button
Merchandise SKU (Inventory Retaining Device), Categories and Tags
Merchandise Tabs
Description: the products extended description, which include optional image gallery
Further Information and facts: the item Characteristics ticked to Display screen on solution site
Reviews: optional solution opinions
Associated Merchandise
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Connected Solutions’ followed by thumbnails for similar goods (assigned as Cross Sells or routinely picked)

Item Impression presentation solutions:

Regular presentation is usually to Display screen the Featured Picture at the highest of your item website page, with the supplementary picture thumbnails underneath in three columns of thumbnails
Optional presentation is to Show the Highlighted Impression without having thumbnails underneath, and also to Screen all illustrations or photos in the Description tab.

Item Research

Product WORDPRESS ESHOP or service Look for widgets are available to put in sidebar widgets or footer widgets.

Internet site Huge Look for Choices – these lookup widgets can be employed on any page in the website:

Solution research box (a textual content look for box that lookups item name, limited description, very long description)
Classification drill-down (a dropdown field that allows collection of any group or sub group)
Products tag cloud

Product Category Lookup Alternatives – these research widgets will only show up when quickly generated item class archives are now being shown

Layered Navigation
Merchandise Selling price Filter: shows a sliding scale allowing for products to become filtered to some value selection
Ideal Sellers: shows title/thumb/selling price for quickly picked list of very best promoting items
Highlighted Merchandise: shows title/thumb/price tag for solutions ticked as Showcased Solutions
On Sale: shows products which Use a Sale Selling price entered In combination with their Rate

Styling Solutions

Product thumbs: when products appear as product thumbs, 4 elements are exhibited: thumbnail, title, rate, add to cart. CSS styling can be employed for:
Products (Each individual products team of four things): history, product or service 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 phrase ‘Sale’ appears more than item thumbs on sale – CSS styling can be used: background colour, font colour, border colour, border width, good/dashed border, border radius.
Products Variants

An item variation makes it possible for a customer to create a clothes item that is accessible in different colors, or unique models.

When merchandise versions are employed, item archive pages will Display screen a ‘Pick out Selections’ button as an alternative to an Incorporate to Cart button.

In summary, we’ve set out here the foremost features you’ll need to have to think about when you're designing a WooCommerce retail store. We’ve spelled out the different sorts of webpages, the item information and also the research and styling alternatives. Have a good time building your WooCommerce retail store.

Leave a Reply

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