A Designer’s Manual To WooCommerce
WooCommerce provides a variety of options that may be configured for consumer Sites. This text is to get a designer who's planning a WooCommerce retail outlet from scratch or maybe a designer that's tailoring an present WooCommerce topic.
The quickest way to see what attributes you'll find is to visit the Storefront demo within WooCommerce.
Overview the template to view how it really works. This doc delivers a tiny bit more info on the sort of styling you could change in your styles. It only covers WooCommerce associated pages.
Principles
You will find an enormous selection of methods to eCommerce. The WooCommerce plugin is quite versatile, but just because a characteristic is employed on an internet site somewhere doesn't imply It will likely be supported by WooCommerce.
By using the attributes and methods supported by WooCommerce, you are able to speed up the process of style and improvement. Customized modifications may be produced, but often involve supplemental expenditure.
Sorts of Web pages
Merchandise Web pages: you'll find 2 types of item pages you must style and design for:
Product or service Archive Web pages: these Screen thumbnails for obtainable item categories and/or products and solutions. Clicking with a group thumbnail displays Yet another item archive page, Whilst clicking on an item thumbnail displays the single product web site.
Product or service Solitary Webpages: these Show a single product or service, and integrate solution image(s), product header information and facts, product or service in depth info and related products, cross sells and up sells.
Distinctive Web pages:
Purchasing Cart: the buying cart is typically shown in condensed kind as being a sidebar widget, and in some cases in expanded sort within the Cart web page along with Shipping details,
Checkout: once a shopper is trying out, deal with information is necessary.
Merchandise
Item Header
Products Title – proven on the summary/archive web pages and single internet pages)
Product or service Characteristic – shown to the summary/archive webpages and single web pages
Picture – Showcased Impression displays over the summary, added pictures on The one
Prolonged Description – shown from the Solution Description area, at The underside of solitary product site
Quick Description – shown at the highest of the single products web site
Merchandise Categories
every single category desires a supplied group image and an outline
classes might have subcategories, as an example, Crops is actually a classification and Trees is actually a sub classification. Aside from navigation, they behave a similar.
Solution Classification archives are routinely generated with the next sections:
title (category title)
description (the category description)
one particular category thumbnail for every sub category of the present category
optional product or service thumbs (with title, cost and Insert to Cart) for each merchandise in the current class
Clicking with a class opens a different category, clicking an item thumbnail opens the product.
Solution Internet pages
Solution Internet pages are immediately created with the following sections:
Merchandise Image(s): the Highlighted Graphic and supplementary pictures for that product.
Solution Title
Product or service Cost
Merchandise Short Description
Quantity so as to add to cart (with + and controls)
Include to Cart button
Merchandise SKU (Inventory Preserving Unit), Types and Tags
Solution Tabs
Description: the product or service long description, like optional image gallery
Further Facts: the item Attributes ticked to Exhibit on product website page
Reviews: optional merchandise opinions
Associated Merchandise
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Connected Merchandise’ accompanied by thumbnails for associated merchandise (assigned as Cross Sells or quickly selected)
Merchandise Image presentation alternatives:
Typical presentation should be to Show the Highlighted Graphic at the highest of the merchandise web page, Using the supplementary impression thumbnails underneath in 3 columns of thumbnails
Optional presentation will be to Show the Showcased Image without any thumbnails beneath, also to display all pictures in the Description tab.
Product or service Look for
Item Lookup widgets can be obtained to position in sidebar widgets or footer widgets.
Web page Broad Lookup Possibilities – these research widgets can be employed on any page in the website:
Solution research box (a textual content search box that searches item title, small description, long description)
Class drill-down (a dropdown area that permits variety of any group or sub classification)
Product tag cloud
Item Class Research Possibilities – these look for widgets will only surface when automatically generated item class archives are now being shown
Layered Navigation
Product or service Rate Filter: shows a sliding scale allowing goods for being filtered to your selling price array
Most effective Sellers: shows title/thumb/price for automatically selected list of very best promoting items
Highlighted Merchandise: shows title/thumb/price tag for solutions ticked as Showcased Solutions
On Sale: shows products which Use a Sale Selling price entered In combination with their Rate
Styling Solutions
Product thumbs: when products appear as product thumbs, four features are exhibited: thumbnail, title, rate, add to cart. CSS styling can be employed for:
Products (each products team of four things): history, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, body weight, colour, dimensions
Price tag: font, fat, colour, measurement
Incorporate to Cart: button colour, label colour, border, radius
Sale sticker: the phrase ‘Sale’ appears more than item thumbs on sale – CSS styling can be used: background colour, font colour, border colour, border width, good/dashed border, border radius.
Products Variants
An item variation makes it possible for a customer to create a clothes item that is available in different colors, or unique models.
When merchandise versions are employed, item archive pages will Display screen a ‘Pick out Selections’ button as an alternative to an Incorporate to Cart button.
In summary, we’ve set out here the foremost features you’ll need to have to think about when you're designing a WooCommerce retail store. We’ve spelled out the different sorts of webpages, the product information and facts together with the research and styling alternatives. Have fun setting up ΚΑΤΑΣΚΕΥΗ E-SHOP your WooCommerce retail outlet.