A Designer’s Tutorial To WooCommerce
WooCommerce gives a wide range of choices that may be configured for consumer Sites. This text is for your designer that's building a WooCommerce retail store from scratch or a designer who is tailoring an existing WooCommerce theme.
The quickest method to see what attributes you'll find is to visit the Storefront demo inside WooCommerce.
Assessment the template to find out how it works. This document offers a little more details on the kind of styling you are able to alter inside your styles. It only covers WooCommerce associated pages.
Principles
There are a huge variety of approaches to eCommerce. The WooCommerce plugin may be very adaptable, but Because a element is applied on an internet site someplace will not suggest It'll be supported by WooCommerce.
By using the attributes and approaches supported by WooCommerce, you can increase the whole process of style and design and progress. Custom made modifications could be made, but frequently involve supplemental expenditure.
Sorts of Web pages
Solution Webpages: you will find 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 web site, While clicking on a product thumbnail displays The one merchandise webpage.
Item One Web pages: these Screen just one products, and include solution image(s), products header facts, solution comprehensive information and facts and linked items, cross sells and up sells.
Unique Internet pages:
Searching Cart: the purchasing cart is sometimes exhibited in condensed kind as a sidebar widget, and in some cases in expanded kind around the Cart web site along with Shipping and delivery information,
Checkout: the moment a client is checking out, tackle details is required.
Solutions
Merchandise Header
Item Identify – proven on the summary/archive internet pages and solitary internet pages)
Merchandise Function – revealed about the summary/archive pages and one webpages
Graphic – Highlighted Image shows around the summary, supplemental photos on the single
Very long Description – proven during the Solution Description area, at The underside of single product or service webpage
Shorter Description – demonstrated at the top of The only item site
Solution Types
each and every classification demands a supplied group image and an outline
categories may have subcategories, for instance, Vegetation is really a group and Trees is really a sub group. Apart from navigation, they behave the exact same.
Item 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 present class
optional products thumbs (with title, value and Insert to Cart) for each merchandise in the current group
Clicking with a class opens a different category, clicking a product thumbnail opens the product or service.
Item Web pages
Product Webpages are mechanically generated with the next sections:
Products Picture(s): the Highlighted Graphic and supplementary pictures for that product.
Solution Title
Product or service Price
Merchandise Shorter Description
Quantity to include to cart (with + and controls)
Increase to Cart button
Item SKU (Inventory Holding Unit), Classes and Tags
Product or service Tabs
Description: the product extended description, which include optional image gallery
Further Data: the products Attributes ticked to Screen on product or service page
Evaluations: optional product or service 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 Show the Highlighted Impression at the best of your item 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 Show all photographs in The outline tab.
Products Search
Item Lookup widgets can be found to put in sidebar widgets or footer widgets.
Web-site Large Search Choices – these lookup widgets can be utilized on any website page in the web site:
Product or service look for box (a textual content search box that searches item title, quick description, prolonged description)
Group drill-down (a dropdown subject which allows array of any category or sub category)
Item tag cloud
Solution Class Lookup Possibilities – these research widgets will only show up when mechanically created products classification archives are increasingly being exhibited
Layered Navigation
Product Price Filter: displays a sliding scale permitting goods to become filtered to some value assortment
Greatest Sellers: displays title/thumb/value for routinely chosen list of greatest offering merchandise
Highlighted Items: displays title/thumb/value for items ticked as Highlighted Items
On Sale: displays products that Possess a Sale Cost entered Along with their Cost
Styling Choices
Item thumbs: when goods appear as product thumbs, 4 features are exhibited: thumbnail, title, selling price, insert to cart. CSS styling may be used for:
Merchandise (Every single solution group of 4 elements): background, products border, padding, margin
Thumbnail: border, padding, margins
Title: font, pounds, colour, dimensions
Selling price: font, fat, colour, measurement
Incorporate to Cart: button colour, label colour, border, radius
Sale sticker: the word ‘Sale’ appears over products thumbs on sale – CSS styling can be employed: qualifications colour, website font colour, border colour, border width, sound/dashed border, border radius.
Solution Variations
A product variation will allow a customer to put in place a apparel item that is accessible in different colors, or diverse patterns.
When item variations are used, 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 features you’ll need to have to think about when you are building a WooCommerce keep. We’ve described the different types of internet pages, the product or service details along with the look for and styling selections. Rejoice developing your WooCommerce retail store.