A Designer’s Guideline To WooCommerce
WooCommerce provides a variety of options that can be configured for consumer Internet sites. This post is for your designer that's building a WooCommerce 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'll be able to modify with your types. It only addresses WooCommerce relevant web pages.
Rules
You can find a tremendous assortment of ways to eCommerce. The WooCommerce plugin is quite versatile, but Simply because a characteristic is utilized on a website somewhere does not mean It will probably be supported by WooCommerce.
By utilizing the capabilities and techniques supported by WooCommerce, you may accelerate the entire process of design and style and improvement. Customized modifications can be produced, but normally contain supplemental price.
Forms of Webpages
Solution Pages: there are two varieties of merchandise webpages you will have to style for:
Product Archive Internet pages: these Exhibit thumbnails for offered solution categories and/or products and solutions. Clicking with a group thumbnail exhibits 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 product, and include merchandise picture(s), product header facts, merchandise in depth information and similar merchandise, cross sells and up sells.
Particular Pages:
Procuring Cart: the searching cart is sometimes exhibited in condensed sort like a sidebar widget, and sometimes in expanded variety about the Cart web page along with Shipping info,
Checkout: once a purchaser is looking at, address facts is needed.
Products
Product or service Header
Solution Name – demonstrated within the summary/archive internet pages and solitary pages)
Products Attribute – shown over the summary/archive web pages and single web pages
Picture – Showcased Picture displays about the summary, extra visuals on The only
Long Description – demonstrated within the Products Description spot, at the bottom of solitary item site
Quick Description – revealed at the very best of The one merchandise page
Product or service Categories
just about every class requires a provided classification picture and an outline
classes might have subcategories, by way of example, Plants can be a category and Trees is often a sub category. Besides navigation, they behave exactly the same.
Product or service Category archives are mechanically generated with the next sections:
title (category title)
description (the category description)
one particular category thumbnail for each sub classification of the current group
optional item thumbs (with title, selling price and Add to Cart) for each products in the current group
Clicking on a class opens a completely new class, get more info clicking an item thumbnail opens the product.
Solution Internet pages
Item Web pages are automatically produced with the subsequent sections:
Product Impression(s): the Showcased Image and supplementary photographs with the item.
Product or service Title
Product Value
Product or service Short Description
Quantity so as to add to cart (with + and controls)
Add to Cart button
Solution SKU (Inventory Keeping Unit), Groups and Tags
Product Tabs
Description: the solution very long description, including optional picture gallery
Added Information and facts: the solution Characteristics ticked to Display screen on item webpage
Opinions: optional product evaluations
Relevant Products and solutions
Upsells: ‘You may also like’ followed by thumbs/titles for upsells
Cross sells: ‘Linked Products and solutions’ followed by thumbnails for connected solutions (assigned as Cross Sells or automatically selected)
Solution Impression presentation solutions:
Regular presentation is always to Exhibit the Showcased Image at the top in the product or service web site, with the supplementary picture thumbnails underneath in three columns of thumbnails
Optional presentation will be to Display screen the Featured Picture without any thumbnails beneath, also to Display screen all images in the Description tab.
Solution Research
Product or service Look for widgets are available to place in sidebar widgets or footer widgets.
Website Extensive Research Selections – these look for widgets can be used on any web page in the website:
Solution research box (a textual content research box that lookups products identify, short description, lengthy description)
Class drill-down (a dropdown discipline that enables number of any group or sub classification)
Products tag cloud
Product Category Search Choices – these lookup widgets will only look when routinely produced merchandise group archives are increasingly being exhibited
Layered Navigation
Product or service Rate Filter: shows a sliding scale allowing for products to be filtered to a price array
Best Sellers: displays title/thumb/price tag for instantly picked listing of most effective promoting items
Highlighted Items: displays title/thumb/value for items ticked as Highlighted Items
On Sale: displays items that Have a very Sale Value entered Together with their Price tag
Styling Possibilities
Merchandise thumbs: when merchandise show up as merchandise thumbs, four aspects are exhibited: thumbnail, title, price tag, insert to cart. CSS styling may be used for:
Product or service (Every single products team of four aspects): history, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, body weight, colour, dimensions
Price tag: font, fat, colour, measurement
Insert to Cart: button colour, label colour, border, radius
Sale sticker: the phrase ‘Sale’ appears above solution thumbs on sale – CSS styling can be utilized: background colour, font colour, border colour, border width, solid/dashed border, border radius.
Item Variations
An item variation allows a client to arrange a garments merchandise that is on the market in several colors, or distinct patterns.
When item variations are made use of, products archive internet pages will Exhibit a ‘Decide on Alternatives’ button instead of an Add to Cart button.
In summary, we’ve established out in this article the most important aspects which you’ll require to think about while you are coming up with a WooCommerce keep. We’ve described the different types of pages, the products facts plus the lookup and styling choices. Have fun developing your WooCommerce shop.