A Designer’s Guidebook 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 designing a WooCommerce shop from scratch or perhaps a designer who's tailoring an current WooCommerce concept.
The fastest strategy to see what characteristics you will discover is to go to the Storefront demo inside of WooCommerce.
Critique the template to discover how it really works. This doc delivers a little bit more info on the sort of styling you may transform as part of your models. It only handles WooCommerce linked web pages.
Rules
You can find a tremendous assortment of techniques to eCommerce. The WooCommerce plugin is incredibly versatile, but Simply because a characteristic is employed on a website somewhere does not mean it will be supported by WooCommerce.
By utilizing the capabilities and techniques supported by WooCommerce, you may hasten the entire process of design and style and advancement. Customized modifications may be produced, but often contain more price.
Forms of Webpages
Item Pages: there are two styles of product or service web pages you need to style for:
Product Archive Internet pages: these Exhibit thumbnails for offered solution categories and/or products. Clicking with a group thumbnail displays An additional product archive site, While clicking on a product thumbnail displays The one merchandise webpage.
Item One Web pages: these Screen just one products, and include merchandise picture(s), product header facts, merchandise comprehensive information and linked merchandise, cross sells and up sells.
Particular Pages:
Browsing Cart: the searching cart is sometimes exhibited in condensed kind as being a sidebar widget, and sometimes in expanded sort within the Cart page along with Shipping and delivery info,
Checkout: at the time a buyer is checking out, handle data is required.
Products and solutions
Merchandise Header
Item Identify – demonstrated on the summary/archive internet pages and solitary pages)
Merchandise Function – revealed about the summary/archive pages and one webpages
Graphic – Highlighted Image shows around the summary, supplemental photographs on the single
Very long Description – proven during the Merchandise Description area, at The underside of single products webpage
Short Description – demonstrated at the top of The one item web site
Solution Categories
every single category demands a supplied group image and an outline
categories might have subcategories, for instance, Crops is really a classification and Trees is really a sub classification. Apart from navigation, they behave a similar.
Solution Classification archives are instantly created with the following sections:
title (classification name)
description (the group description)
1 group thumbnail for each sub group of the current class
optional products thumbs (with title, value and Increase to Cart) for each products in The present classification
Clicking on the group opens a new group, clicking an item thumbnail opens the item.
Product or service Pages
Merchandise Internet pages are instantly created with the following sections:
Merchandise Graphic(s): the Featured Impression and supplementary images to the products.
Solution Title
Product or service Price
Solution Shorter Description
Quantity to include to cart (with + and controls)
Increase to Cart button
Item SKU (Inventory Holding Unit), Groups and Tags
Products Tabs
Description: the item prolonged description, together with optional image gallery
Added Information and facts: the item Attributes ticked to Display screen on product webpage
Opinions: optional product evaluations
Linked Products
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Similar Goods’ followed by thumbnails for linked products (assigned as Cross Sells or immediately chosen)
Products Image presentation alternatives:
Common presentation should be to display the Featured Impression at the highest of your product webpage, Together with the supplementary impression thumbnails beneath in 3 columns of thumbnails
Optional presentation would be to Screen the Highlighted Impression without having thumbnails beneath, and to Show all photos in The outline tab.
Product or service Look for
Product Search widgets can be found to put in sidebar widgets or footer widgets.
Internet site Huge Look for Choices – these research widgets can be used on any site in the web site:
Product search box (a text research box that lookups products identify, short description, long description)
Category drill-down (a dropdown area that permits variety of any group or sub classification)
Products tag cloud
Product Category Lookup Alternatives – these lookup widgets will only look when routinely created products category archives are being displayed
Layered Navigation
Item Value Filter: displays a sliding scale making it possible for solutions being filtered to your read more rate vary
Most effective Sellers: shows title/thumb/price for automatically selected list of best selling products
Featured Goods: displays title/thumb/cost for goods ticked as Featured Goods
On Sale: displays products that have a Sale Price entered in addition to their Price
Styling Options
Product thumbs: when products appear as product thumbs, four features are exhibited: thumbnail, title, rate, increase to cart. CSS styling can be employed for:
Products (Each individual product or service team of four aspects): track record, solution border, padding, margin
Thumbnail: border, padding, margins
Title: font, bodyweight, colour, dimension
Cost: font, weight, colour, size
Increase to Cart: button colour, label colour, border, radius
Sale sticker: the term ‘Sale’ seems in excess of merchandise thumbs on sale – CSS styling can be utilized: track record colour, font colour, border colour, border width, strong/dashed border, border radius.
Product Variants
An item variation lets a customer to create a clothes item that is available in different colors, or unique types.
When solution variations are utilized, merchandise archive webpages will Screen a ‘Decide on Solutions’ button in lieu of an Insert to Cart button.
In summary, we’ve established out below the key factors that you simply’ll need to consider if you find yourself coming up with a WooCommerce retailer. We’ve defined the different types of internet pages, the product or service facts plus the lookup and styling options. Have some fun making your WooCommerce retailer.