A Designer’s Tutorial To WooCommerce
WooCommerce delivers a wide array of solutions that can be configured for consumer Sites. This information is for a designer who is developing a WooCommerce keep from scratch or maybe a designer who is 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 you could change inside your styles. It only addresses WooCommerce connected web pages.
Rules
You will discover a large a number of strategies to eCommerce. The WooCommerce plugin may be very flexible, but just because a feature is used on a website somewhere does not imply It will likely be supported by WooCommerce.
By using the attributes and methods supported by WooCommerce, you'll be able to quicken the entire process of design and style and advancement. Customized modifications could be made, but usually entail further cost.
Varieties of Webpages
Item Pages: you will find 2 kinds of product internet pages you must structure for:
Product or service Archive Web pages: these Exhibit thumbnails for offered merchandise classes and/or items. Clicking on the category thumbnail shows A further products archive site, While clicking on a product thumbnail displays the single product web site.
Product or service Solitary Webpages: these Show just one product, and include product or service impression(s), solution header info, item detailed information and facts and linked merchandise, cross sells and up sells.
Particular Web pages:
Purchasing Cart: the buying cart is typically shown in condensed type as a sidebar widget, and in some cases in expanded sort within the Cart page along with Shipping info,
Checkout: once a purchaser is looking at, address information and facts is needed.
Goods
Product Header
Product or service Title – shown to the summary/archive webpages and single internet pages)
Merchandise Function – revealed about the summary/archive pages and one webpages
Image – Showcased Picture shows about the summary, extra visuals on The only
Lengthy Description – revealed while in the Product Description place, at the bottom of one merchandise web page
Shorter Description – proven at the top of The only item web site
Solution Categories
just about every class requires a provided category impression and a description
groups can have subcategories, one example is, Vegetation is usually a class and Trees is a sub group. Other than navigation, they behave the exact same.
Solution Classification archives are instantly created with the next sections:
title (classification title)
description (the classification description)
a single classification thumbnail for each sub classification of the current classification
optional solution thumbs (with title, rate and Incorporate to Cart) for every solution in The existing class
Clicking with a class opens a new class, clicking an item thumbnail opens the solution.
Products Webpages
Product or service Webpages are mechanically generated with the next sections:
Product Impression(s): the Showcased Picture and supplementary visuals for your product or service.
Item Title
Merchandise Price
Merchandise Shorter Description
Quantity to include to cart (with + and controls)
Add to Cart button
Products SKU (Stock Preserving Unit), Types and Tags
Item Tabs
Description: the merchandise long description, which includes optional graphic gallery
Extra Data: the product Attributes ticked to Exhibit on product website page
Assessments: optional item testimonials
Similar Items
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Associated Merchandise’ accompanied by thumbnails for associated merchandise (assigned as Cross Sells or quickly selected)
Merchandise Graphic presentation options:
Common presentation will be to display the Highlighted Impression at the best from the solution site, with the supplementary picture thumbnails beneath in three columns of thumbnails
Optional presentation is to Show the Highlighted Graphic with no thumbnails underneath, and also to Exhibit all visuals in the Description tab.
Solution Research
Product or service Search widgets can be found to put in sidebar widgets or footer widgets.
Web-site Large Search Alternatives – these research widgets may be used on any web site in the website:
Item research box (a text research box that lookups products name, quick description, prolonged description)
Group drill-down (a dropdown industry that allows choice of any class or sub class)
Merchandise tag cloud
Products Classification Search Choices – these lookup widgets will only look when mechanically created products category archives are being displayed
Layered Navigation
Solution Price tag Filter: shows a sliding scale letting products and solutions to be filtered to a cost assortment
Greatest Sellers: shows title/thumb/price tag for mechanically picked listing of most effective advertising products
Featured Goods: displays title/thumb/cost for items ticked as Highlighted Items
On Sale: displays items here that Have a very Sale Price tag entered Together with their Selling price
Styling Selections
Product or service thumbs: when products and solutions surface as products thumbs, four features are exhibited: thumbnail, title, rate, increase to cart. CSS styling can be employed for:
Products (Each individual products team of four things): history, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, body weight, colour, dimensions
Selling price: font, body weight, colour, dimensions
Insert to Cart: button colour, label colour, border, radius
Sale sticker: the phrase ‘Sale’ seems in excess of solution thumbs on sale – CSS styling can be utilized: track record colour, font colour, border colour, border width, strong/dashed border, border radius.
Item Variations
A product variation makes it possible for a consumer to create a clothes item that is accessible in different colours, or different layouts.
When products variants are utilised, merchandise archive webpages will Show a ‘Select Options’ button rather then an Increase to Cart button.
In summary, we’ve established out listed here the key components that you simply’ll need to consider if you find yourself planning a WooCommerce keep. We’ve described the different types of pages, the products facts plus the lookup and styling choices. Have fun making your WooCommerce keep.