A Designer’s Manual To WooCommerce

WooCommerce delivers a wide array of solutions that can be configured for client Internet sites. This text is for just a designer that's designing a WooCommerce shop from scratch or even a designer who's tailoring an current WooCommerce concept.

The fastest technique to see what capabilities there are actually is to visit the Storefront demo inside WooCommerce.

Review the template to determine how it works. This document offers somewhat more details on the type of styling it is possible to adjust as part of your models. It only handles WooCommerce similar internet pages.

There are actually a huge variety of approaches to eCommerce. The WooCommerce plugin is extremely flexible, but just because a feature is utilized on a website somewhere does not mean it will be supported by WooCommerce.

By using the features and approaches supported by WooCommerce, you can speed up the process of structure and enhancement. Tailor made modifications is usually manufactured, but generally require more price.
Forms of Webpages

Item Pages: there are actually two forms of solution webpages you will need to structure for:

Product or service Archive Web pages: these Screen thumbnails for obtainable product types and/or solutions. Clicking over a class thumbnail shows another product or service archive website page, While clicking on a product thumbnail shows The only solution web page.
Products One Webpages: these display only one product or service, and integrate item image(s), product or service header data, item detailed facts and relevant goods, 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.


Solution Header

Product or service Identify – proven about the summary/archive internet pages and solitary pages)
Solution Element – shown within the summary/archive web pages and one pages
Picture – Highlighted Graphic shows about the summary, extra visuals on The only
Lengthy Description – revealed inside the Item Description place, at the bottom of one merchandise web page
Shorter Description – demonstrated at the top of The one solution web site

Merchandise Categories

just about every category desires a supplied classification picture and an outline
classes might have subcategories, as an example, Crops is actually a classification and Trees is actually a sub classification. Aside from navigation, they behave the same.

Merchandise Category archives are routinely generated with the next sections:

title (classification title)
description (the classification description)
a single classification thumbnail for each sub group of the current group
optional product thumbs (with title, price tag and Add to Cart) for each products more info in The present classification

Clicking on a group opens a new group, clicking an item thumbnail opens the solution.
Product or service Pages

Merchandise Pages are routinely created with the following sections:

Product or service Image(s): the Highlighted Graphic and supplementary photos for that products.
Solution Title
Product or service Price
Solution Small Description
Quantity to incorporate to cart (with + and controls)
Increase to Cart button
Item SKU (Stock Preserving Unit), Classes and Tags
Product or service Tabs
Description: the product extended description, which include optional image gallery
Extra Facts: the product Attributes ticked to Exhibit on products web page
Testimonials: optional product or service reviews
Connected Solutions
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Connected Solutions’ accompanied by thumbnails for related items (assigned as Cross Sells or mechanically picked)

Product Picture presentation possibilities:

Typical presentation is to Show the Highlighted Impression at the best of the item webpage, Along with the supplementary graphic thumbnails underneath in 3 columns of thumbnails
Optional presentation is always to Screen the Showcased Graphic with no thumbnails underneath, and also to Screen all illustrations or photos in The outline tab.

Product Search

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

Web page Wide Search Alternatives – these lookup widgets may be used on any site in the web site:

Products search box (a text search box that queries solution title, limited description, very long description)
Classification drill-down (a dropdown field that allows collection of any group or sub group)
Product or service tag cloud

Products Classification Search Choices – these lookup widgets will only look when routinely produced merchandise group archives are now being shown

Layered Navigation
Product or service Selling price Filter: shows a sliding scale allowing for products and solutions to generally be filtered to a price range
Very best Sellers: displays title/thumb/cost for immediately selected list of very best promoting goods
Featured Goods: displays title/thumb/cost for goods ticked as Featured Goods
On Sale: displays products that have a Sale Price entered in addition to their Price

Styling Options

Products thumbs: when products and solutions surface as products thumbs, four things are shown: thumbnail, title, price tag, incorporate to cart. CSS styling can be utilized for:
Solution (Each and every item group of 4 elements): history, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, body weight, colour, dimensions
Price tag: font, fat, colour, measurement
Include to Cart: button colour, label colour, border, radius

Sale sticker: the word ‘Sale’ appears around product or service thumbs on sale – CSS styling may be used: qualifications colour, font colour, border colour, border width, sound/dashed border, border radius.
Merchandise Variants

An item variation will allow a shopper to set up a clothing products that is out there in various colors, or diverse patterns.

When item variations are used, products archive internet pages will Exhibit a ‘Decide on Alternatives’ button instead of an Include to Cart button.

In summary, we’ve established out in this article the foremost features you’ll need to have to think about when you're designing a WooCommerce retail store. We’ve spelled out the different sorts of webpages, the item information and also the research and styling alternatives. Have a good time building your WooCommerce retail store.

Leave a Reply

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