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.
Before you get started building a WooCommerce website, there are a couple of things you are going to need first:
- Domain Name
- Web Hosting
- WordPress Installed
If you haven’t already got this done, then check out one of my other WordPress Tutorials, that covers all of these steps.
EcommerceGold is reader supported, meaning that we may earn a commission (at no additional cost to you) from products or services purchased through links on our site. Learn More.
Step 1: Install WooCommerce
You are now ready to start setting up the ecommerce parts of your website and that all starts with the WooCommerce plugin. Installing it is really simple, just go to the WordPress plugin library and search for WooCommerce.
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.
Step 6: Installing a WooCommerce Theme
Now that you have set your WooCommerce site up, it is time to start looking at the design aspects of your site so that it looks good and works well for your customers.
Installing a New Theme
Installing a new theme on your WordPress site is very easy and follows pretty much the same process as installing a new plugin, like I mentioned above.
Instead of going to the plugin section of the dashboard, you instead want to go the the appearance section and click on themes. This will show you what themes are already installed on your site and you will see a selection of the default themes including twenty-nineteen and twenty-twenty.
To add a new theme, click the Add New button at the top of the page and your screen should look very similar to the image below.
This is the WordPress theme library and every theme that is in here is free to use and choosing a free theme is a great way to get started. When searching for a new theme, you want to put WooCommerce as your keyword. This will then show themes that have WooCommerce integration.
Alternatively, you may already know what theme you want to use and you can search for it by typing the theme name into the search bar.
If you have purchased a premium or paid theme, you will need to upload it to your dashboard and this is done by using the Upload Theme button, which allows you to upload your theme in Zip format.
Whichever method you choose, you will have to activate the theme before it is visible on the front end of your site.
Creating a Child Theme
Before I get into how you customise your theme, you want to create a child theme for your chosen theme. The reason for this is that whenever a theme gets updated, it will override any changes that you have made to the theme, meaning that you need to go in and customise it all over again.
With a child theme, all of your changes and customisations remain, even when the parent theme is updated. There are a few different methods out there for doing this, which involve create new files within your Cpanel file manager or uploading new files to your Cpanel but the team at Lilaea Media have made a very useful Child Theme Configurator Plugin that does it all for you.
Customising Your Theme
Once have installed your chosen theme and created a child theme for it, you can then begin to customise the look of your theme so that it better fits your business and brand.
WordPress has a great tool for being able to do this and it can be found by clicking the Customise option under the Appearance section of your dashboard. This will then take you into the WordPress Customiser, which is a live editing tool that allows you to see changes instantly and preview them before publishing them to your site.
The amount of options within the customiser is entirely dependent upon the theme that you are using. Some themes will offer you lots of options and really allow you to customise your site and others will be pretty limited. The icons in the bottom left of the screen let you see how your site looks of desktop, tablet and mobile devices, this is really useful and is worth checking to make sure everything is displaying properly.
Within the customiser, you will also be able to change your websites favicon, which is the icon that appears in the tabs on web browsers (like the black G on the gold background for EcommerceGold). This may only seem like a small thing but it is another aspect of branding on your website. This can be found in the Site Identity section, which is also where you can change your websites logo.
Another important thing you can do within the customiser, is set what is going to be your websites homepage. The two options are for your latest blog posts, which is the default setting or you can select a page, which has been designed for the purpose of being your homepage.
Before you start customising your new WordPress theme, it is always worth checking to see if the developer has created any documentation on the theme. Many will have some sort of guide on what options they have and how you can set it up properly.
Step 7: Creating Business Pages
The last thing that I am going to be looking at in this guide is how to create business pages for your WooCommerce site as these are really important and in some cases legal requirements, such asL
- Terms & Conditions
- Returns Policy
- Contact Page
Creating a new page is very simple, just click on Add New under the pages section and it will bring up a blank page for you to start working on, as you can see in the image below.
The new Gutenberg editor allows you to build and design pages and posts using a block system. In the standard WordPress, there is a really good selection of blocks that allow for lots of formatting options including columns, images, lists and paragraphs.
There are also a selection of plugins that offer a greater range of blocks and really allow you to create custom posts and pages. Whether you are using standard blocks or ones from plugins, you will be able to see options for the block that you are using in the sidebar menu on the right, the amount of options does vary from block to block.
The other tab on in the sidebar gives you options for the post or page as a whole, including the featured image, permalink (URL) and tags. For posts, you can also select which category you want the post to be in.
Once you have finished adding content and formatting your page, you can click the preview button at the top to see how it looks on your site and when you are happy with it, clicking the publish button will allow you to make it visible to the public, private users or behind a password.
Step 8: Optimizing WooCommerce
Before making your new WooCommerce store live, you want to make sure that it is performing well so that it loads quickly for users on both desktop and mobile devices.
Fortunately, WooCommerce and WordPress in general has lots of tools and plugins, that can make a big difference to your sites performance.
Get a Performance Benchmark
There is no point making any changes to your site unless you know how your website is performing as it is currently. This is really easy to do as there are some great free tools online that can help you do this and what is really good is that they tell you what is causing your sites issues so that you can address them. Here are my three go to tools:
- Google PageSpeed Insights – you want to rank in google right? So you want to use their PageSpeed tool to see how they rate your sites performance.
- GTMetrix – a great free tool but if you want access to their global servers, then you will need to create a free account. Their waterfall is a fantastic analytic software that shows you exactly where your site is slow.
- Pingdom Speed Test – with Pingdom, you get access to all of their global servers without having to create an account. This tool gives you a detailed breakdown of what is causing performance issues on your site. This is also the tool I use when testing performance for my ecommerce reviews.
It is best to use these tools together as they all give you slightly different information to help you analyse your sites performance. At this point, don’t be to disappointed/angry/upset if you don’t get good results, this is just a benchmark to improve from.
Remove Unused Themes and Plugins
Having a large number of themes and plugins installed that you are not using can have a big impact on your sites load speed. To remedy this, you want to have a clear out!
For themes, you only need the parent and child of the theme you are currently using. There really is no need to have any others installed.
The same goes for plugins as well, only have ones installed and activated that you are using and need in order for your site to work properly. If have plugins installed for one specific function, it is worth checking to see if another function you are using can do the same job.
Ideally, you only want to have a less than 20 plugins installed to help prevent bloating on your site.
Install Optimization and Caching Plugins
Optimization and Caching plugins can be some of the main tools you can use to improve the performance of your WooCommerce site.
As with everything WordPress, there are lots of options out there and there are plugins that do one or the other and plugins that do both and below is a list of some of the best options out there in terms of features but also ease of use:
- Autoptimize – optimization (free)
- Litespeed Cache – optimization + caching (free, requires litespeed servers)
- WP Rocket – optimization + caching (paid)
- WP Super Cache – caching (free)
When using an optimisation plugin, only change one thing at a time and then check your website to make sure it is displaying properly. There are some optimisations that don’t work with some themes and/or other plugins very well and can affect the look of your site. So always do optimisation in a step by step manner.
Optimise Your Database
Something slightly different to using an optimisation plugin for your websites code is to use and plugin to optimise your websites database.
WP-Optimize is one of the best and easiest to use, by clicking a few check boxes you can clean up your databases and remove any unwanted stuff that may be slowing your website down.
Optimise Your Images
Having large images on your site that haven’t been optimised for a website can take a long time to load and that is why you need to optimise them!
Really, you want to be doing a combination of offsite and onsite image optimisation. Offsite can be done with the likes of Adobe Photoshop, using the save for web feature. Online tools like Canva also produce optimised images as well, which is great.
To optimise your images on your WooCommerce site, you want to use an image optimisation plugin. Some general optimisation plugins will do this for you but I think one of the best tools is Smush. Once you have set it up, it will automatically optimise them when you upload them. It does add a little time to the upload process but it is definitely worth it.
The file type you use for your images also has a big impact on this size of the image and the bigger the image, the longer it takes to load. PNG images are higher quality but also generally have a much larger file size, especially on big images. The best compromise between quality and image size that I have found is JPEG images saved in high quality.
Lazy Load Your Images
Lazy load is a great function, especially if you image heavy pages as it only loads the images that the visitor is going to see. It won’t load images further down the page until they start to scroll down, this can reduce page speed time quite a bit, especially when you combine it with optimised images.
You can install specific plugins to do this but most optimisation plugins will have this feature including Autoptimize and Smush. You only want to enable this feature in one plugin though to help avoid any conflicts between the plugins.
Step 9: Going Live
The final step is taking your WooCommerce site live but before you do that, I would highly recommend running some test orders and refunds/cancellations through your site to see if there are any problems that need to be ironed out.
Once you are happy with it, then get friends or family to go through the checkout procedure and see if they run into any problems. It is always better to do this than trying to sort out problems with actual paying customers.
You are now ready to go live and depending on how you have your site set up, this could be a simple as switching off maintancence mode (usually an option in your security plugin) or switching your payment gateway from testing to live.
To make sure that everything is up and running properly, use an incognito or private window on your browser and this will help you see if there are any issues going on.
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.