A Designer’s Guideline To WooCommerce
WooCommerce gives a wide range of choices that may be configured for consumer Sites. This text is for just a designer that's designing a WooCommerce store from scratch or perhaps a designer who is tailoring an existing WooCommerce theme.
The quickest method to see what functions you can find is to go to the Storefront demo within WooCommerce.
Overview the template to view how it really works. This doc supplies a tad additional information on the type of styling it is possible to adjust with your types. It only addresses WooCommerce relevant webpages.
Ideas
You'll find a massive selection of methods to eCommerce. The WooCommerce plugin is extremely flexible, but just because a feature is used on a web site someplace won't signify Will probably be supported by WooCommerce.
By utilizing the characteristics and ways supported by WooCommerce, you'll be able to quicken the process of design and development. Tailor made modifications is often generated, but typically entail further expense.
Types of Internet pages
Products Internet pages: you will discover two sorts of item pages you must style and design for:
Merchandise Archive Webpages: these Show thumbnails for available products types and/or merchandise. Clicking on the category thumbnail reveals A different merchandise archive webpage, whereas clicking on an item thumbnail shows The only product web site.
Product or service Solitary Webpages: these display one merchandise, and incorporate product graphic(s), merchandise header details, product in-depth data and connected products, cross sells and up sells.
Distinctive Web pages:
Buying Cart: the shopping cart is typically shown in condensed form for a sidebar widget, and often in expanded type over the Cart site together with Delivery facts,
Checkout: when a customer is testing, deal with information is necessary.
Items
Product Header
Product or service Title – shown to the summary/archive webpages and one web pages)
Item Aspect – proven on the summary/archive web pages and single internet pages
Picture – Featured Impression displays over the summary, added images on The one
Extended Description – revealed while in the Item Description place, at the bottom of one solution page
Limited Description – shown at the highest of the single product or service webpage
Products Classes
every group requirements a equipped category graphic and a description
groups can have subcategories, one example is, Plants is usually a class and Trees is usually a sub class. In addition to navigation, they behave precisely the same.
Product Group archives are automatically produced with the subsequent sections:
title (class identify)
description (the class description)
just more info one class thumbnail for every sub category of the present category
optional solution thumbs (with title, rate and Incorporate to Cart) for every item in The existing category
Clicking over a category opens a fresh classification, clicking a product thumbnail opens the product or service.
Item Web pages
Product Webpages are quickly generated with the next sections:
Product Picture(s): the Showcased Image and supplementary photographs for the solution.
Product or service Title
Item Price tag
Product Quick Description
Amount to add to cart (with + and controls)
Incorporate to Cart button
Products SKU (Stock Preserving Device), Classes and Tags
Product or service Tabs
Description: the product extended description, which include optional image gallery
Further Facts: the product Attributes ticked to Display screen on item site
Reviews: optional solution opinions
Related Items
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Connected Solutions’ followed by thumbnails for connected solutions (assigned as Cross Sells or automatically selected)
Merchandise Graphic presentation choices:
Common presentation should be to display the Highlighted Impression at the best of the solution site, with the supplementary picture thumbnails underneath in three columns of thumbnails
Optional presentation should be to Show the Highlighted Impression without having thumbnails underneath, and to Screen all illustrations or photos in The outline tab.
Product Lookup
Merchandise Look for widgets are available to place in sidebar widgets or footer widgets.
Web site Huge Look for Options – these lookup widgets can be utilized on any website page in the web site:
Product search box (a text lookup box that queries product or service identify, short description, lengthy description)
Class drill-down (a dropdown discipline that enables number of any classification or sub classification)
Product tag cloud
Item Class Lookup Alternatives – these research widgets will only show up when mechanically created products category archives are being displayed
Layered Navigation
Item Value Filter: displays a sliding scale making it possible for merchandise being filtered to your rate vary
Best Sellers: displays title/thumb/price for immediately selected list of very best promoting items
Highlighted Items: displays title/thumb/value for items ticked as Highlighted Items
On Sale: displays products that Possess a Sale Cost entered As well as their Value
Styling Alternatives
Solution thumbs: when items seem as item thumbs, 4 components are displayed: thumbnail, title, price, add to cart. CSS styling can be used for:
Product (Each individual products team of four things): qualifications, merchandise border, padding, margin
Thumbnail: border, padding, margins
Title: font, fat, colour, measurement
Value: font, excess weight, colour, dimension
Add to Cart: button colour, label colour, border, radius
Sale sticker: the word ‘Sale’ seems about 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 will allow a customer to put in place a apparel solution that is accessible in different colors, or distinctive models.
When merchandise versions are utilized, product archive internet pages will Exhibit a ‘Decide on Alternatives’ button as opposed to an Add to Cart button.
In summary, we’ve established out below the key factors that you simply’ll need to consider if you find yourself planning a WooCommerce shop. We’ve explained the differing types of web pages, the solution info as well as the look for and styling selections. Rejoice developing your WooCommerce store.