A Designer’s Guide To WooCommerce

WooCommerce delivers a wide array of solutions that can be configured for client Internet sites. This post is for your designer that's building a WooCommerce store from scratch or perhaps a designer who's tailoring an current WooCommerce concept.

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

Review the template to determine how it works. This document offers a little more information on the kind of styling you'll be able to modify with your types. It only addresses WooCommerce relevant web pages.

You can find a tremendous range of techniques to eCommerce. The WooCommerce plugin is rather versatile, but Simply because a characteristic is employed on a website somewhere does not necessarily mean It will probably be supported by WooCommerce.

By utilizing the characteristics and ways supported by WooCommerce, you'll be able to speed up the process of structure and progress. Personalized modifications could be made, but frequently involve supplemental price.
Forms of Webpages

Item Internet pages: there are actually two sorts of item internet pages you have got to layout for:

Solution Archive Pages: these Display screen thumbnails for readily available merchandise classes and/or products. Clicking with a group thumbnail exhibits another product or service archive website page, whereas clicking on an item thumbnail shows The only product web site.
Merchandise Single Internet pages: these Exhibit an individual product, and include merchandise image(s), products header facts, solution detailed facts and relevant goods, cross sells and up sells.

Distinctive Web pages:

Buying Cart: the procuring cart is usually displayed in condensed variety being a sidebar widget, and occasionally in expanded variety about the Cart web page along with Shipping and delivery information,
Checkout: the moment a client is checking out, tackle details is necessary.


Item Header

Product or service Title – revealed about the summary/archive pages and one webpages)
Products Attribute – shown to the summary/archive webpages and one webpages
Image – Highlighted Image shows around the summary, more photos on The one
Extended Description – shown while in the Product Description place, at the bottom of one item site
Brief Description – revealed at the very best of The one solution web site

Solution Types

each and every classification wants a equipped class graphic and a description
types can have subcategories, one example is, Plants is often a class and Trees is often a sub category. Besides navigation, they behave exactly the same.

Product or service Category archives are routinely generated with the next sections:

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

Clicking over a classification opens a fresh classification, clicking a product thumbnail opens the merchandise.
Product Webpages

Product or service Pages are routinely generated with the next sections:

Products Image(s): the Highlighted Graphic and supplementary pictures for that product.
Solution Title
Product or service Price
Solution Shorter Description
Quantity to incorporate to cart (with + and controls)
Increase to Cart button
Product SKU (Stock Preserving Unit), Classes and Tags
Product or service Tabs
Description: the product extended description, which include optional graphic gallery
Extra Data: the products Attributes ticked to Screen on product or service page
Evaluations: optional merchandise assessments
Associated Merchandise
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Associated Merchandise’ accompanied by thumbnails for related goods (assigned as Cross Sells or routinely picked)

Product Image presentation alternatives:

Typical presentation should be to display the Highlighted Impression at the highest of your product webpage, Together with the supplementary graphic thumbnails beneath in 3 columns of thumbnails
Optional presentation would be to Screen the Highlighted Graphic without having thumbnails underneath, and to Screen all photographs in The outline tab.

Products Search

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

Web page Wide Search Choices – these lookup widgets may be used on any site in the web site:

Products search box (a text search box that searches solution title, limited description, very long description)
Classification drill-down (a dropdown industry that allows selection of any category or sub class)
Solution tag cloud

Merchandise Group Research Selections – these look for widgets will only surface when automatically generated product category archives are being displayed

Layered Navigation
Item Value Filter: displays a sliding scale enabling items to get filtered into a price tag selection
Finest Sellers: shows title/thumb/selling price for mechanically picked listing of finest providing solutions
Showcased Solutions: shows title/thumb/selling price for solutions ticked as Highlighted Merchandise
On Sale: shows items that Have a very Sale Price tag entered Together with their Price tag

Styling Possibilities

Merchandise thumbs: when items look as solution thumbs, 4 components are displayed: thumbnail, title, price, add to cart. CSS styling can be used for:
Product (Each individual products team of four aspects): track record, solution border, padding, margin
Thumbnail: border, padding, margins
Title: font, bodyweight, colour, dimension
Price: font, excess weight, colour, sizing
Include to Cart: button colour, label colour, border, radius

Sale sticker: the term ‘Sale’ seems around product thumbs on sale – CSS styling can be used: background colour, font colour, border colour, border width, solid/dashed border, border radius.
Products Variants

An item variation will allow a shopper to build a garments solution that is offered in numerous colours, or different layouts.

When products variants are applied, merchandise archive webpages will display a ‘Choose Solutions’ button rather then an Insert to Cart button.

In summary, we’ve set out right here the major features you’ll will need to think about when you find yourself designing a WooCommerce store. We’ve spelled out the different sorts of web pages, the item information together with the research and styling choices. Have click here fun setting up your WooCommerce keep.

Leave a Reply

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