A Designer’s Guide To WooCommerce

WooCommerce delivers an array of selections which might be configured for client Web sites. This post is for your designer that's building a WooCommerce store from scratch or perhaps 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.

Critique the template to check out how it really works. This doc presents a bit more information on the kind of styling you can alter inside your styles. It only covers WooCommerce connected webpages.

You'll find a massive selection of ways to eCommerce. The WooCommerce plugin is quite versatile, but Simply 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 approaches supported by WooCommerce, you can speed up the process of design and enhancement. Tailor made modifications is usually generated, but generally require added price.
Varieties of Webpages

Item Pages: there are two styles of product or service web pages you need to design and style for:

Item Archive Pages: these display thumbnails for out there product or service groups and/or merchandise. Clicking on the category thumbnail shows A further product or service archive website page, While clicking on a product thumbnail shows The one merchandise webpage.
Item Single Internet pages: these Exhibit an individual solution, and incorporate products impression(s), merchandise header details, product in-depth facts and relevant items, cross sells and up sells.

Special Internet pages:

Browsing Cart: the purchasing cart is sometimes exhibited in condensed sort like a sidebar widget, and occasionally in expanded variety to the Cart webpage together with Supply data,
Checkout: when a customer is testing, deal with info is necessary.


Item Header

Product Identify – proven on the summary/archive internet pages and solitary pages)
Product or service Characteristic – shown to the summary/archive webpages and single web pages
Picture – Featured Impression displays over the summary, added pictures on The one
Prolonged Description – shown from the Solution Description area, at The underside of single products website page
Brief Description – revealed at the very best of The one merchandise web page

Products Classes

every group requirements a equipped class graphic and a description
types may have subcategories, for example, Crops is really a classification and Trees is actually a sub classification. Aside from navigation, they behave the same.

Product or service Category archives are mechanically generated with the subsequent sections:

title (class identify)
description (the class description)
1 category thumbnail for each sub category of the current category
optional merchandise thumbs (with title, cost and Add to Cart) for every item in The existing category

Clicking with a group opens a new class, clicking an item thumbnail opens the solution.
Product Web pages

Item Web pages are immediately generated with the next sections:

Product Picture(s): the Featured Impression and supplementary images to the product.
Products Title
Solution Price
Solution Short Description
Amount to add to cart (with + and controls)
Insert to Cart button
Product SKU (Inventory Retaining Device), Categories and Tags
Solution Tabs
Description: the products extended description, which include optional image gallery
Added Information: the merchandise Characteristics ticked to Show on product or service page
Testimonials: optional products evaluations
Linked Goods
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Related Solutions’ accompanied by thumbnails for associated merchandise (assigned as Cross Sells or routinely chosen)

Item Image presentation choices:

Common presentation will be to Screen the Showcased Graphic at the best with the solution page, Using the supplementary graphic thumbnails underneath in three columns of thumbnails
Optional presentation is to Screen the Showcased Image without thumbnails beneath, and to Show all photographs in The outline tab.

Product Lookup

Product or service Lookup widgets can be obtained to position in sidebar widgets or footer widgets.

Website Large Lookup Possibilities – these look for widgets can be employed on any web page in the website:

Product or service look for box (a text lookup box that queries product or service identify, short description, prolonged description)
Classification drill-down (a dropdown field that permits number of any classification or sub category)
Solution tag cloud

Merchandise Group Look for Options – these lookup widgets will only look when routinely created products classification archives are now being shown

Layered Navigation
Product or service Price tag Filter: shows a sliding scale allowing for products to become filtered to some price tag selection
Finest Sellers: shows title/thumb/price for immediately selected list of greatest marketing solutions
Showcased Products and solutions: shows title/thumb/price for here goods ticked as Highlighted Items
On Sale: displays items that Use a Sale Selling price entered Besides their Rate

Styling Solutions

Product thumbs: when products appear as item thumbs, 4 components are displayed: thumbnail, title, value, incorporate to cart. CSS styling can be utilized for:
Merchandise (Every single merchandise team of four aspects): qualifications, merchandise border, padding, margin
Thumbnail: border, padding, margins
Title: font, fat, colour, dimensions
Price tag: font, fat, colour, dimensions
Insert to Cart: button colour, label colour, border, radius

Sale sticker: the phrase ‘Sale’ seems in excess of merchandise thumbs on sale – CSS styling can be utilized: track record colour, font colour, border colour, border width, sound/dashed border, border radius.
Solution Versions

A product variation enables a client to set up a clothing product that is available in various colors, or unique models.

When product or service versions are utilised, solution archive webpages will Show a ‘Select Options’ button rather than an Increase to Cart button.

In summary, we’ve established out below the key aspects which you’ll require to think about when you are building a WooCommerce retail store. We’ve spelled out the different sorts of webpages, the item info as well as the look for and styling selections. Rejoice creating your WooCommerce shop.

Leave a Reply

Your email address will not be published. Required fields are marked *