A Designer’s Manual To WooCommerce
WooCommerce supplies a wide array of solutions that can be configured for consumer Sites. This information is for a designer who's developing a WooCommerce keep from scratch or maybe a designer that's tailoring an existing WooCommerce theme.
The quickest strategy to see what capabilities there are actually is to go to the Storefront demo inside WooCommerce.
Evaluation the template to determine how it works. This document supplies a little bit more info on the sort of styling it is possible to transform as part of your layouts. It only handles WooCommerce related pages.
Principles
You will find a massive selection of ways to eCommerce. The WooCommerce plugin is incredibly versatile, but Simply because a element is applied on a web site someplace won't necessarily mean It will probably be supported by WooCommerce.
By utilizing the options and strategies supported by WooCommerce, you can speed up the process of design and development. Custom modifications can be created, but frequently involve additional expense.
Types of Pages
Product Internet pages: there are actually two styles of product or service internet pages you have got to style and design for:
Merchandise Archive Internet pages: these Exhibit thumbnails for readily available product or service groups and/or merchandise. Clicking on the class thumbnail exhibits another product archive web site, Whilst clicking on an item thumbnail shows The only item page.
Product One Web pages: these Exhibit an individual solution, and incorporate product graphic(s), product or service header data, merchandise in depth info and related products and solutions, cross sells and up sells.
Exclusive Web pages:
Purchasing Cart: the buying cart is sometimes exhibited in condensed sort like a sidebar widget, and occasionally in expanded form over the Cart site together with Delivery information,
Checkout: the moment a buyer is looking at, address information and facts is needed.
Solutions
Solution Header
Item Identify – demonstrated within the summary/archive pages and one web pages)
Item Feature – revealed about the summary/archive pages and one web pages
Picture – Showcased Impression displays on the summary, more photos on the single
Extensive Description – demonstrated within the Products Description spot, at the bottom of one merchandise web page
Shorter Description – demonstrated at the very best of The one merchandise web page
Products Groups
each classification demands a supplied group picture and an outline
groups can have subcategories, one example is, Vegetation is a group and Trees is really a sub classification. Aside from navigation, they behave the same.
Product or service Class archives are automatically produced with the following sections:
title (group name)
description (the group description)
1 group thumbnail for each sub group of the current group
optional product thumbs (with title, selling price and Add to Cart) for every item in The present category
Clicking over a category opens a whole new category, clicking a product thumbnail opens the products.
Merchandise Internet pages
Solution Internet pages are instantly created with the following sections:
Product or service Image(s): the Highlighted Image and supplementary photographs with the solution.
Products Title
Solution Selling price
Item Small Description
Quantity to incorporate to cart (with + and controls)
Increase to Cart button
Item SKU (Inventory Keeping Unit), Types and Tags
Item Tabs
Description: the product or service long description, which includes optional graphic gallery
Extra Facts: the product Attributes ticked to Exhibit on product website page
Assessments: optional item opinions
Related Solutions
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Relevant Products’ followed by thumbnails for relevant products and solutions (assigned as Cross Sells or instantly chosen)
Products Image presentation possibilities:
Conventional presentation would be to Screen the Showcased Image at the very best on the products web page, Together with the supplementary graphic thumbnails underneath in 3 columns of thumbnails
Optional presentation is usually to Display screen the Featured Picture without thumbnails beneath, also to display all photos in The outline tab.
Products Search
Solution Research widgets are offered to place in sidebar widgets or footer widgets.
Website Extensive Research Solutions – these search widgets can be utilized on any website page in the web site:
Products search box (a text lookup box that queries products name, brief description, extended description)
Group drill-down (a dropdown subject which allows selection of any class or sub class)
Merchandise tag cloud
Product or service Classification Search Choices – these lookup widgets will only look when routinely created products category archives are being displayed
Layered Navigation
Solution Price tag Filter: shows a sliding scale allowing goods for being filtered to your selling price array
Most effective Sellers: shows title/thumb/price for immediately selected list of greatest offering merchandise
Highlighted Solutions: shows title/thumb/selling price for products and solutions ticked as Showcased Products
On Sale: displays products that have a Sale Cost entered Along with their Cost
Styling Alternatives
Solution thumbs: when items look as merchandise thumbs, 4 aspects are shown: thumbnail, title, price tag, incorporate to cart. CSS styling may be used for:
Merchandise (Every single merchandise team of 4 aspects): track record, solution border, padding, margin
Thumbnail: border, padding, margins
Title: font, bodyweight, colour, measurement
Value: font, bodyweight, colour, measurement
Include to Cart: button colour, label colour, border, radius
Sale sticker: the word ‘Sale’ appears more than item 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 lets a customer to put in place a apparel solution that is obtainable in numerous colours, or different layouts.
When products variants are applied, merchandise archive webpages will Show a ‘Select Choices’ button rather than an Increase to Cart button.
In summary, we’ve established out below the more info key factors that you simply’ll require to think about while you are coming up with a WooCommerce keep. We’ve discussed the different types of pages, the products facts together with the lookup and styling choices. Rejoice developing your WooCommerce store.