The Ultimate WooCommerce Tutorial for Beginners

Published on 2021/02/18

|

Last updated on 2021/02/22

|

by Dejan Murko

Featured post image

As the most popular way to create an eCommerce store, the WooCommerce plugin for WordPress runs on approximately 5 million stores worldwide, which comes out to 7% of all tracked websites by BuiltWith.

In this tutorial, we’ll guide you through creating your first WooCommerce store. We’ll focus on simplicity and getting you selling as soon as possible – because that should be your end goal – sales, not (just) a beautiful website.

Tutorial Overview

What is WooCommerce?

Before we get into the tutorial – which will take you through the process step by step until your eCommerce store dreams become a reality – we should probably answer a few basic questions.

WooCommerce is a free plugin that allows WordPress, the most popular CMS, to be turned into an eCommerce store.

You might be thinking: WordPress, isn’t that a blogging platform?

While the system started out as a blogging platform, it has matured into a full-fledged platform for building websites.

As the broadest CMS in the world, WordPress is designed so that users can create anything from a corporate website or a blog to an eCommerce store or a bookings website.

Why choose WooCommerce?

There are countless benefits to using WooCommerce – hence its popularity.

For starters, pretty much anyone – no matter how much they know (or don’t know) about the world of eCommerce site-building – can use WooCommerce to quickly and easily create an online shop on almost any hosting provider worldwide. There are also probably hundreds of thousands of people around the world that can help you with it because it’s so popular.

The flexibility that comes with WordPress extends to WooCommerce. There are not many things you cannot do with the two. But beware – complexity also brings problems, and we’ll talk about this in the tutorial.

Another reason to use WordPress (and WooCommerce) is that it’s open-source, and you own your store. You can always download the files and database of your store and move to a different host. This means your store can’t be taken away from you, and you choose your hosting provider. This is a significant advantage over a proprietary platform like Shopify and Wix, where you really just rent space on their platform and can get booted off with not much more than a CSV export of your products.

How much does WooCommerce cost?

The WooCommerce plugin is entirely free and can be downloaded from WordPress.org.

While the underpinning platform – WordPress – is also free to use, you’ll need to pay for a host to manage your WooCommerce online store.

For your host, you can pay $50 per year or $50 per month, but you usually get what you pay for. It might be worth considering investing a little more to secure a plan with a quality managed WordPress host or even a specialized one in WooCommerce. Especially once those orders start rolling in.

The other costs of running an eCommerce site – related to development, maintenance, and management of your site, and the people required to do so – is pretty much in your hands, and if you keep it simple to start with, then you can get your eCommerce store up and running pretty inexpensively by mostly handling things by yourself.

How to choose a WooCommerce host

Because there are so many hosts to choose from, the choice can feel a little overwhelming.

When choosing a host, you should keep performance and reliability at the forefront of your decision, as they significantly affect your store’s success. Provided that your website is relatively simple, your host should be able to load your site in less than 3 seconds, which you can check with GT Metrix test.

To simplify things, we can put hosts into three categories:

Generic shared hosting. Really cheap (<$100/year), usually slow, basic support, and often has difficulties handling moderately complex installations. Suitable for the first 10-50 orders, but then you should probably move. Example: Bluehost or any local hosting provider outside the US.

Managed WordPress hosting (usually starts at around $30/m). Specialized hosting for WordPress with much better performance, better support, and easy upgrade options. It’s still shared hosting but much better than generic. Example: WP Engine.

Dedicated WordPress/WooCommerce hosting (usually starts at around $50/m). This is where you go when your store’s making money, and you need to focus on marketing, not maintenance. Dedicated resources, which means improved performance and reliability, insights into the server, custom features for WooCommerce, and usually expert support. Example: WooCart.

Once you hit revenue milestones, you’ll want to upgrade your host. That said, if you have the budget, going with the second or third option will save you a lot of time and improve your store’s performance, which results in a higher conversion rate from visitor to buyer.

WooCart is hosting built exclusively for WooCommerce. You receive dedicated cloud resources for your store, staging environment with order sync, and WooCommerce experts that help out with your store.

Learn more about WooCart »

How to set up WooCommerce

Now that you know what WooCommerce is, why it might be the right choice for you, how much it costs to create an eCommerce online shop, and the things to look for when selecting a host, we can get started with the how.

Firstly, you need a live WordPress site. Most hosts, even the cheap shared ones, have one-click WordPress installations available. Use it to create a plain WordPress website.

Then, in order to turn your WordPress site into a store, you’ll need to add the WooCommerce plugin. You can do this a few ways, but the easiest is to select the ‘Plugins’ tab on your WordPress sidebar, where you’ll be able to do a quick search.

Once you’ve located the WooCommerce plugin, all you need to do is click install and activate.

After that, you can begin customizing your site, using the guide below to start creating your online store.

WooCart provides a Store Wizard that allows you to create a WooCommerce store with a few clicks and skip much of this tutorial.

You can have a working store online before you’d finish reading this tutorial

Learn more about WooCart’s Effortless Management »

Common mistakes to avoid when building your WooCommerce store

Before we jump further into the tutorial, let’s mention common pitfalls when building a new WooCommerce store.

There are two things you’ll want to always keep in mind when you’re building your store: performance and maintenance.

If you build your first store with a complex design and lots of features, I can guarantee you that your performance will suffer, and you’ll get plugin conflicts that will make maintaining your store a nightmare.

Keep it simple!

Start with a simple design. Install as few plugins as possible (less than 20).

Focus on your product descriptions and photos. That’s where the difference is made.

Before uploading your photos, make sure to resize them to the appropriate size and run them through image compression. More on that a bit later.

Don’t get stuck on building your store to the exact version you have in your mind. That is a type of procrastination that you want to avoid. Get your store up and running as soon as possible to see how the market reacts to your products.

Always, and I mean always, keep your store updated. The large majority of hacks happen because of an outdated WordPress or plugin. Usually, you can be behind a version for some time, but then you’ll want to keep an eye on security patches and update those immediately. To stay safe, update your store once a week (and always back it up first).

Choosing a WooCommerce Theme and Page Builder

Though it may seem like a simple step, choosing the right WooCommerce theme can really make or break your store: it takes less than a second for someone to make a judgment about your online shop, affecting whether they’ll leave your site or make a purchase.

Therefore, there are a few things to keep in mind when choosing your theme.

For one, your store needs to look good – and you need to choose an aesthetic that matches your branding and will appeal to your target consumers. Try to avoid screaming colors and go with black/dark on white color scheme, unless you’re a designer and know exactly what you’re doing.

Keep in mind that a lot of your users will visit your store on their mobile phones, which means a lot of design elements might get lost. So always test your store on your computer and phone browser.

More importantly – though often overlooked – a poorly coded theme can hurt your site’s performance and may get worse as your site experiences more traffic.

In the impatient age we live in – where anything you could want to know or buy is just a click and a millisecond away – your website’s speed is crucial to the success of your eCommerce business.

Your theme – after your hosting – is the deciding factor in how quickly your site loads. We recommend you go with simple themes and wow your customers with great products and photos.

As to not blindly choose a theme when everyone promises the best performance, read our theme benchmark test where we’ve tested 20 popular free and paid themes. You can see the results in our blog post fastest WooComemmerce theme (speed test).

Bearing that in mind, to get your theme, go to your WordPress and click on the ‘Appearance’ tab on your sidebar, where you’ll be presented with a variety to choose from, and you can click ‘Add New’ to browse and install a particular theme. This works only for free themes, while paid ones will have their own instructions that you’ll receive after the purchase.

As you can see, at the top right corner of the page, there’s a search bar where you can search for a particular theme: for the sake of this tutorial, we’ll be using our favorite, Astra, with WordPress’ Gutenberg as the page builder.

Then, once you’ve found the theme you want, just install and activate.

Within the ‘Appearance’ tab on your sidebar, you’ll now be able to see ‘Astra Options’ (or the options for whichever theme you chose). When you click, you’ll be taken to this page:

To give yourself a website template to start from – and build upon – you can install the ‘Importer Plugin’, the link for which can be found on the right side of the page. After you’ve activated the plugin, it should show up on the sidebar as ‘Starter Templates’.

When you click this, you’ll be taken here:

Once you know which page builder you want to use, you can search for the plugin. Then, click install and activate so that you can begin to customize your site.

Likewise, your page builder affects the speed of your website, so it’s important to choose a page builder that isn’t going to hold you back.

We also ran benchmark tests for page builders. Have a look at the fastest page builder for WooCommerce.

We strongly recommend you go with Gutenberg, the default builder for WordPress. If you want a full-fledged page builder, Beaver Builder is a fast alternative. Keep in mind that the popular Elementor page builder was significantly slower than the rest in our test so you might want to avoid it.

For the purpose of this tutorial, we’ll be using Gutenberg, which anyone can quickly get to grips with to build their online shop.

Gutenberg works on a ‘block’ basis. This means that content such as headers, paragraphs, images, and – in the case of WooCommerce stores – products can be inserted as ‘blocks’ and can be re-arranged on your webpage, however you like.

To be able to make use of these product blocks – and other WooCommerce specific blocks – you’ll need to search for and install another plugin: WooCommerce Blocks.

Once installed and activated, the plugin will allow you to insert blocks for featured products, on sale products, product category list blocks, filters, and carts anywhere on your site (think blog post with a direct option to buy a product).

Another advantage of using Gutenberg is that whatever theme you choose (that’s compatible with WordPress) will also work fine with Gutenberg, making it a great choice for your page building needs.

Designing and building your WooCommerce store

An essential feature to your WooCommerce store, one of the first things you’ll want to do when building your online store is to upload your company logo, making sure that your logo is high quality and the right size for your site.

To add a logo to your WooCommerce site, navigate to the ‘Appearance’ tab on your sidebar, then ‘Customize’ and open the ‘Site Identity’ tab. Here, you can also change the title of your site.

Then, simply click ‘Add Logo’, upload the image, and press ‘Publish’.

Customizing your website colours

Similarly, you can modify the colors on your WordPress theme by heading to the customizer menu and navigating to the ‘Colors’ tab. Here, you can mix and match colors to change the appearance of your theme.

Approximately 70% of customers use a navigation menu to begin their online shop, in contrast to around 30% who head to the search bar. So, it’s a crucial feature to get right on your WooCommerce store.

To create a navigation menu, head to your WordPress sidebar and click on the ‘Appearance’ tab, where you’ll be provided with a number of options, including ‘Menus’.

Here you can edit a menu or ‘create a new menu’.

In both instances, you’ll be presented with some options under ‘Menu Structure’ where you can name your menu and change your menu settings: the most important of which is the ability to choose your menu’s display location.

Here you can choose whether your menu will be a horizontal desktop menu, a mobile menu, or a footer menu, among more, by checking the box next to the appropriate location and clicking ‘Save Menu’.

To add a page to your menu, click the ‘View All’ tab, check the boxes for the pages you want to be displayed in your navigation menu, and click ‘Add to Menu’.

Once you’ve added these pages, they will appear on the left – under ‘Menu Structure’ – where you’ll be able to order them by dragging and dropping the menu items.

When you’re satisfied with your menu choices, and their order within the menu, click ‘Save Menu’.

However, sometimes a visitor needs more than a simple navigation bar can give us. You may want to expand an item on your menu to provide a drop-down list for your site visitors to browse.

To create a sub-menu such as this, simply drag the sub-menu items slightly to the right, underneath the “parent” item: the item you want the drop-down list to appear under.

In the case of a store, the parent item might be ‘Clothes’ and the sub-menu items might be ‘Dresses’, ‘Shirts’ and ‘Trousers’, which will each take your site visitors to the relevant page for the type of product they’re looking for.

Creating pages for your WooCommerce store

Upon installation of the WooCommerce plugin, you’ll be provided with a homepage, a ‘Shop’ page, a ‘Cart’ page, a ‘Checkout’ page, and a ‘My Account’ page after completing the setup wizard.

If you didn’t complete the setup wizard, and these pages are missing, you can rectify this by clicking the ‘Status’ tab under WooCommerce, then navigating to ‘Tools’ where you can find the page installer tool.

Then, if you want to create a new page for your WooCommerce store, click ‘Pages’ on the sidebar, and select ‘Add New’ to start your page customizing journey.

Here are a few pages you might consider adding to your WooCommerce site:

Terms and Conditions

To create your terms and conditions page, you can use a template (we open-sourced ours) or write them yourself with the help of a lawyer.

Contact us

By installing a simple-to-use plugin – such as the Contact Form 7 – you can quickly and easily create a ‘contact us’ page to suit your needs.

Once you’ve installed and activated the contact form plugin, you should be able to see the new ‘Contact’ tab present on your WordPress dashboard, where you’ll be able to access this:

As a default, there will already be a template with all the basic fields required to make a functional contact form: you can insert this onto your new custom ‘contact us’ page.

Or, you can create a new form by selecting ‘Add New’.

When a new form is created with this plugin, a number of essential fields are automatically added to the form – though you can delete the code for these fields if necessary. To add more fields, select the relevant button at the top of the box, and the appropriate code will be inserted to add this field to your form.

To add your new form to your ‘Contact Us’ page, copy the shortcode shown next to your chosen contact form and paste it into the text area of the page editor for this page.

About us

While some opt not to have an ‘About Us’ page on their WooCommerce store site, it can provide a window into the company’s personality and shows buyers that there are people behind the creation of the business.

More than this, having an ‘About Us’ section increases credibility and makes it more likely that your site visitors will trust the site enough to make a purchase.

The WooCommerce widgets you should know about and how you can use them

In whatever theme you choose, there will be widget-specified areas (usually sidebar and footer) where you can insert various widgets, and with the WooCommerce Blocks plugin, you can add these widgets as content blocks.

Some of the most important widgets include:

Product search filters

A product search field is a widget that allows shoppers to search for a product and be presented with search results that best match what they’ve typed.

Product filters

There are a number of different product filters, which will allow visitors to your site to refine their search based on a particular filter and receive results as they narrow down their search with these specific filters.

There are widgets to filter products by:

  • Attribute: display a list of product attributes that site visitors can use to narrow down their product search.
  • Price: filter the search based on the price.
  • Rating: search products based on how customers have rated them.
  • Sale: shows only the products that are on sale.

To add, remove or rearrange the widgets on your site, navigate to the customizer menu under ‘Appearance’. In the theme customizer, head to the widget menu, where you’ll gain access to the widget customizer screen.

Here, you can click the down arrow visible on the ‘Widget Area’ to see the list of registered widgets, and where you’ll also be able to ‘Add a Widget’, which can be added to the sidebar of your site pages.

To arrange your widgets, you can drag and drop the widgets based on the order you want them to be displayed in your sidebar. When you’re done, simply click ‘Done’ to finalize your order.

To customize a particular widget, click the down arrow to expand the widget – here, you’ll also be able to remove a widget by clicking ‘Remove’.

Adding and managing products

At the center of any eCommerce store are the products you’re selling.

So, displaying your products nicely on your WooCommerce site is an important step in this process, which we’re going to take you through, step by step.

To start with, on your WooCommerce, you should be able to see the ‘Products’ tab, which will take you to (what will eventually be) a list of your products.

When you first get started, however, this section will be empty, but you’ll have the option to ‘add new’, where you’ll be presented with this page:

In the top bar, you can type the name of your product; the product name should make it clear to potential customers what the product is (for example, ‘Miniature Cactus’).

The box below is for the product description: what you want your site viewers to know about the product, aside from the obvious shown in the title and image (which we’ll get to later).

Then, when you scroll down the page, you should be able to see this:

Here, you’ll be able to set the price for your product, and – later down the line – you’ll be able to schedule a sale for a particular product and set your sale price here, too.

Moving on, you’ll notice that – at the top of the product data box – there’s a drop-down list, where you’re provided with a list of options for the product type.

A simple product is basically just that – it’s a product that has only one variation, and there’s no need for any extra options to adjust the product according to the customers’ needs.

Meanwhile, a grouped product is an accumulation of similar simple products, which are likely to be bought together but can be bought individually or as a group; this eliminates the need for the customer to navigate to multiple different pages to buy products from the same range.

An external/affiliate product is one you’re advertising for another party – for example, for Amazon, through the Amazon affiliate program. When visitors to your store click on the link to this product, they’ll be redirected to the third party’s site where they can purchase the item.

A variable product is a product with multiple… well… variations – like a T-shirt available in different colors and sizes.

After you’ve decided which ‘type’ your product is, you can return to the main product data box, where you can continue to make your way down the sidebar.

After clicking on the inventory tab, you’ll be able to give your product a stock keeping unit (stock number) in the box labeled SKU so that you can keep track of each individual product, and you’ll be able to record whether the product is in stock.

Then, if you tick the box to ‘enable stock management at product level’ you’ll be presented with this:

Here, you can type in the number of the product you have in stock and allow – or prohibit – backorders, in addition to being able to set a low stock threshold so that more of the product can be ordered when you’re low on stock.

The next tab on the sidebar is for shipping, but it’s pretty self-explanatory – just type in the weight and dimensions of the box plus the product.

Then, we can move onto linked products.

As you can see, you have two options: you can choose to upsell or cross-sell another product (or products).

With upselling, the aim is to get the customer to buy a higher-end, more expensive alternative to the product that they’re currently engaging with. In contrast, cross-selling encourages customers to purchase additional items that complement the product they’re currently looking at.

On WooCommerce upsells show on the product page under ‘You may also like…’. Cross-sells show in the Cart if the product is added.

The remaining tabs on the sidebar include ‘advanced’ – where you’re able to create a ‘purchase note’ to be given to the customer upon purchase, as well as to enable or disable reviews.

As we move away from the product box, at the top right corner of the page, you should be able to see the ‘publish’ box.

Before you click the blue ‘publish’ button at the bottom of the box, your product draft won’t be able to be seen by the visitors to your site.

When you click publish, however, your product will be out there for all the world to see (although you can edit the visibility to ‘private’ if you want to preview the product for yourself first).

Below the publish box, you’ll be able to find ‘product categories’ where you can assign your products into the relevant category so that they can be grouped with other similar products., Moreover, you can add ‘product tags’, which will allow your customers to more easily find what they’re looking for when they use filters to search for a specific product.

Finally, as you scroll down to the bottom of the page, you’ll see the option to select your product image.

However, if you already have a list of all your products – and the accompanying product data – on a CSV file, you can also upload them in bulk by clicking the button on top that says Import. The CSV needs to be formatted in a WooCommerce-friendly way. To learn more on how to import products with a CSV file, read the WooCart help center article.

After a successful import, you should be able to see your products on your WooCommerce shop’s page.

Considering that the product image is probably the most important factor in helping customers decide whether or not to buy a product, you should make sure that the image is high quality and optimized, and re-sized before uploading.

Optimizing images before upload

Image optimization is easy and fast to do on-the-fly but extremely annoying if you need to do it for the already uploaded images. Always try to keep your image size below 250 KB. Even large 2500px can be below that mark if you use image compression and remove EXIF data.

When building a page with a page builder, make sure you’re embedding the smallest image possible. Embedding a few full-size 2000px images when they load as thumbnails on the homepage can easily add multiple seconds to the page load.

Run your images through EXIF data remover and image compression before uploading them to your site. If you already have uncompressed images uploaded, use reSmush.it plugin. Make sure to do it overnight since it will impact your server resources.

Setting up shipping

At the beginning of your WooCommerce journey, the wizard asks you about your payments and shipping, among other things. It’s here that you’ll set your first shipping zone, the method of shipping, and the price – additionally, you’ll select the method and price for ‘locations not covered by your other zones’.

Firstly, you need to set shipping zones – the area which a product is being shipped to – whether that’s to the other end of the country, a certain state or province, or even to a different continent, and you can customize your shipping zone right down the zip code if you need to.

Assuming you ship to people from the local, national, or even international level, you need to set different shipping zones in order to specify an appropriate shipping method for each distance/zone.

Some examples of these could be local, domestic, and overseas.

Within your WooCommerce ‘Settings’, you should be able to spot the ‘Shipping’ tab, where you can customize your shipping settings.

When you first visit this tab, you’ll be prompted to add a new shipping zone, and you can continue to ‘add new’ zones until you’ve covered all your bases.

You’ll also be able to add the shipping methods available for each zone. For example, each customer will be assigned to a particular zone and the relevant shipping method as they make their purchase. However, if their shipping address doesn’t fall into one of your pre-specified shipping zones, they’ll be told that no shipping is available for their location.

Configuring your tax settings

To enable taxes, you need to navigate to ‘settings’ on your sidebar and then click ‘general’.

Under ‘general’ you should be able to see a box labeled ‘enable taxes and tax calculations’, which you should check.

Then, a new option labeled ‘tax’ will be made available under settings, allowing you to customize your tax settings based on the tax laws which apply to your business and the location of your store.

Under this tab, you can decide whether to use prices for your products that are inclusive or exclusive of tax. This means that the prices you input either include the store’s base tax rate or not, which will likewise decide what WooCommerce will automatically ‘calculate the tax based on’ in the box below.

However, if you want to bypass the tedious process of configuring your own taxes – and your store is based in the US – you can install the WooCommerce Shipping & Tax plugin, which will take care of your taxes for you, to ensure that you’re meeting the requirements of your location and business type.

Once the plugin has been installed, under ‘Tax Options’, you’ll be able to select ‘Enable Automated Taxes’, and WooCommerce will deal with your taxes for you.

If you’re an EU-based business, you can use the EU VAT & B2B Taxes for WooCommerce plugin in the same way.

Setting up payments

This will depend a lot based on where you are but there are two recommended payment gateways you should set up, if you have the option: PayPal and Stripe.

PayPal is a popular form of payment where buyers don’t need to give you their credit card directly and can pay with their PayPal account. We recommend installing the official WooCommerce plugin for PayPal and disabling the out-of-box PayPal standard. This gives your visitors a better checkout experience where they can finish the checkout on your store instead of going to the PayPal website.

Stripe is the most popular gateway to accept credit cards and extremely easy to set up. We recommend installing the official Stripe plugin. It gives them a great checkout experience where they stay on your store and the payment is securely processed through Stripe.

A guide to security and protecting your WooCommerce shop

In a rush to create a stellar website that will draw in customers and make tons of sales, it can be easy to forget the importance of security, even though it’s the pillar that keeps your eCommerce store up and running.

Here are a few things you should have to ensure that your eCommerce has everything it needs to remain secure – for your sake and your customers’.

SSL certificate

SSL certificates encrypt the connection between your server and your customers so that all data is transferred securely. This shows in the browser as HTTPS.

SSL is mandatory for eCommerce stores in many countries and should be provided as part of your hosting service – always double-check before you choose a host.

Backups

Essential for your store, backups ensure that if something goes wrong with your store, you can quickly return your site to how it was before it was corrupted. For example, if you add some code yourself and it goes wrong, or accidentally delete some data from your site.

You can do your backups yourself, or your host can do it for you – just make sure that your site does get backed up daily.

Keep WordPress updated

Several businesses have left their sites vulnerable to attack simply because they aren’t using the most up-to-date WordPress version.

While some people are hesitant to update their WordPress to the latest version – for fear of it messing up their site – with each new version, WordPress fixes the previous version’s vulnerabilities, so updated your WordPress is crucial for maintaining your site’s security.

And this doesn’t just apply to WordPress – make sure that the plugins and themes you’re using stay updated, too, and are regularly maintained by their creators.

Use strong passwords

While this should go without saying, using strong passwords is vital to warding off hackers; loads of eCommerce sites have been hacked as a result of passwords such as ‘12345678’ or even simply ‘password’.

If your site means anything to you, you should choose unpredictable passwords with a variety of characters to deter hackers and keep your site safe.

Manage users appropriately

User management ensures that the people within your workforce can only access the relevant features to the job they need to do. This means that you shouldn’t give administrator access to just everyone but limit it to roles (shop manager, editor, etc.) as appropriate.

WooCart is hosting built exclusively for WooCommerce. You can create your first store with just a few clicks and have WooCommerce experts support you throughout your eCommerce journey.

Learn more about WooCart »

Summary

We hope this tutorial helped you build your first WooCommerce store! While it might be intimidating in the beginning, we encourage you, again, to keep it simple so that you don’t become overwhelmed in the beginning.

And, if you want to skip this tutorial, sign up for a free trial of WooCart and you can have a store online just minutes from now.

Dejan Murko

Dejan is the WooCart co-founder and Project Lead.

See other posts »

Learn How to Speed up Your WooCommerce Store

The best tips for the 80/20 results/effort ratio.