Pankaj Shah

I hope you enjoy reading our blog posts. If you want DCP to build you an awesome website, click here.

How to add products to WooCommerce shop page - Step by Step Guide



In this tutorial, I will show you how to add simple products to your WooCommerce shop page.

In WooCommerce there are options to add both simple products and product variations. Before you can add products to your e-commerce website, you need to go through the basic WooCommerce setup wizard.

Adding products to your WooCommerce website is super simple once you know how to complete this task. A good option is to also install Yoast Duplicate plugin so you can copy an existing product are re-use the base for a new product. This will help speed up the data entry on your website.

How to add products to WooCommerce shop page

How to add a product in WooCommerce

Below, I show you my step-by-step guide on how to add your first WooCommerce product.

Tip: You can click on any of the images below to enlarge.

Tip: View this article for how to add product variations in woocommerce.

Note: In this tutorial, I will be using the Flatsome WooCommerce Theme but the logic of the tutorial can apply to any other Theme.

1. Log in to the WooCommerce admin control panel

On the left side menu options select "Products" and then select the "Add New" button.

select add new button to add a new product to WooCommerce

2. Add a name for your WooCommerce product listing

Tip: If your product is available in different colours, then try to incorporate the colour into the product name.

  • Example: Men's Polo T-Shirt Grey
  • Example: Ladies Long Sleeve Dress Blue
  • Example: Red dining room coasters

Add a name for your WooCommerce product listing

3. Add an SKU for your product

What is a Product SKU?

An SKU (Stock Keeping Unit) is a unique identification number used in your business to track product inventory.

SKUs are often alphanumeric and contain information on the most important elements of a product. An SKU code can incorporate any of the following:

  • Price
  • Colour
  • Style
  • Brand
  • Gender
  • Type
  • Size

The content of an SKU's information is often placed in priority order.


  • 25 = £25.00
  • RED = Colour
  • M = Men's
  • TS = T-Shirt
  • SM = Small

Add an SKU for your product

4. Select a product category

Note: Before adding a product to WooCommerce it is worth spending some time to build out your WooCommerce product category structure.

Tip: You can select more than one category for listing your product, but in most cases, you would select a single category.

  • You can add new categories from the product view as well if required.

Select a product category

5. Add product tags

Product tags are optional, but I would suggest adding tags as this is searchable content.

Tags can be used to help customers find a specific product on your website.

For example, if you are listing a Grey T-Shirt with a Spartan Helmet Graphic, then you might add the following tags:

  • Grey
  • Round Neck
  • Spartan
  • T-Shirt

Note: When you add the next product to your WooCommerce store you will be able to re-use the tags, as you type in a new tag it will automatically show if it has been used before.

  • You can also select the "Choose from the most used tags" option.

Add product tags

6. Add main product image

For all products you add to the shop, you need to assign the main image.

The main image is the image that is shown to customers when they are browsing your website.

Tip: Try to keep your images consistent.

  • Take a look at the Bubsy Bu e-commerce website I created for my client as a good example of consistent product images.

I would recommend adding images with the dimensions of 1000 pixel width and 1000 pixel height.

6.1 Select the "Set product image" link

Upload main product image

6.2 Drag and drop the image into the media library

  • Remember to update the Alt text.

  • Select the  "Set product image" button.

Media library file upload

You can now see the image listed in the product.

Uploaded main product image

Note: You can simply click on the image to change it if required.

7. Add product main description

In this article I am listing a T-Shirt product, so I want to display a size table.

I suggest adding a size table for clothing based products, for other products a general description should be fine.

Try to use bullet lists if possible when highlighting key features of your product.

Add product main description

Below is the HTML table code I used for the size guide

<th>Chest Width</th>
<th>Sleeve Length</th>

8. Save product as a draft

At present you have added a lot of information to your product listing, it is advisable to save your product listing as a draft copy.

Note: A daft product is not live, so only you can see the product on your website.

Saving the product as a draft is a good method of adding products to your website as you can save the content after a few completed steps.

It is worth taking the time to make your product listing the best as possible, this will help your customers when making a buying choice and you can also duplicate the product listing to create more products faster.

Save product as draft

9. Add a product short description

On most WooCommerce themes you should be able to add a product short description.

The short description often displays near the top of the product listing page near the "Add to basket" button.

The short description can be:

  • A block of text information
  • A bullet list
  • A combination of text and bullet list

The content can also contain URL links to alternative products or information pages.

The short description is optional but is a good idea to have some content that quickly explains the benefits and features of your product.

This is also good for search engine optimisation.

Add a product short description

10. Add meta description

Just like the product short description, you can also add a custom meta description for your product listings. The meta description is used in the search engine results so it is important that it contain useful information.

Try to get the most important information about your product in the first 160 characters. I have seen a lot of websites state that the meta description should be 50 - 170 characters, this is not true!

The meta description can be any length, but I would suggest adding no more than 500 characters and make sure the most enticing product information is displayed first.

Add meta description

11. Add additional product images

In WooCommerce there is an option to add some additional product images.

I would recommend adding 4 or 5 additional images but this is totally optional.

If you are selling a clothing item then you might add an additional image for the:

  • Back of the product
  • Close up of the product
  • Close up of the logo
  • Model wearing the clothing item

The type of alternative images you upload will really depend on the product listing. I suggest you go and check out some competitor websites and see what works for them!

Add additional product images

12. Making your product live

At present we have been saving our product as a draft copy. Once you are happy with all the content added you can simply select the "Publish" button to make the product live on your website.

Making your product live

Don't forget to promote your new product on social media like Instagram, Facebook, Twitter and even YouTube.

Well Done! - Your product live now live on your WooCommerce shopping website.

WooCommerce Frequency Asked Questions

What is WooCommerce?

WooCommerce is a plugin that you can download for free and install on a WordPress website. The plugin gives you a full turnkey e-commerce solution. You can simply add products, categories and general pages. Once completed you can add a payment gateway like PayPal or Stripe to accept payments. You can even set up discount codes and specific cost for the delivery of products based on a customer's location.

What is a WooCommerce Theme?

A WooCommerce Theme often adds some additional functionality to a WooCommerce shop website which is not available in a standard WooCommerce Theme. The functionality can improve the speed of your website, add features like zooming in to products images, customised the layout of pages, categories listings and product content pages. The goal of a theme is to give a user a more simple way to customise a WooCommerce Shop.

What is the best WooCommere Theme?

This really depends on the types of eCommerce shop you are creating. At DCP Web Designers we often use the Flatsome Theme as we find this theme to be highly customisable.

Add products to WooCommerce video tutorial

How to add products to WooCommerce shop page

WooCommerce 2021 Tutorial

Article created by: Pankaj Shah | DCP Web Designers London

Tell Us Your Thoughts

Thank you for contacting us.
We will reply to you in next 2 working days.

Releated Posts

6 Basic Principles of Web Design for College Students


6 Basic Principles of Web Design for College Students

There are thousands of students who want to get into web design. It’s a great discipline for creative people and a good way to earn a living. They dream of making web pages for businesses of all sizes and industries. Yet, not all of them are familiar with the basic principles of web design.

What is WordPress? The Beginner's Guide


What is WordPress? The Beginner's Guide

In this beginner’s guide, we’ll explain what WordPress is and why you should be using it. After reading this, you’ll know exactly how to get started, where to find the right plugins, and how to grow your personal or business website.

How to Install WordPress Locally - Windows, macOS, Linux


How to Install WordPress Locally - Windows, macOS, Linux

It can be useful to install WordPress on your computer if you are new to WordPress or even an experienced WordPress Web Designer. Normally you would purchase a domain name and a web hosting account to set up WordPress, but both of these elements cost money. Setting up WordPress locally is cost-effective as you are not paying for any third-party services. I often install a WordPress website on my local computer where I can experiment with new plugins, themes or custom web development. WordPress thankfully can be installed on your local computer using a few simple steps.

What are the steps for installing WordPress


What are the steps for installing WordPress

It's important to note that the specific steps for installing WordPress may vary depending on your hosting provider and the environment you are using. If you are having difficulty with the installation process, you may want to consult the documentation provided by your hosting provider or consult a web developer for assistance.






Please enter your name
Please enter correct email
Please enter your phone number
Please enter your message

Your data is encrypted and never shared.
View our privacy policy.

Thank you for contacting us.
We will reply to you in next 2 working days.