Using WooCommerce
Using WooCommerce, your one-stop e-commerce solution
What is WooCommerce? Simply put, WooCommerce lets you turn your WordPress-powered website into an incredibly user-friendly online store. Built by the people behind WooThemes, it’s a full eCommerce toolkit for WordPress users that want to sell things online. WooCommerce has a huge range of excellent features that make it ideal for power users of WordPress seeking something that doesn’t require extensive development or coding. For the most part, is integrates perfectly with most WordPress websites.
What can you sell using WooCommerce? WooCommerce can be used to sell anything. From online services like web design or custom video production to physical products like mugs, shoes, or computers, you’ll have no trouble creating a shop that can sell any product using WooCommerce. One of the best features of WooCommerce is its simple product pages. You can easily customize your product pages to list details like weight, size, inventory, its shipping costs, and other factors so that users are fully aware of what you’re selling. Creating catalogs is also a breeze. Since WooCommerce uses the same familiar user interface as WordPress, bloggers and experienced WordPress users will find it easy to make new product pages, categories, catalogs, and other parts of their store.
1
Using WooCommerce
Taking a look at what’s inside WooCommerce On clicking the woocommerce link on the left navigation panel, you will be brought to the dashboard where you will see key information relevant to your shop. 1. A statistical overview of your WooCommerce store. You can now see product and order totals, as well as stock notifications. 2. Monthly sales graph so that you can monitor your store’s performance at a glance. 3. Your store’s most recent orders and product reviews.
2
Using WooCommerce: Adding Products
Adding Products Now for the fun stuff, adding your products! But before diving into your first product you should familiarise yourself with how product categories, tags and attributes work. As you would expect, categories and tags work in very much the same way as any other post type categories and tags. They can be applied before, or during the creation of a product.Attributes on the other hand are a little different.
Attributes Attributes are pieces of data which can add more technical information to a product and help users further refine your catalog while browsing / searching. Creating an attribute set is done in a similar way to a category (we’ll get to that later). For now we’ll describe attributes and their primary benefit with a hypothetical example: Say you’re opening a video game store, selling all the latest games for all the latest consoles. In this case, your top level product category will most likely be Games inside of which the majority of your catalog will reside. Now, you could very easily create sub categories for different consoles, genres, etc etc but this information is better suited as attributes. Why? Because a user can select concurrent attributes while refining their search. Example: they’re looking for a sports game for the PS3. This is as simple as navigating to the Games category, then selecting the PS3 and Sport attributes from a sidebar widget. As you’d expect, this will refresh the page so that it only displays sport games for the PS3.
3
Using WooCommerce: Adding Products
Adding Attributes Adding attributes Setting up attributes themselves uses an interface you will be familiar with. It’s recommended that you set up any attributes you will be using over and over in this way. Navigate to Products > Attributes and you will be presented with the following screen:
Here you can quickly and easily add attributes and their terms. You also have the option to create attributes on a per product basis. This is useful should you want to display some extra information about one product which is unlikely to apply to any other. For example you may sell a one-off Japanese game to an English audience. You could make a ‘Language’ attribute for that one product and display in the product data section on the front end.
4
Using WooCommerce: Adding Products
5
Product Types With attributes and categories set up and stock management configured, we can begin to actually add products. When adding your product the first thing to ascertain is which type of product it will be. • The Simple product type covers the vast majority of any products you may sell. Simple products are shipped and have no options. For example, a can of drink. • A grouped product is a collection of related products which can be purchased individually. For example, a PS3 could be a grouped product as there are 80GB, 120GB and 200GB variations of that same parent product. • A variable product is a product which has several different variations, each of which may have a different SKU, price, stock options etc. For example a tshirt available in several different colours and/or sizes. • A downloadable product is a digital file which the customer is granted access to upon successful transaction of payment. • A virtual product could be a non-tangible service for example ‘Installation of WordPress’.
Adding a simple product Adding a simple product is a straight forward process and not too dissimilar from authoring a standard WordPress post. In the Products menu click Add Product; you will be presented with a familiar interface, and should immediately see where to type the product title and full description.
Using WooCommerce: Adding Products
6
You will be seeing something like the image below. It’s just like any other Wordpress post, but with additional settings for product data. Let us take you through the interface first. Product Title
Publish when done Content Editor (Full Description of product)
Product Categories
1 Product Type
Product Tags
& Visibility
useful for searching
Featured Image 2 Product Data
Using WooCommerce: Adding Products
Product Data Tab
Next is the Product Data tab set. This is where the majority of the product data is configured. In the general tab you set the parent product (if this particular product is a child of a group, you can ignore this dropdown if that’s not the case). You can also define the SKU, standard and sale prices. You can also schedule when your sale price dates are. • SKU - means stock keeping unit which is used to track products. It should be unique, can be alphanumeric. • Regular price - The item’s main price • Sale price - The item’s sale price
7
Using WooCommerce: Adding Products
8
The inventory tab allows you to manage stock for the product individually and whether to allow back orders. You can also specify a threshold for low inventory of stocks in the WooCommerce settings which we will be discussing in a while. i Checking the Sold Individually box limits the product to 1 per order.
In the shipping tab, you can specify the weight, dimensions and shipping class. • Weight – Weight of the item. • Dimensions – Length, width, and height for the item. • Shipping Class - Shipping classes are used by certain shipping methods to group similar products.
Using WooCommerce: Adding Products
Linked Products Tab Up-Sells and Cross-Sells can be used to cross promote your products to one another. Up-sells are displayed on the product details page. These are products which you may wish to encourage users to upgrade to based on the product they are currently viewing. In this tab simply type in the search field and the results will appear beneath. Click the arrow to add the up-sell. Cross-sells are products which are displayed at the cart and related to the users cart contents. Cross-sells are added in the same way as up-sells. Grouping is an option you can set to make the product part of a grouped product.
9
Using WooCommerce: Adding Products
10
In the attributes you can assign attributes to a product. You will see a select box containing any attribute sets you may have created (E.G. platform). Click add and you will be able to apply the terms attached to that attribute (E.G. Nintendo DS) to the product. You can choose to hide the attribute on the frontend by simply leaving the ‘Visible’ checkbox unticked. Custom attributes can be applied here too by choosing ‘Custom product attribute’ from the select box.
Product Excerpt Finally you can add an excerpt which should be a short description of the product. Typically this will appear next to the product imagery on the listing page whilst the long description will appear within the Product Description tab.
Using WooCommerce: Adding Products
11
Categories, Tags and Featured Images
On the right hand side of the Add New Product panel you will see your product categories in which you can place your product, just like a standard WordPress post. You can also assign the product tags, which are general keyword terms useful for searching, and choose a featured image. The featured image will appear in the catalog / archive pages of your site and be the main image on the individual product page.
Product Gallery
If you’d like to create a gallery of product images simply upload any further images, attach them to the product in the same way you’d upload any other image.
12
Using WooCommerce: Adding Products
Mark your Product as Featured
To mark a product as featured go to: Products > Products and select the Star in the featured column. You can alternatively select the Quick Edit option to select the Featured option. Or you may also click Edit beside the Catalog Visibility option under the Publish tab and you will be able to see the checkbox for Featured Product. When you’re done adding a product, click Publish.
Using WooCommerce: Order Management
Order Management: Taking Orders image thumbnail
As your customer browses over your shop, they can just easily click the Add to Cart button when they want to purchase a product. On the front end, this is how your individual product is displayed. The image thumbnail is the featured image you have set during the product adding process. Below it is the product category you have assigned it to, which is the orange underlined text. The product title comes after it(blue underlined text) then the product price(red underlined text).
The user will then be able to see his order overview by viewing their cart, which they will be able to find in their navigation area. As they view their cart, they will see something similar to the image below. They will be also be able to add or decrease their order’s quantity through this page.
13
Using WooCommerce: Order Management
14
When they add or subtract product quantity, they must update their cart by clicking the Update Cart button and it should be updated, including the order total. The coupon code area you can see below with the light orange button is where they can use their coupon codes, if you plan to use it. The cart total includes the Shipping & Handling fee, which you can configure in the settings area of WooCommerce under the Shipping tab. Note: Shipping may vary because of the location. When they’re done, they can now Proceed to Checkout.
Using WooCommerce: Order Management
15
When they proceed to checkout, they will be able to see and fill up their Billing Details. Their order details and updates will be sent over to the email address they provided. There is also an option where they can ship to a different address where they will fill up another form like their billing details form. This is useful when they want to send it as a gift.
Using WooCommerce: Order Management
16
They will also be able to see their order summary so they can double check their orders. Below it will be the payment options. They can choose between Direct Bank Transfer and Paypal. You can change or add to these options in the Settings area of WooCommerce under the Checkout tab. After which, they can click on the Place Order button to complete the process.
Using WooCommerce: Order Management
They will be taken to a page confirming that their order has been received after they place their orders. Their order details will be sent to their email address along with your bank details. Their orders will also be reflected in your Order area which we will be discussing in a while.
17
Using WooCommerce: Order Management
Order Management: Processing Orders When you start taking orders the order management page will begin to fill up. You can view these orders by going to WooCommerce > Orders in the left hand admin menu. Each order has a status (symbolised with a coloured circle) which can be one of the following: • Pending - Order received • Processing - Payment received • Completed - Order fulfilled • On-Hold - Awaiting payment • Cancelled - Cancelled by an admin or the customer • Refunded - Refunded by an admin Below, you can see the order we placed in an On-Hold status.
On this page you can also see an overview of data relating to each order. Each order row displays useful details such as the customers address, their email, telephone number, and the order status. Should you need more information, click the order number to see the single order page or alternatively, you can also click on the View icon under the Actions column. Under the Actions column, each order row also have some handy shortcut buttons for marking orders complete(check) and processing(...), should you want to do so quickly.
18
Using WooCommerce: Order Management
From the single order page, not only can you view all order data, you can also edit/update it: • Change order status • Edit order items - Modify the product, it sale price and tax rate • Stock - Reduce and restore stock for an order • Invoice - Emails the customer order details and a payment link - very handy if manually creating an order for somebody
19
Using WooCommerce: Order Management
20
Order Status As mentioned previously, each order has a status. • Pending - Order received • Processing - Payment received • Completed - Order fulfilled • On-Hold - Awaiting payment • Cancelled - Cancelled by an admin or the customer • Refunded - Refunded by an admin When you change the status from On-Hold to Processing, it will also be reflected on your customer’s account/order details as seen below.
Using WooCommerce: Order Management
21
Order and Customer Notes The ‘Order Notes’ panel displays notes attached to the order. These are used for storing event details, such as payment results or reducing stock levels, and for adding notes to the order for customers to view. Some payment gateways also add notes for debugging. Customer notes are useful when communicating with your customer. For example, you have to add a tracking number for shipping or some stock is delayed, you can use the customer note to notify them. Customer notes are highlighted in purple when added. The customers also receive their notes via email but they can also view it by viewing their order.
Using WooCommerce: Order Management
Order Actions The Order Actions panel is used to resend order emails to the customer using the drop down menu above the Save Order button. In this panel, you can Send New Order, Processing Order, Completed Order or Customer Invoice emails – very handy if manually creating an order for your customers. When you’re done editing the order, click on the Save Order button to update the changes. Note: Emails are sent to the customer when verifying the order, when the order is carried over and when the order is completed.
22
Using WooCommerce: Shop Setup
23
Shop Setup Once installed you can setup your shop via the WooCommerce > Settings screen.
Inside this panel you’ll find all the core WooCommerce settings such as catalog settings, payment gateways, shipping methods and tax rates accessible via the tabs at the top of the screen.
We will be discussing each tab and what it can do in the next pages.
Using WooCommerce: Shop Setup
24
General options Base Location This defines your shops base country (i.e. the country you are based in as a seller). It determines default tax rates and customer locations. Selling Location Here you can select which countries you want to sell/ship to - useful if only trading in your own country for instance. Customers outside your allowed countries will not be able to checkout. Store Notice Enable site-wide store notice text by selecting the checkbox then editing your message below. This message will show up across the top of your site.
Using WooCommerce: Shop Setup
General options Currency Options The following options affect how prices are displayed on the front end.
Currency Choose the default currency of the store. Only one default currency may be selected. Currency Position Chose the default currency position for your prices: Left, Right, Left/Right with space Thousand Separator Chose the symbol to use for the thousand separator: ex. 1,000 Decimal Separator Chose the symbol to use for the decimal separator: ex. 100.00 Number of Decimals Chose how many numbers to display to the right of the decimal when displaying prices. ex. 2 = 100.00
25
Using WooCommerce: Shop Setup
26
General options Styles and Scripts The following options affect how prices are displayed on the front end.
Enable Lightbox Product gallery images will open in a lightbox, which is a pop up window in the browser.
Enable enhanced country select boxes This will enable a script allowing the country fields to be searchable. The country fields can be found when your customer goes to checkout.
Using WooCommerce: Shop Setup
Product Listings Product Archive / Shop Page Select what page you would like to be the default shop page. Shop Page Display Select to show products, subcategories or both. Default Category Display Select to show products, subcategories or both. Default Product Sorting Select the default product sorting, options include: • Default product sorting (custom ordering + name) • Popularity (sales) • Average rating • Sort by most recent • Sort by price (asc/dec) Add to cart Options include: Redirect to the cart page after successful addition – this will automatically take your customer to the cart page upon adding a product. • Enable AJAX add to cart buttons on archives – this will add the ‘Add to Cart’ option to your shop archive pages.
24
Using WooCommerce: Shop Setup
25
Product Data and Product Image Sizes Product Data include setting the weight unit and dimensions unit of your products. Product Image Sizes affect the actual dimensions of images saved in your catalog once you upload an image – the display on the front-end will be overridden by CSS styles if applied. If you were to change these settings you would need to regenerate your thumbnails if you had previously uploaded images, in order for the new image size settings to be applied.
Inventory Settings
To edit your shop’s inventory options go to: WooCommerce > Settings > Product > Inventory. For many stores (particularly those with a physical shop as well as an online shop) stock management is crucial. Fortunately, we’ve got that covered in WooCommerce. It’s beneficial to decide whether you’re going to manage stock before setting up all your products so this is more of a warning than a guide. The options in this section control whether or not you want to manage stock, when email notifications should be sent out, what levels are classed as ‘out of stock’, and whether or not out of stock items should actually be shown on your site. If you choose to manage stock, you will be able to input stock quantities on each individual product. You can also set a threshold for low stock and out of stock notifications.
Using WooCommerce: Shop Setup
26
Tax options If you’re selling taxable products you will need this to be calculated and displayed on your store. An important option to configure here is whether your catalog prices include tax (that is the price you apply to each individual product). There are two options, but you need to be consistent throughout your store: 1. If you set catalog prices to exlcude tax, tax will be calculated based on the product price and applied at the cart/checkout. 2. If you set catalog prices to include tax, then a backward calculation will be made based on your specified tax classes. On the tax screen you will see a textarea for ‘additional tax classes’. This lets you define classesyou can give products if they have a non-standard rate of tax. For example, books may have a lower rate than other products. Below that is the main area for adding tax rates. This is the most important section as it controls what rates are applied to a customers order, based on their billing address. The tax rules system in WooCommerce has been built to be as flexible as possible to work with any country.
To get started, add a rule and select the countries it applies to, the class (e.g. standard rate),the rate itself (a percentage with 4 decimal places to reduce rounding errors), and whether or not it applies to shipping as well. In the UK for example, I would set up a standard rate of 20.0000% which applies to shipping.
Using WooCommerce: Shop Setup
27
Checkout options In Checkout options tab, you can enable the use of coupons and enable guests to checkout without creating an account. This is also where you can find and enable the payment gateways.
Payment gateways WooCommerce comes bundled with two online payment gateways (PayPal standard and Moneybookers) and two offline methods (Cheque and BACS). Each gateway is configured separately, click on its name to bring up the options. You can add more gateways by purchasing additional payment gateway plugins.
Using WooCommerce: Shop Setup
28
Shipping options Shipping Calculations • Enable shipping • Enable the shipping calculator on the cart page • Hide shipping costs until an address is entered Shipping Display Mode Display shipping methods with “radio” buttons or in a dropdown. Shipping Destination Ship to billing address by default or only ship to the users billing address. Restrict shipping to Location(s) Ship to all countries you sell to to specify certain countries you will not ship to.
Shipping Methods
The shipping methods section is self-explanatory - this is where you set your methods up. By default WooCommerce comes with Flat Rate (a single rate per order or per item) and Free Shipping. More methods can be added through additional plugins.
Emails In this tab, you can find the email settings and templates you can edit. This is what you will be looking for if you wish to customize the WooCommerce emails being sent like when a new order is placed, being processed and completed; customer invoices and notes; or a new account has registered.
Using WooCommerce: Shop Setup
29
Coupon Management Coupons can be managed from the WooCommerce > Coupons screen. Coupons have several attributes which make them really flexible: • Coupon code - The code the user must enter to use the coupon • Coupon type - Cart discount, Cart % discount and product discount • Coupon amount - Value or percentage off • Individual use - Determines whether the customer can use multiple coupons at once • Product ID’s - A list of product ID’s the cart must contain for the coupon to be valid • Usage limit - How many times a coupon can be used by all customers before being invalid Once added, customers will be able to enter coupon codes on the cart page. Used coupon codes will be viewable when viewing orders.