In this post we’ll take an in depth look at Adding Products in WooCommerce and answer some of the question that are often asked; What’s the difference between attributes and variables? How do I add product quantities and variable pricing? How do I change the image and price of a product depending on customer selection? And everything else you need to know when creating a product for sale on your website using WooCommerce. 

In the past few weeks I’ve had a number of interesting chats with clients about the future of their websites. The whole business is less mysterious than it was in the past and business owners feel more confident. They want to take on some of the work that, in the past, would be either too difficult or too time consuming. One such discussion stared last month with an Online Store client SNappIT.co.za; we are building an E-Commerce website for selling personalized business products in the South African market. I was explaining WordPress, WooCommerce and the other software we would be working with…

Will I be able to add new products to the website in the future?

This guide is the answer to that question. We’ll first look at the basics of WooCommerce products; the product dashboard, categories and permalink structure, image, price etc. Then we’ll get into the detail of variables; colour, quantity, size etc. and how to assign each of these an image, a price and even a shipping rate.

The Best E-Commerce Platform on the Web

If you’re looking at building a website for your business then I’m sure you’ve read about WordPress, it’s the most popular CMS (Content Management System) on the web. We use it every day, and all the basics are free. It also gives our clients a user friendly interface to work with on an ongoing basis; for creating new pages and blog posts.

If WordPress doesn’t do what you need out of the box then there are thousands of plugins to add extra functionality. A plugin is a small piece of software that you upload to your WordPress website. It makes changes to the way WordPress works.

E-Commerce Home Page Design - Web Design by Online Trade Marketing

WooCommerce is a WordPress plugin that adds E-Commerce functionality. It adds pages; cart, checkout, shop etc. automatically. As well as the Dashboard tabs for posts and pages, you will now have a product tab. Here you add the name of the product, a description, the price and everything else associated with an Online Store. It’s this product page we are going to concentrate on in this post, Adding a Product in WooCommerce.

Adding a Product in WooCommerce starts at this page, the product dashboard.
Click to Enlarge Image.

In the above image I’ve highlighted the Dashboard tabs added by WooCommerce. The product tab is open, this shows a list of all your products in rows, each column offers more detail. There are two spots for “Add New,” the top of this page or in the tab below WooCommerce on the left. The other tabs; “Categories,””Tags,” and “Attributes” we’ll deal with in turn when we are creating a new product.

Product Data Panel

When you click Add New, much will be familiar to you from the standard post or page editor; Title, Description etc. The major difference is this Product Data Panel shown here on the right. This is where you give each product the details WooCommerce needs to sell it to your customers. 

Adding product price, variations and attributes is done in this panel
Click to Enlarge Image.

There are two types of product we are concerned with here, Simple Product and Variable Product. You select these from the drop down menu at the top of the box, a product must be one or the other. A simple product is just that… simple. It has 1 price, there are no sizes or colours for the customer to choose from. An example of it’s use would be an antiques website. Each product would be unique, there would be a single price, a shipping price, description product images and that’s it, a simple product. If you’ve used WordPress before then this will be… well, simple. We’ll take a quick look at shipping, permalink structure categories and tags before we learn about Variable Products.

Product Categories & Tags

You might be used to categories and tags for your blog posts but they take on extra importance when you add them to products. They are one of the ways customers navigate around your site. Tags, for example, can be used by internal search.

Categories are vital, they are how you divide up your products for customers so they can easily see what you offer. They should be part of your permalink structure and breadcrumbs shown to visitors so they can find their way back. Let’s look at SNappIT.co.za as an example.

https://snappit.co.za/shop/pens/ball-point-pens/

Above is an example of a URL. It starts with /shop and is followed by /pens, the main category and /ball-point-pens, the sub-category. Below is an image of a product page, a product from this category, highlighted are what is called the breadcrumbs. As you can see, before the product are the sub-category, the category, and Home, this is how the customer got to this page.

Click to Enlarge Image.
WooCommerce Product Page Breadcrumbs
Click to Enlarge Image.

WooCommerce Shipping

Shipping needs a whole guide all on it’s own, in the future we’ll definitely do that. Seen here on the right is the shipping tab contained in the product panel. But most of the shipping settings are in the General or Shipping tabs of the WooCommerce Settings.

Click to Enlarge Image.

Shipping is one of the most powerful aspects of the WooCommerce plugin. There can be multiple factors entered into WooCommerce in order to calculate how much each customer pays for shipping. Let’s take a look at each of the major factors in turn.

1. Basic WooCommerce Shipping Settings

Dashboard = WooCommerce = Settings = General

We’ll continue to use SNappIT.co.za as an example. Below is a screenshot of how this website is set up. It’s a start-up business will a small catalogue of products, at least initially. Although these products will have a high degree of customization and variation, colour, quantity etc.

Click to Enlarge Image.
A - Selling Locations

Here you have 3 options; “Sell to all Countries.” “Sell to all Countries Except for…” and “Sell to Specific Countries.” In this case we are selling to a single country, so that’s the option we select. That opens the following set of options. The option you select will depend on your own website and business.

B - Sell to Specific Countries

Here, select the countries you intend to sell to from the drop down menu. Every country you can think of is here. This website is only selling to South Africa so that the country we have selected. You will select all the countries you will sell to.

C - Shipping Locations

There are a number of options here, but in most cases “Ship to all Countries you sell to.” will be the option you select.

D - Default Customer Location

This is how WooCommerce finds out where your customer is. Geolocate uses the I.P address.

2. Shipping Zones & Shipping Methods

Dashboard = WooCommerce = Settings = Shipping = Shipping Zones

That’s the basics covered. Now we move into Shipping Zones. Again there is a lot of detail you can enter here but we’ll stick to the basics that most new websites will need.

For Adding a Product in WooCommerce you will also need Shipping Zones
Click to Enlarge Image.

As seen earlier, we are only  selling products in South Africa, so that is the Zone Name. Then, as we did earlier, select South Africa from the Zone Regions drop down list. What can be done at this stage would be to have different shipping zones. For example; if your warehouse is located in Zone A you could offer free shipping, only in that Zone (in the Shipping Methods, seen below), Zone B, C etc. would have different shipping methods.

Next, click “Add Shipping Method.” Most businesses will select both of these options. Flat rate is where you enter your delivery charge, Free Shipping can be offered above a certain order amount for example.

3. Shipping Classes

This only applies if you have items, or groups of items, that have a different shipping rate to other items.

Dashboard = WooCommerce = Settings = Shipping = Shipping Classes

Create a new shipping class, all you have to do is give it a name. Then apply a cost to that class within each shipping Zone. The shipping class can then be selected for each product on it’s product data panel.

WooCommerce Product Attributes & Variables

Two of the most important aspects of adding a product in WooCommerce are Attributes & Variables. They are also the aspects that most business owners find the most difficult to understand. I’ve added a demo pen product to our website.The pen comes in 4 colours; black, blue, green and red. There are 2 ink colours to choose from; black and blue. The customer can also choose to buy various quantities of this pen.

In this case Pen Colour, Ink Colour and Quantity are product attributes. These are added on the page shown below.

Dashboard = WooCommerce = Attributes

Online Trade Marketing

Lets take you journey to online success together...

Your website is the most important advertisement for your business and good web design is a vital component of your future success. Online Trade Marketing are you one stop shop. Start your online adventure today.

Working with Online Trade Marketing is like employing a part time member of staff, who works from home and delivers results month after month. Our SEO package is based on us providing a minimum of 10 high quality content, code and analysis hours per month.

Adding a Product in WooCommerce with Attributes
Click to Enlarge Image.

Each attribute can have many variables. This is shown in the table below…

Attribute

Pen Colour

Ink Colour

Quantity

Variable

Black, Blue, Red, Green

Black, Blue

1, 5, 10, 25, 50, 100, 250, 500, 1000

Variables are added by clicking on an attribute. Seen below is the Quantity attribute.

Note : All of the attributes and variables must be added on these pages before they can be applied to a product.

Adding Products in WooCommerce using Attributes and Variables
Click to Enlarge Image.

Adding Products in WooCommerce Using Attributes

Now it’s back to the product page, and down to the product panel. Seen here on the right. First, select variable product from the top drop down menu. Then, on the left, select the attributes tab. Select the attribute you wish to add from this drop down menu. We have selected Pen Colour, click add.

Next, select the values and make sure to check the box; “Used for variations.”

Adding Variations to a WooCommerce Product
Click to Enlarge Image.
Click to Enlarge Image.

Adding Products in WooCommerce Using Variables

Repeat this process for each attribute and variable your product needs. This will generate a product variable for every combination of attribute value selected.

Here on the left is what the Variations tab looks with just the 4 values from the Pen Colour attribute added. You can add a default value at the top (the variation that is shown to the customer when the page loads).

Instinctively, you all know how a product page should look; because you have all shopped online. You expect to select options like colour, size etc. and when you do you expect the product image and price to change accordingly. Next, we’ll take a look at how we make that happen. 

Adding a Product in WooCommerce with colour, quantity and price variation.
Click to Enlarge Image
Click to Enlarge Image

Above and below are two variation panels, access these by clicking on any of the variations. The variation above is a quantity of 10 black pens with black ink, the price is 9.99 (a price has to be entered for each variation or it will show as Out of Stock on the front end of the website). The variation below is a quantity of 100 blue pens with black ink, the price for this variation is 89.99. In this example the price is based on the quantity (ink and pen colour have no baring) so we enter the price for each variation. The only other entry is the image. For each pen colour add the corresponding image.

Seen here, above and below are the front end pages for the variations entered on the left. As you can see, the price and the image as changed to match the information entered in the variation drop down menus.

Click to Enlarge Image
E-Commerce Websites at Online Trade Marketing
Click to Enlarge Image

Thank you for reading this post, I hope you now have a better understanding of Adding a Product in WooCommerce. If you are an E-Commerce start-up or an existing shop looking to take your business online please get in touch using the Contact Page in the main menu.


We want to hear from you...