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

19-04-2021

Back

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.

Example SKU: 25REDMTSSM

  • 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

<table>
<thead>
<tr>
<th>Size</th>
<th>Chest Width</th>
<th>Length</th>
<th>Shoulder</th>
<th>Sleeve Length</th>
</tr>
</thead>
<tbody>
<tr>
<td>S</td>
<td>34.65</td>
<td>24.80</td>
<td>15.75</td>
<td>7.09</td>
</tr>
<tr>
<td>M</td>
<td>36.22</td>
<td>25.59</td>
<td>16.54</td>
<td>7.48</td>
</tr>
<tr>
<td>L</td>
<td>37.80</td>
<td>26.38</td>
<td>17.32</td>
<td>7.48</td>
</tr>
<tr>
<td>XL</td>
<td>39.37</td>
<td>27.17</td>
<td>18.11</td>
<td>7.87</td>
</tr>
</tbody>
</table>


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


HTML5 & CSS3 - Beginners Tutorial - Part 18 - CSS DIV Tag Tutorial

24-01-2019

HTML5 & CSS3 - Beginners Tutorial - Part 18 - CSS DIV Tag Tutorial

In this video tutorial, I will show you how to use DIV tags and explain why DIV tags are useful when you want to separate HTML code from design elements.

How to Setup Email Account in Cpanel | Video Tutorial

09-01-2020

How to Setup Email Account in Cpanel

In this tutorial, I will show you How to Setup Email Account in Cpanel. Creating business email accounts using Cpanel is as easy as "123".

How to switch PHP5 to PHP7 using WHM tutorial

20-11-2017

How to switch PHP5 to PHP7 using WHM tutorial

In this video tutorial, I will show you how to switch PHP5 to PHP7 using WHM. PHP7 provides a new set of powerful and secure functions to improve your PHP coded websites.

WooCommerce Flatsome back image fade video tutorial

22-04-2021

WooCommerce Flatsome back image fade video tutorial

In this video tutorial, I will show you how to back image fade in your WooCommerce shop category pages. Back image fade on product listings allows a user to hover over a picture and automatically see a different view of the product. At DCP we often use this feature when building a website that contains clothing items. The back image fade can be used on any type of product listing which has more than a single image. 

GET YOUR FREE QUOTE


CLAIM YOUR 2 HOURS

FREE CONSULTANCY


  • AFFORDABLE PRICING
  • 15 YEAR KNOWLEDGE
  • LONDON BASED DESIGN AGENCY

NO OBLIGATION QUOTE

arrow
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.

back