A Designer’s Manual To WooCommerce



WooCommerce provides a variety of choices that may be configured for consumer Internet websites. This information is for a designer who is developing a WooCommerce retailer from scratch or possibly a designer that is tailoring an present WooCommerce topic.

The fastest solution to see what features you will find is to visit the Storefront demo within WooCommerce.

Review the template to discover how it really works. This doc delivers a tiny bit more info on the type of styling you may transform in the layouts. It only addresses WooCommerce connected webpages.
Ideas

You can find a tremendous variety of techniques to eCommerce. The WooCommerce plugin is rather versatile, but Simply because a attribute is applied on an internet site someplace isn't going to indicate It's going to be supported by WooCommerce.

By utilizing the functions and ways supported by WooCommerce, you'll be able to accelerate the process of style and design and growth. Personalized modifications is often created, but generally require more cost.
Varieties of Internet pages

Merchandise Internet pages: you can find two forms of solution webpages you must structure for:

Product Archive Web pages: these display thumbnails for offered item categories and/or products. Clicking over a category thumbnail demonstrates A further solution archive website page, Whilst clicking on an item thumbnail shows The one item webpage.
Product or service Single Web pages: these Display screen just one merchandise, and include item graphic(s), solution header information, products thorough information and facts and linked items, cross sells and up sells.

Particular Internet pages:

Purchasing Cart: the shopping cart is typically shown in condensed variety for a sidebar widget, and often in expanded kind around the Cart web site along with Shipping and delivery info,
Checkout: at the time a purchaser is looking at, address facts is needed.

Goods

Products Header

Product or service Title – shown to the summary/archive webpages and single internet pages)
Solution Feature – 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 Item 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 classification 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 mechanically created with the next sections:

title (category title)
description (the category description)
one particular category thumbnail for every sub category of the present category
optional merchandise thumbs (with title, price and Insert to Cart) for each merchandise in the current group

Clicking with a class opens a new group, clicking an item thumbnail opens the solution.
Products Webpages

Product or service Webpages are mechanically generated with the next sections:

Product Picture(s): the Showcased Picture and supplementary illustrations or photos for your product or service.
Item Title
Merchandise Price
Solution Shorter Description
Quantity to include to cart (with + and controls)
Add to Cart button
Merchandise SKU (Inventory Maintaining Device), Categories and Tags
Solution Tabs
Description: the product or service lengthy description, like optional graphic gallery
Further Facts: the product Attributes ticked to Display screen on item website page
Reviews: optional solution opinions
Related Items
Upsells: ‘You may additionally like’ followed by thumbs/titles for upsells
Cross sells: ‘Connected Solutions’ accompanied by thumbnails for associated merchandise (assigned as Cross Sells or quickly selected)

Merchandise Graphic presentation choices:

Common presentation will be to display the Highlighted Impression at the best in the product or service webpage, While using the supplementary image thumbnails underneath in three columns of thumbnails
Optional presentation should be to display the Highlighted Impression without having thumbnails underneath, and to Screen all illustrations or photos in the Description tab.

Item Lookup

Product or service Look for widgets are available to place in sidebar widgets or footer widgets.

Internet site Huge Search Choices – these lookup widgets may be used on any web site in the website:

Item lookup box (a textual content research box that lookups product name, brief description, prolonged description)
Group drill-down (a dropdown industry that allows choice of any class or sub class)
Merchandise tag cloud

Product or service Classification Search Choices – these lookup widgets will only look when mechanically created products category archives are being displayed

Layered Navigation
Item Value Filter: shows a sliding scale letting solutions to generally be filtered to a price variety
Greatest Sellers: displays title/thumb/value for routinely chosen listing of most effective promoting merchandise
Showcased Products and solutions: displays title/thumb/price for products ticked as Featured Goods
On Sale: displays products that Possess a Sale Cost entered As well as their Value

Styling Alternatives

Merchandise thumbs: when merchandise look as merchandise thumbs, four aspects are shown: thumbnail, title, price tag, incorporate to cart. CSS styling may be used for:
Merchandise (Every single merchandise team of 4 aspects): track record, solution border, padding, margin
Thumbnail: border, padding, margins
Title: font, bodyweight, colour, dimension
Value: font, excess weight, colour, dimension
Include to Cart: button colour, label colour, border, radius

Sale sticker: the word ‘Sale’ appears around products thumbs on sale – CSS styling can be employed: history colour, font colour, border colour, border width, stable/dashed border, border radius.
Product or service Versions

A product variation permits a consumer to setup a clothing product that is out there in various colors, or diverse types.

When solution variations are used, product archive internet pages will Exhibit a ‘Opt for Possibilities’ button as opposed to an Include to Cart button.

In summary, we’ve set out in this article the foremost things that you just’ll want to think about when you are building a WooCommerce retail outlet. We’ve discussed the different sorts of webpages, the product information and facts together with the research and styling alternatives. get more info Have fun building your WooCommerce retail outlet.

Leave a Reply

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