A Designer’s Manual To WooCommerce
WooCommerce delivers an array of selections which might be configured for shopper Web sites. This informative article is for the designer that is building a WooCommerce retail store from scratch or a designer who is tailoring an existing WooCommerce theme.
The quickest approach to see what characteristics 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 provides a bit more information on the kind of styling you are able to modify within your patterns. It only addresses WooCommerce relevant web pages.
Rules
You will discover a large range of strategies to eCommerce. The WooCommerce plugin may be very adaptable, but Because a aspect is made use of on a web site someplace won't signify Will probably be supported by WooCommerce.
By utilizing the capabilities and techniques supported by WooCommerce, you may hasten the whole process of layout and growth. Custom made modifications might be made, but usually include extra expense.
Types of Pages
Product Internet pages: you will discover two forms of merchandise webpages you will have to style for:
Product Archive Internet pages: these Display screen thumbnails for readily available merchandise groups and/or items. Clicking on the category thumbnail shows another products archive site, While clicking on a product thumbnail displays the single products site.
Merchandise Single Pages: these Display screen one merchandise, and integrate item graphic(s), product or service header data, solution comprehensive information and linked merchandise, cross sells and up sells.
Particular Pages:
Procuring Cart: the browsing cart is usually displayed in condensed variety for a sidebar widget, and often in expanded type on the Cart site together with Delivery information and facts,
Checkout: the moment a client is checking out, handle data is required.
Products and solutions
Product or service Header
Solution Name – revealed within the summary/archive pages and one webpages)
Item Aspect – demonstrated within the summary/archive pages and one webpages
Graphic – Highlighted Image shows about the summary, extra visuals on The only
Long Description – revealed inside the Product Description place, at the bottom of one merchandise page
Small Description – proven at the best of The only product site
Solution Types
every single category desires a supplied classification picture and an outline
classes can have subcategories, by way of example, Plants is often a class and Trees is usually a sub class. Other than navigation, they behave precisely the same.
Product Group archives are immediately created with the following sections:
title (classification name)
description (the group description)
1 classification thumbnail for each sub classification of the current classification
optional item thumbs (with title, selling price and Include to Cart) for every solution in The existing category
Clicking over a category opens a whole new classification, clicking a product thumbnail opens the products.
Item Web pages
Product Web pages are automatically produced with the subsequent sections:
Item Impression(s): the Featured Picture and supplementary visuals for your product or service.
Product Title
Merchandise Rate
Solution Small Description
Quantity to incorporate to cart (with + and controls)
Increase to Cart button
Item SKU (Inventory Maintaining Device), Types and Tags
Solution Tabs
Description: the product or service long description, which includes optional graphic gallery
Additional Details: the products Attributes ticked to Screen on product or service page
Evaluations: optional product or service reviews
Connected 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 automatically selected)
Merchandise Graphic presentation options:
Normal presentation is usually to Display screen the Featured Image at the very best on the product website page, Along with the supplementary graphic thumbnails underneath in 3 columns of thumbnails
Optional presentation is always to Exhibit the Showcased Graphic without any thumbnails beneath, and to Display screen all images in the Description tab.
Product or service Look for
Product Search widgets can be found to put in sidebar widgets or footer widgets.
Web-site Wide Search Alternatives – these research widgets may be used on any 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)
Merchandise tag cloud
Merchandise Group Research Solutions – these look for widgets will only surface when automatically generated item category archives are being displayed
Layered Navigation
Solution Value Filter: displays a sliding scale enabling merchandise to get filtered to your selling price array
Finest Sellers: shows title/thumb/selling price for mechanically picked listing of most effective advertising products and solutions
Showcased Products and solutions: shows title/thumb/rate for products and solutions ticked as Showcased Solutions
On Sale: displays products that Possess a Sale Cost entered Along with their Cost
Styling Alternatives
Solution thumbs: when items show up as products thumbs, four features are exhibited: thumbnail, title, rate, increase to cart. CSS styling can be employed for:
Product or service (Just about every product or service team of four aspects): qualifications, solution border, padding, margin
Thumbnail: border, padding, margins
Title: font, bodyweight, colour, dimension
Cost: font, excess weight, colour, size
Increase to Cart: button colour, label colour, border, radius
Sale sticker: the term ‘Sale’ seems in excess of merchandise thumbs on sale – CSS styling can be utilized: track record colour, font colour, border colour, border width, strong/dashed border, border radius.
Product Variants
An item variation makes it possible for a customer to create a clothes product that is out there in various colors, or distinct patterns.
When item variations are made use of, product or service archive web pages will Show a ‘Select Options’ button here rather then an Insert to Cart button.
In summary, we’ve set out right here the major features you’ll need to have to think about when you are building a WooCommerce retail outlet. We’ve discussed the different types of pages, the product or service data in addition to the search and styling solutions. Have a great time creating your WooCommerce shop.