A Designer’s Guidebook To WooCommerce

WooCommerce supplies an array of possibilities that could be configured for shopper websites. This informative article is for the designer that is coming up with a WooCommerce retail store from scratch or a designer who is tailoring an existing WooCommerce theme.

The quickest approach to see what functions you can find is to go to the Storefront demo inside of WooCommerce.

Critique the template to check out how it really works. This doc presents a bit more information on the kind of styling you are able to modify with your types. It only addresses WooCommerce linked web pages.

You will discover a big variety of approaches to eCommerce. The WooCommerce plugin is very adaptable, but Because a aspect is made use of on a web site someplace would not necessarily mean It will probably be supported by WooCommerce.

By utilizing the capabilities and strategies supported by WooCommerce, you may hasten the whole process of style and design and growth. Personalized modifications might be developed, but typically require added price.
Varieties of Webpages

Solution Webpages: you will find 2 kinds of products internet pages you have got to layout for:

Merchandise Archive Webpages: these Show thumbnails for available product types and/or solutions. Clicking over a class thumbnail exhibits An additional product archive web site, Whilst clicking on a product thumbnail displays the single products site.
Merchandise Solitary Webpages: these display only one product or service, and integrate item image(s), products header facts, merchandise comprehensive information and similar solutions, cross sells and up sells.

Specific Webpages:

Shopping Cart: the procuring cart is usually displayed in condensed form for a sidebar widget, and often in expanded type on the Cart web site along with Delivery information and facts,
Checkout: the moment a client is checking out, handle data is required.


Product or service Header

Solution Name – revealed about the summary/archive pages and one web pages)
Item Aspect – demonstrated around the summary/archive internet pages and solitary pages
Graphic – Highlighted Image shows within the summary, additional illustrations or photos on The only
Long Description – demonstrated inside the Product Description place, at the bottom of single product or service webpage
Short Description – demonstrated at the top of The one solution page

Merchandise Categories

just about every class needs a provided category impression and a description
types can have subcategories, such as, Vegetation is a group and Trees is really a sub group. Apart from navigation, they behave the exact same.

Item Classification archives are immediately created with the following sections:

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

Clicking with a class opens a different class, clicking an item thumbnail opens the item.
Product or service Pages

Merchandise Pages are instantly created with the following sections:

Product or service Image(s): the Highlighted Graphic and supplementary pictures for that products.
Solution Title
Product or service Price
Solution Small Description
Quantity 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 prolonged description, together with optional image gallery
Further Facts: the product Attributes ticked to Exhibit on products web page
Testimonials: optional products critiques
Connected Solutions
Upsells: ‘You may also like’ followed by thumbs/titles for upsells
Cross sells: ‘Relevant Solutions’ followed by thumbnails for associated merchandise (assigned as Cross Sells or mechanically selected)

Item Picture presentation selections:

Standard presentation would be to Screen the Showcased Graphic at the top from the solution site, with the supplementary image thumbnails underneath in three columns of thumbnails
Optional presentation will be to display the Featured Picture without thumbnails beneath, and to Show all photos in The outline tab.

Product or service Look for

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

Web page Wide Lookup Possibilities – these research widgets can be employed on any page in the website:

Solution lookup box (a textual content research box that lookups products identify, short description, lengthy description)
Class drill-down (a dropdown discipline that enables number of any classification or sub classification)
Product tag cloud

Product Class Lookup Possibilities – these research widgets will only show up when mechanically created product or service classification archives are increasingly being exhibited

Layered Navigation
Product Price Filter: displays a sliding scale allowing goods to become filtered to some cost assortment
Greatest Sellers: displays title/thumb/value for instantly chosen list of greatest offering items
Highlighted Merchandise: shows title/thumb/price tag for merchandise ticked as Highlighted Merchandise
On Sale: click here shows items that Have a very Sale Value entered As well as their Price tag

Styling Alternatives

Merchandise thumbs: when merchandise look as merchandise thumbs, four aspects are shown: thumbnail, title, value, include to cart. CSS styling can be utilized for:
Item (each product 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 over product thumbs on sale – CSS styling can be employed: history colour, font colour, border colour, border width, reliable/dashed border, border radius.
Merchandise Versions

A product variation allows a shopper to build a garments merchandise that is obtainable in numerous colours, or distinctive models.

When merchandise versions are employed, item archive pages will Display screen a ‘Opt for Possibilities’ button as opposed to an Include to Cart button.

In summary, we’ve set out in this article the most important factors that you simply’ll need to consider if you are developing a WooCommerce shop. We’ve explained the differing types of web pages, the item information and also the research and styling alternatives. Have fun setting up your WooCommerce keep.

Leave a Reply

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