A Designer’s Guide To WooCommerce

WooCommerce delivers a wide array of selections which might be configured for shopper websites. This informative article is for any designer that is planning a WooCommerce keep from scratch or maybe a designer that is tailoring an present WooCommerce topic.

The fastest technique to see what capabilities there are actually is to go to the Storefront demo inside of WooCommerce.

Evaluate the template to check out how it really works. This doc presents a tiny bit more information on the sort of styling you can change in your designs. It only handles WooCommerce similar internet pages.
Concepts

There are actually a huge selection of techniques to eCommerce. The WooCommerce plugin is rather adaptable, but Because a element is applied on a web site someplace won't signify It's going to be supported by WooCommerce.

By utilizing the characteristics and ways supported by WooCommerce, it is possible to accelerate the entire process of design and style and advancement. Customized modifications may be created, but frequently entail supplemental expense.
Kinds of Pages

Solution Web pages: you will discover 2 forms of product or service web pages you have got to style and design for:

Merchandise Archive Pages: these Show thumbnails for accessible item categories and/or products. Clicking on a category thumbnail reveals A different merchandise archive webpage, whereas clicking on an item thumbnail shows The only solution web page.
Product One Web pages: these Show a single product, and include merchandise picture(s), product header information and facts, product or service thorough info and related solutions, cross sells and up sells.

Specific Webpages:

Shopping Cart: the browsing cart is usually displayed in condensed variety being a sidebar widget, and at times in expanded form over the Cart website page together with Delivery facts,
Checkout: after a consumer is checking out, tackle details is required.

Solutions

Merchandise Header

Item Identify – demonstrated around the summary/archive internet pages and solitary webpages)
Products Element – proven on the summary/archive web pages and single internet pages
Impression – Featured Graphic displays on the summary, more photos on the single
Very long Description – proven in the Merchandise Description region, at The underside of solitary product site
Quick Description – revealed at the highest of the single product or service webpage

Products Groups

each classification wants a equipped class image and an outline
categories might have subcategories, as an example, Crops is actually a classification and Trees can be a sub class. Other than navigation, they behave the exact same.

Item Classification archives are instantly created with the following sections:

title (classification title)
description (the classification description)
a single classification thumbnail for each sub classification of the current classification
optional solution thumbs (with title, rate and Incorporate to Cart) for every solution in The existing class

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

Merchandise Pages are instantly created with the next sections:

Product or service Picture(s): the Showcased Image and supplementary photographs with the solution.
Products Title
Solution Selling price
Item Limited Description
Quantity to incorporate to cart (with + and controls)
Increase to Cart button
Item SKU (Inventory Keeping Unit), Types and Tags
Product Tabs
Description: the merchandise extensive description, which includes optional graphic gallery
Additional Data: the products Attributes ticked to Exhibit on products webpage
Opinions: optional item testimonials
Related Items
Upsells: ‘You may additionally like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Associated Merchandise’ accompanied by thumbnails for associated merchandise (assigned as Cross Sells or quickly selected)

Merchandise Graphic presentation options:

Normal presentation will be to display the Featured Impression at the best of the solution site, While using the supplementary image thumbnails underneath in three columns of thumbnails
Optional presentation should be to display the Highlighted Impression without having thumbnails underneath, and to Screen all illustrations or photos in the Description tab.

Item Lookup

Product or service Look for widgets are available to place in sidebar widgets or footer widgets.

Internet site Huge Look for Choices – these lookup widgets may be used on any site in the web site:

Product lookup box (a text research box that lookups products name, brief description, extended description)
Group drill-down (a dropdown subject which allows selection of any category or sub class)
Solution tag cloud

Merchandise Classification Look for Options – these search widgets will only seem when instantly produced product or service classification archives are increasingly being displayed

Layered Navigation
Product Cost Filter: shows a sliding scale making it possible for merchandise to get filtered to your selling price array
Most effective Sellers: shows title/thumb/rate for automatically picked click here listing of best selling products
Featured Products: 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 Solutions

Product or service thumbs: when solutions show up as product or service thumbs, four aspects are shown: thumbnail, title, value, incorporate to cart. CSS styling can be utilized for:
Item (Every item group of four features): history, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, body weight, colour, dimensions
Price tag: font, bodyweight, colour, dimension
Include to Cart: button colour, label colour, border, radius

Sale sticker: the word ‘Sale’ seems around product or service thumbs on sale – CSS styling may be used: track record colour, font colour, border colour, border width, sound/dashed border, border radius.
Item Variations

An item variation lets a customer to put in place a apparel item that is available in different colors, or unique types.

When solution variations are made use of, products archive web pages will Screen a ‘Select Options’ button rather then an Insert to Cart button.

In summary, we’ve established out right here the major elements you’ll need to have to think about when you're designing a WooCommerce retail outlet. We’ve discussed the different sorts of pages, the products data in addition to the search and styling solutions. Have a great time creating your WooCommerce shop.