WooCommerce is one of the most popular ways of building an ecommerce website and as it is the official ecommerce plugin for WordPress, which powers the most websites in the world, this is not surprising.
Over the years, I have built a few sites using the WordPress + WooCommerce combination and I decided to create a tutorial on how you can build your own ecommerce website using this combination. This is also a follow up to my WordPress Tutorial, so if you haven’t already got your WordPress website up and running, go and check that post out first.
- Step 1: Install WooCommerce
- Step 2: Adding Payment Gateways
- Step 3: Setting Up Shipping Methods
- Step 4: Adding New Products
- Step 5: Managing Your Orders
Step 1: Install WooCommerce
In order to turn your WordPress site into an ecommerce site with WooCommerce, you first need to install the plugin. And this is really easy to do, click on Add New within the plugin section of the WordPress dashboard and then type WooCommerce in to the search bar.
This will produce a list of plugins that has the WooCommerce keyword in the description somewhere but the first result will be WooCommerce by Automattic. Click the Install Now button and once it has installed, click the activate button to make it useable on your site.
Once you activate the WooCommerce plugin, you will be taken to the quick start guide. This prompts you to input your business information, set up the basic PayPal payment gateway and create a shipping method. Once you have been through the quick start guide, the basics of your WooCommerce store will be set up.
While the set up guide helps you get started, it doesn’t show or tell you how to set up additional payment gateways or delivery methods. I am going to cover both of these in the next sections.
Step 2: Adding Payment Gateways
In the quick start guide, WooCommerce lets you set up PayPal standard but you probably want to add some different ones as the standard PayPal isn’t the best.
For this step, I am going to show you how to set up PayPal Checkout and Stripe, which are two of the most popular options for payment gateways, especially on new websites.
Whenever you add an additional payment gateway, you will need to install the relevant plugin to allow you to do that. This is done in exactly the same way as how you installed the WooCommerce plugin and for this tutorial, I will be using the official WooCommerce PayPal and Stripe plugins. There other ones out there that you can use and the set up process will vary slightly.
Once you have installed and activated the plugin, you need to set it up and this can be done by going to:
WooCommerce → Setting → Payments
Once you are here, you will see the offline payment methods along with PayPal, that are included with WooCommerce. You will also see the option for PayPal Checkout, just like the image below.
You will now need to set up PayPal checkout so that it can be used on your site, to do this, you need to click the manage button and it will bring up all the settings for PayPal checkout.
The most important step when setting up PayPal Checkout is to set up the API credentials as this is links your PayPal account to your WooCommerce website and will allow you to get paid.
You also want to work through the rest of the options on the page to ensure that the plugin is set up properly and ready to use. Once you have done this, it is always worth running a few tests orders through your site to make sure everything is working properly as it is better to know now, than when you start taking orders.
As with PayPal Checkout, you will first need to install and activate the Stripe plugin. Once you have done that, navigate to the payments tab within the WooCommerce settings and now see that Stripe is now an option for you.
With the official WooCommerce Stripe plugin, you will see lots of options such as Stripe iDeal and Stripe Alipay. Now unless you use one the payments methods mentioned, the only one you need to focus on is the Stripe – Credit Card option.
To set Stripe up, click on the Set Up button and it will show you all the settings for the gateway. Make sure that you add the Web Hook to your Stripe account settings and get all of your keys from Stripe and input them into this page.
It is up to you if you want to set it up in test mode to make test out the plugin or if you just want to go straight for live mode.
As with the PayPal Checkout plugin, it is always worth running a few test orders through to make sure that everything is working properly before you make your shop live.
Whichever payment gateway you are using on your site, you always want to make sure that the toggle bar is set to enabled, otherwise it won’t appear as an option for your customers.
Step 3: Setting Up Shipping Methods
The next step is setting up your shipping methods and this may seem a bit complicated with WooCommerce but that is what this guide is for, right?
There are two main aspects when it comes to setting up your shipping methods in WooCommerce, Shipping Zones and Shipping Classes.
Shipping Zones are areas in the world that you post, for example the UK to and also how much that postage costs. You can set up multiple shipping options within a shipping zone such as free standard delivery and express delivery, that customers can pay an additional charge for.
Shipping Classes are used to assign specific shipping rules to certain products, these become very useful if you sell a wide range products that all incur different postage costs. For example, if you sell home improvement products, a small picture frame is going to cost significantly less than an armchair to post and you can use shipping classes to separate them.
I hope that hasn’t confused you! But I will give you two examples below of how to set this up and how it can be used.
The first is going to be if your postage is simple. For example, if you sell watches, your postage costs aren’t going to be pretty standard across the board and you may want to offer free standard delivery and a paid for express delivery option.
In the second example, will be for if you have a varied range of products, like the home improvements I mentioned above.
Setting Up Simple Shipping
To start with navigate to your shipping settings (WooCommerce → Settings → Shipping) and you should see a display very similar to the image below. As we are just going to be setting up shipping for the UK in this example, hover your mouse over the United Kingdom zone name and click the edit button that appears.
In the edit screen, you will see the shipping method that you created in the start up guide. On this screen, you will have the option to edit an existing method or create a new one. You can also be very specific about where this zone applies by limiting it to specific postal or zip codes, this can be done by clicking the link under zone regions.
If you add a new shipping method, WooCommerce will ask you if you want to add a:
- Flat Rate
- Free Shipping
- Local Pick-up
But, the free shipping option isn’t straight forward free shipping. Instead, this free shipping option is more of a promotional option that can be offered in the form of a coupon or via a minimum spend.
If you just want to offer free shipping across all of your products, you will need to create a flat rate method and set the price to zero, like in the image below.
It is as simple as that. To add an additional shipping method, just click the Add Shipping Method button and select which one you want, you then need to edit this option to set the rates you want. For this example, I chose an additional flat rate and set it up as express shipping, as you can see in the image below.
When you are charging for shipping, you also need to select whether or not your charge any tax on your shipping. This can all be done under the Tax tab within the settings section, which is made active by checking the Enable Tax Rates option in the WooCommerce general settings.
By this point, I have now created my two shipping methods that customers can choose when they are going through the checkout and it will look something like this:
So that is how you create a simple shipping method within WooCommerce. If you want to ship to other parts of the world, then you will need to create another Shipping Zone and then follow the same process. WooCommerce will show the shipping that applies to user either by using geolocation or when the user enters their postal or zip code.
Setting Up Shipping Classes
While the simple method above will be perfectly fine for most businesses, if your business has a complex range of products that require different charges when it comes to postage. Then you are going to have set up some shipping classes within WooCommerce.
To do this involves a couple of steps over the process described above. The first is that you are going to have to create a shipping class and this is done by going into the shipping settings within WooCommerce and clicking the Shipping Classes link.
You then click the Add Shipping Class button and it will present the options like in the image below:
Simply fill out these sections and then click Save and your shipping class will have been created. Once you have done this, you need to go back to the shipping zones sections in order to set up the prices for these classes. You can either edit an existing or create a new shipping method to do this.
As you can see in the image above, there are a few more options over the simple method above. You can still set a flat rate price but it is better to leave this at zero and use the new options to set the prices. As you can see, I have set the price for the ‘Heavy Items’ shipping class at 20 and any products not included in this class with be charged at a flat 5.
This allows you to create a variety of different shipping options and the most shipping classes you create, the more options you will have on this screen. But before this becomes useable, you need to assign this shipping method to product listings where this will apply.
This can be done in a few different ways. The first is in the product creation/edit page and can be done by going to the product data section and clicking the shipping tab. You can then select the shipping class you want to assign to this product by selecting it from the drop down menu.
The second is by using the quick edit feature in the product overview page and selecting the shipping class from the drop down menu next where it says shipping class.
Option three is the best option if you need to do this to numerous products as it uses the bulk edit feature. Simply check the products you want to edit, select edit from the bulk actions drop down menu and then change the shipping class next to where it says shipping class.
Step 4: Adding New Products
The next step is to start adding inventory to your WooCommerce store and they offer you a variety of different options when it comes to this, such as:
- Simple Product
- Grouped Product
- External/Affiliate Product
- Variable Product
For this guide, I am just going to be looking at how you set up a simple product and a variable product as these are the two that the majority of ecommerce websites will use.
Creating Product Categories
Before you start creating your products, it makes life simpler if you create the categories for them to go into first. This saves you from having to go back and edit your products in order to assign them to a product category.
This is very simple to do with WooCommerce and can be done by going to Products → Categories in the WordPress dashboard.
To create a new category, type the name of the category and the slug will be automatically generated from this. Then decide if you want it to be a parent category or a child of another category, you can also add a description and image for the category.
Once you have done this, click the Add New Category button and it will appear in the list on the right hand side of the screen. If you want to edit an existing category, hover your cursor over the name of the category and edit and delete options will appear, click on edit and make any changes you need to.
Creating a Simple Product
In WooCommerce, a simple product is for product listings that do not have any variations and can be used for physical or digital products. To add a new product, go to Products → Add New and it will bring up the add new product page that can be seen in the two images below:
The Add New product page is very simply laid out but I will still go through all the parts of the page, so that you know what they all do.
- Product Title – This is the name of your product, this will also be used to create the URL for your product page.
- Main Description – Sits underneath your product images, use this to give a detailed description of your product and include all relevant information
- Product Data
- General – For price and sale price
- Inventory – Manage your stock levels and enter your product SKU
- Shipping – Set size and weight of your products, also select Shipping Class
- Linked Products – link other products for upsells and cross-sells
- Attributes – Where you can choose attributes for the product such as size or colour
- Advanced – Contains advanced settings for your products such as purchase notes and menu order
- Short Description – Sits next to your product images, for giving a brief description of your product
- Product Categories – Choose which category your product should go in
- Product Tags – Short descriptive labels for your products, can be used for descriptive, organisational and SEO purposes
- Product Image – Your main product image
- Product Gallery – For any additional images of your product
When you are adding a new product to your store, you want to add as much information to the product page as you can, because this will give it the best chance of not only ranking in search engines but also converting your visitors into paying customers.
If you are unsure about how the two product descriptions look or work on your product page, then take a look at the image below.
Creating a Digital Product
If you are creating a range of digital products rather than physical ones, then you have a couple of options in the form of check boxes in the Product Data section.
- Virtual Product – This is ideal for services such as consulting or training where people could buy a package from you such as 5 hours 1 to 1 Guitar Lessons.
- Downloadable Products – This is for digital products such as e-books that people can buy, which can then be downloaded from your site to their device.
As you can see in the image above, when these two check boxes are active, it removes the shipping tab from the Product Data section of the page and also adds the ability to upload or provide a link to the General tab, you can also limit the amount of downloads your customer can have, along with an expiry date.
When you are selling downloadable products, you do want to check both the Virtual and Downloadable boxes as only checking the downloadable box will not remove the shipping options.
If you are selling virtual products such as consulting and want to sell it by the hour, you can do this by checking the sold individually box on the Inventory tab.
Creating A Variable Product
Simple products are very well, simple to create but variable products are a bit more complex as there are a few more steps you need to do in order to get your products set up.
Set Up Product Attributes
The first thing you need to do is to set up product attributes for your variations. To do this, you need to the Attributes section under the Products heading in your sidebar.
When you are creating a new attribute, enter the name you want for that attribute and the way the terms within the attribute are sorted. There are four options but the main three are:
- Custom Ordering – You choose the order in which the terms are displayed (Colors in above image)
- Name – Alphabetic sorting based on the names you give to the terms (Size in above image)
- Name (Numeric) – Numeric sorting, should be used for any numbered terms (Size Ladies in above image)
Once you have created the attributes, you need to set up the options, or terms within the attribute and that is done by clicking the configure terms link and on this page, you can set up all the options you need for the product.
Setting Up Product Variations
Once you have set up all of your product attributes, you can then start to set up your product variations. This is done by selecting Variable Product instead of Simple Product from the drop down menu in the Product Data section of the add new product page.
When you select variable product, the Inventory tab in the Product Data section will be replaced by a Variations tab. To begin setting up your variations, you first need to select which attributes you want to apply to that product.
Once you have selected the attribute and options you want to use in your variation, you much make sure that the Used for Variations check box is ticked. Once you have done this and selected all of the attributes you want to use, you then move to the Variations tab to begin setting them up.
To create a variation, choose the Add Variation option from the dropdown menu and click the go button. This will create a variation, which you can then edit by expanding the variation.
Within this section, you can set an image for that variation, the SKU, price, sale price, shipping class and description. Along with whether it is a physical, downloadable or virtual product and whether or not you want to manage the stock levels.
Once you have gone through and filled all of this out, the product page of your site will have a drop box appear with the variations that you created, similar to image below:
This is just with a single variation, but you can make multiple variation combinations depending on how many attributes that your product has.
Step 5: Managing Your Orders
I know this might seem a bit forward for a beginners tutorial but learning how to manage your orders early on and knowing what you need to do when you start getting them, makes life much easier and less stressful.
In its standard form, WooCommerce isn’t the best when it comes to order management, while it does a great job of sending emails to your customers to keep them updated, on your side it isn’t great.
This is because, in the dashboard there is no way to print off your order invoices or packing slips and that is why I highly recommend installing the WooCommerce PDF Invoice & Packing Slips Plugin. Not only is this plugin easy to use but it is also free as well, which is always a bonus.
Once this plugin has been installed, you now have a much better order management system in place.
Within the WooCommerce order overview page, you can now update your order statuses along with being able to print off invoices or packing slips in bulk. This makes life so much easier when you start getting more orders.
This can also check order information, make changes and manage refunds by clicking on the order. This will bring up the order information page.
Within this page, you can also see the order history and also re-send any order related emails to your customers.
To issue refunds to your customers, it all depends on the payment gateway you are using. Some will integrate with WooCommerce and allow you to do it directly from your dashboard, where as other will require you to login to their dashboard to issue the refund. You will then update the order status within the WooCommerce dashboard.
If you use tracked shipping services and want to add this information to your order updates, then I recommend installing the Advanced Shipment Tracking for WooCommerce plugin as once again, this isn’t something that you can do as standard in WooCommerce.
That brings me to the end of this tutorial, I hope that you have found it useful and informative. I included all of the basic things that you need to know in order to get a WooCommerce store set up, obviously there is a lot more you can do with the platform, especially when you start using additional plugins but as a beginners guide, I didn’t want to go too in-depth.