A Designer’s Guidebook To WooCommerce
WooCommerce supplies a wide range of alternatives which can be configured for customer Internet websites. This information is for a designer who is creating a WooCommerce shop from scratch or even a designer who's tailoring an current WooCommerce concept.
The quickest approach to see what characteristics you can find is to go to the Storefront demo within WooCommerce.
Overview the template to view how it really works. This doc supplies a tad additional information on the type of styling it is possible to adjust as part of your patterns. It only handles WooCommerce connected web pages.
Rules
You will discover a big a number 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 options and strategies supported by WooCommerce, you can increase the whole process of structure and progress. Personalized modifications is often developed, but generally contain supplemental cost.
Different types of Pages
Solution Web pages: there are actually 2 sorts of products webpages you will have to style and design for:
Products Archive Web pages: these Show thumbnails for available solution types and/or goods. Clicking with a group thumbnail demonstrates An additional product or service archive web page, Whilst clicking on a product thumbnail shows the single product or service site.
Product Single Internet pages: these Exhibit one solution, and integrate solution image(s), merchandise header data, item detailed information and facts and relevant items, cross sells and up sells.
Unique Internet pages:
Browsing Cart: the purchasing cart is sometimes exhibited in condensed sort like a sidebar widget, and occasionally in expanded form to the Cart website page along with Shipping and delivery information,
Checkout: at the time a buyer is checking out, handle facts is needed.
Goods
Item Header
Product Identify – demonstrated within the summary/archive pages and one webpages)
Product Element – proven on the summary/archive web pages and solitary internet pages
Impression – Featured Graphic displays on the summary, more photos on The one
Prolonged Description – shown from the Item Description space, at the bottom of single merchandise web page
Small Description – proven at the best of The only products website page
Product Groups
each classification wants a equipped class graphic and a description
types may have subcategories, such as, Vegetation is a group and Trees is a sub group. Other than navigation, they behave precisely the same.
Product Group archives are automatically produced with the following sections:
title (group identify)
description (the class description)
a person class thumbnail for every sub class of the present category
optional product or service thumbs (with title, cost and Insert to Cart) for each merchandise in The existing class
Clicking with a category opens a different category, clicking an item thumbnail opens the products.
Solution Internet pages
Item 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
Item Small Description
Quantity to incorporate to cart (with + and controls)
Insert to Cart button
Product SKU (Stock Holding Unit), Classes and Tags
Products Tabs
Description: the item prolonged description, together with optional picture gallery
get more info Added Information and facts: the item Characteristics ticked to Display screen on item website page
Assessments: optional item testimonials
Similar Goods
Upsells: ‘You might also like’ accompanied by thumbs/titles for upsells
Cross sells: ‘Related Items’ accompanied by thumbnails for similar goods (assigned as Cross Sells or routinely picked)
Product Picture presentation possibilities:
Conventional presentation would be to Screen the Highlighted Graphic at the top from the merchandise site, with the supplementary picture thumbnails underneath in three columns of thumbnails
Optional presentation should be to display the Featured Picture without thumbnails beneath, also to display all photos in The outline tab.
Product or service Look for
Product Lookup widgets can be found to put in sidebar widgets or footer widgets.
Web-site Large Search Choices – these lookup widgets may be used on any site in the web site:
Product search box (a text lookup box that queries merchandise identify, shorter description, long description)
Category drill-down (a dropdown area that permits variety of any group or sub classification)
Products tag cloud
Product Category Search Alternatives – these lookup widgets will only look when routinely created product or service classification archives are increasingly being exhibited
Layered Navigation
Product Price Filter: displays a sliding scale permitting items for being filtered into a price tag array
Finest Sellers: shows title/thumb/rate for quickly picked listing of most effective selling products
Featured Products: displays title/thumb/price for products ticked as Featured Products
On Sale: displays products that have a Sale Price entered in addition to their Price
Styling Options
Product thumbs: when products appear as product thumbs, 4 elements are displayed: thumbnail, title, price, add to cart. CSS styling can be used for:
Product (each product team of four things): qualifications, product or service border, padding, margin
Thumbnail: border, padding, margins
Title: font, fat, colour, measurement
Price tag: font, bodyweight, colour, dimension
Include to Cart: button colour, label colour, border, radius
Sale sticker: the word ‘Sale’ appears over products thumbs on sale – CSS styling can be employed: history colour, font colour, border colour, border width, reliable/dashed border, border radius.
Merchandise Versions
A product variation allows a shopper to arrange a garments merchandise that is offered in numerous colours, or different layouts.
When product or service versions are employed, item archive pages will Display screen a ‘Opt for Selections’ button as an alternative to an Include to Cart button.
In summary, we’ve set out in this article the foremost aspects which you’ll require to think about while you are coming up with a WooCommerce keep. We’ve defined the different types of internet pages, the merchandise details along with the look for and styling selections. Rejoice developing your WooCommerce store.