A Designer’s Guide To WooCommerce
WooCommerce provides a variety of options that may be configured for consumer Sites. This information is for a designer who is creating a WooCommerce retailer from scratch or possibly a designer that is tailoring an present WooCommerce concept.
The fastest technique to see what capabilities you will discover is to go to the Storefront demo inside of WooCommerce.
Evaluate the template to check out how it really works. This doc delivers a tiny bit more info on the sort of styling you could improve in the layouts. It only handles WooCommerce linked web pages.
Rules
You will discover a large range 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 options and techniques supported by WooCommerce, you may hasten the entire process of design and style and advancement. Customized modifications can be produced, but normally contain more price.
Varieties of Webpages
Item Pages: there are actually two forms of solution webpages you will have to design for:
Products Archive Web pages: these Screen thumbnails for obtainable item categories and/or products and solutions. Clicking over a class thumbnail exhibits another products archive website page, While clicking on a product thumbnail shows The only solution web page.
Product One Web pages: these Show a single product or service, and integrate item image(s), product or service header data, solution detailed information and facts and relevant items, cross sells and up sells.
Special Internet pages:
Searching Cart: the buying cart is typically shown in condensed type as a sidebar widget, and from time to time in expanded kind around the Cart web site along with Delivery information and facts,
Checkout: after a consumer is testing, tackle info is necessary.
Merchandise
Item Header
Products Title – shown over the summary/archive web pages and single web pages)
Solution Feature – demonstrated around the summary/archive internet pages and solitary pages
Impression – Featured Graphic shows around the summary, supplemental photos on the single
Prolonged Description – shown during the Solution Description area, at The underside of single product or service web page
Shorter Description – proven at the best of The only product website page
Item Groups
each classification wants a equipped class graphic and a description
types may have subcategories, for example, Vegetation is a group and Trees is a sub group. Other than navigation, they behave the exact same.
Item Classification archives are immediately created with the following sections:
title (group name)
description (the group description)
1 group thumbnail for each sub class of the present class
optional products thumbs (with title, cost and Insert to Cart) for each merchandise in The existing class
Clicking over a category opens a whole new classification, clicking a product thumbnail opens the product or service.
Product Webpages
Products Pages are routinely created with the following sections:
Product or service Image(s): the Highlighted Impression and supplementary images to the products.
Item Title
Merchandise Price
Solution Shorter Description
Quantity to include to cart (with + and controls)
Increase to Cart button
Solution SKU (Inventory Keeping Unit), Groups and Tags
Products Tabs
Description: the item prolonged description, together with optional image gallery
Added Information and facts: the item Characteristics ticked to Exhibit on product webpage
Opinions: optional products critiques
Relevant Products and solutions
Upsells: ‘You may also like’ followed by thumbs/titles for upsells
Cross sells: ‘Relevant Products and solutions’ followed by thumbnails for connected solutions (assigned as Cross Sells or quickly selected)
Solution Impression presentation selections:
Standard presentation would be to Screen the Showcased Graphic at the top from the merchandise site, While using the supplementary image thumbnails underneath in 3 columns of thumbnails
Optional presentation is usually to Display screen the Showcased Image without any thumbnails underneath, and also to Exhibit all visuals in the Description tab.
Item Lookup
Merchandise Research widgets are offered to position in sidebar widgets or footer widgets.
Site Broad Lookup Alternatives – these research widgets may be used on any web site in the web site:
Product search box (a text lookup box that queries merchandise title, small description, extensive description)
Classification drill-down (a dropdown field that allows choice of any class or sub class)
Solution tag cloud
Merchandise Group Research Selections – these look for widgets will only surface when automatically generated product category archives are being displayed
Layered Navigation
Item Cost Filter: displays a sliding scale enabling items for being filtered into a price tag selection
Finest Sellers: shows title/thumb/selling price for mechanically picked listing of finest providing solutions
Showcased Solutions: shows title/thumb/price tag for merchandise ticked as Highlighted Merchandise
On Sale: shows items that Have a very Sale Value entered As well as their Value
Styling Alternatives
Solution thumbs: when goods seem as item thumbs, 4 elements are displayed: thumbnail, title, rate, increase to cart. CSS styling can be employed for:
Product or service (Just about every merchandise team of 4 components): background, product border, padding, margin
Thumbnail: border, padding, margins
Title: font, weight, colour, sizing
Rate: font, body weight, colour, dimensions
Incorporate to Cart: button colour, label more info colour, border, radius
Sale sticker: the phrase ‘Sale’ appears over product thumbs on sale – CSS styling can be employed: history colour, font colour, border colour, border width, reliable/dashed border, border radius.
Merchandise Versions
A product variation allows a shopper to build a garments merchandise that is obtainable in different colours, or distinctive models.
When merchandise versions are utilized, product archive internet pages will Exhibit a ‘Decide on Alternatives’ button instead of an Add to Cart button.
In summary, we’ve established out below the key components that you’ll have to have to consider when you find yourself creating a WooCommerce retail store. We’ve spelled out the different sorts of webpages, the product facts plus the lookup and styling options. Have some fun constructing your WooCommerce retailer.