Step by Step WooCommerce Tutorial for Beginners

So you want to build an Ecommerce website using WooCommerce but have no idea where to start?

If this is you, don’t worry as we all have to start somewhere and this guide will take you through the basics of setting up WooCommerce and also include links to relevant posts that cover certain areas in more detail, so that you can start building your ecommerce empire!

But before we can get started with the tutorial, there are some things that you already need to have in place:

  1. A self hosted WordPress website
  2. SSL Certificate installed and configured, so you are running on https
  3. A theme that is compatible with WooCommerce

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 and Activate WooCommerce

The first step is to install and activate the WooCommerce plugin, this can be found in the WordPress plugin library and can easily be found by simply searching for WooCommerce and the one you want to install is by Automatic and has 5+ Million Active Installs.

Woocommerce Add Plugin

Once you activate the WooCommerce plugin, you will be taken through their quick start guide, which includes:

  • Store Information such as where you are located, store address and currency
  • Payment to set up PayPal standard
  • Shipping, create a shipping method for your products
  • Recommended WooCommerce extension plugins

The set up wizard is very basic and one of the reasons why I created this guide as there are lots of things they haven’t covered!

Step 2: Add Additional Payment Gateways

In the quick start guide, WooCommerce lets you set up PayPal standard this isn’t the best!

Two popular payment options for new WooCommerce stores are PayPal Express Checkout and Stripe and I am going to show you below how to set these two up.

To set both of these up does require the installation of additional plugins and although WooCommerce do offer both of these but they aren’t the best options and are rated quite poorly by their users, so I will show you some alternatives that are highly rated.

How to Add PayPal Express Checkout in WooCommerce

As mentioned above, WooCommerce do have a PayPal checkout plugin but it currently has 1 out 5 stars, so probably best to avoid! Fortunately, the team at WebToffee have created their own PayPal Express Checkout plugin that is rated at 4.5 out of 5 currently and this was the PayPal plugin I used on my own WooCommerce site.

PayPal Express Checkout WebToffee

You can find this plugin by searching PayPal Express in the WordPress plugin library and just look for the one developed by WebToffee, once installed and activated, the settings can be accessed by going to:

WooCommerce → Setting → Payments

On this page, you will see all of the payment options that are currently available for your store and if you set up PayPal Standard in the set up wizard, this will be enabled and if you want to use PayPal Express Checkout, then it is best to disable the standard PayPal option.

Payment Options WooCommerce

You will now need to set up PayPal Express Checkout and you can access these options by either clicking on PayPal Express or the Set Up button on the right hand side and this will produce the following screen:

PayPal Express Settings WooCommerce
PayPal Express Settings WooCommerce 2

Now there are a few settings on this page and it is worth reading through the documentation on the WebToffee site before proceeding, so that you know that you are doing things right.

But the important sections you want to set up are:

  • Whether you are in Sandbox or Live Mode
  • Add your API credentials that are available from PayPal
  • Whether the Gateway is enabled
  • Where you want to PayPal button to show

Once all these are set-up, you will have added PayPal Express Checkout to your website but it is recommended to run some test orders through before allowing orders from paying customers, just in case there are any issues.

How to Add Stripe to WooCommerce

When it comes to adding Stripe to your WooCommerce store, the most highest rated plugin is from the team at Payment Plugins and one of the main plus points of this plugin is that you can use a lot of integrations that Stripe has to offer multiple payment options to your customers, including:

  • Credit Cards
  • Apple Pay
  • Google Pay
  • Klarna
Stripe Payment Gateway WooCommerce

The Stripe for WooCommerce can be found in the WordPress plugin library and as mentioned it is highly rated and as of writing it has a 5 stars and over 70,000 active installs.

Once you have installed and activated the plugin, you can find all of the setting options at WooCommerce → Settings → Payments and as you can see in the image below, there are lots of options added as these are all the integrations that Stripe offers but for this tutorial, we are just looking at the credit card functionality that they offer.

Stripe Payment Options

To set up Stripe, simply click on the method that you want to set up (in the case Stripe Credit Cards) and then click the API Settings heading on the following page, this is where you can connect your WooCommerce site to your Stripe account.

By default, the plugin is set to Test mode, which is the best way to get started as it allows you to check the integration before accepting payments from actual customers.

Stripe Settings WooCommerce

Once you have connected your WooCommerce site and Stripe account, you can then head to the Credit Card tab and configure the settings for the credit card.

Stripe Credit Card Settings Woo

As every WooCommerce store is different, it is up to you to decide what the settings are for your site but there is documentation available to help you work through these settings and decide which ones are best.

Step 3: Setting Up Shipping Methods

Setting up your Shipping options in WooCommerce can be a bit daunting as there quite a few different options available but for this tutorial, we are just going to look at adding a simple, flat rate shipping option.

If you want to learn more about some of the more advanced aspects of WooCommerce shipping, such as Shipping Zones, then check out my How to Set Up Shipping in WooCommerce tutorial, that covers this in detail.

To access your shipping settings, go to WooCommerce → Settings → Shipping and you should see a display very similar to the image below and the method you created in the set up wizard will be visible here and you can either choose to edit this method or add a new one.

WooCommerce Shipping Settings Page

Whichever option you choose, the following screen has the same layout, with the only difference being that if you are editing a method, it will have the name, regions and method already created, where as the add new method is blank.

WooCommerce Shipping Zone Set Up

The name of the zone is just a reference for you in the admin dashboard but it still helps to name it appropriately.

The zone regions are where in the world this zone applies, for some countries, this will just be the country but larger countries such as the USA and Canada will also have states/provinces as well.

Finally, the Shipping Method is what is displayed to the customer when they are going through the checkout, so make sure these are name correctly, when adding a Shipping Methods, you will be asked if you want it to be:

  • Flat Rate – a single rate for all customers
  • Free Shipping – condition based free shipping from order value or coupon
  • Local Pick-up – arrange for customers to collect from you
WooCommerce flat rate shipping

Flat Rate shipping is the easiest to set up as it just asks you for the title, tax status (whether you charge tax on shipping or not) and how much it costs. You can set up multiple shipping methods in a single zone, so you could have two flat rate options, one for Standard Delivery and one for Express Delivery.

There are many more options that you can set up when it comes to Shipping and as I mentioned above, I created a completely separate How to Set Up Shipping in WooCommerce tutorial, that covers all of these in much more detail.

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
    • Physical
    • Digital
  • Grouped Product
  • External/Affiliate Product
  • Variable Product

For this guide, we are just going to be looking at how to create a Physical and Digital product but if you would like to know more about create a variable product, then check out my How to Create Product Variations in WooCommerce tutorial.

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.

Product Categories WooCommerce

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.

How to Create a Physical 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:

Add New Product Page WooCommerce

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.

WooCommerce Product Page

How to Create 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.
Digital Product WooCommerce

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.

Step 5: 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

  • Privacy Policy
  • 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 6: Add WooCommerce to WordPress Site

Now that you have everything ready to go, it is time to add WooCommerce to the front end of your WordPress site so that you can actually start selling products.

There are multiple ways to add WooCommerce to your live site and it is down to each website owner as to which ways they think will be best for their site but I will look at some of the main ways you can set WooCommerce up on the front end of your site.

Add Shop Page to Navigation Menu

The easiest way to add WooCommerce to the front end of your site is to add the default shop page to your main navigation menu.

The default shop page isn’t the most amazing in terms of layout and design but it does list all of the products that you have for sale.

You can also add your categories as sub options under the Shop heading to make it easier for your customers to navigate around your site.

Create a Custom Shop Page

If you don’t like the default shop page, then you can create a custom shop page using the Gutenberg page builder and the WooCommerce blocks.

Gutenberg WooCommerce Blocks

There are lots of blocks to choose from and you can decide which products and categories that you want to display. You can also use these blocks to add WooCommerce to your existing homepage or even add them to your blog posts.

Step 7: Testing and 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.

Conclusion

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.