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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
There are a number of options here, but in most cases “Ship to all Countries you sell to.” will be the option you select.
Default Customer Location
This is how WooCommerce finds out where your customer is. Geolocate uses the I.P address.
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.
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.
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
Empowering Business... Empowering People
Accessable, Responsive Websites for Small Business, Start-Ups and Public Figures. Future Proof & Robust Design, built to grow alongside you, achieving your Goals.
The web design process is a collaboration, easy to understand but most importantly friendly. We listen to your requirements, we listen to your needs. It’s your website, you need to love it as much as we do.
Each attribute can have many variables. This is shown in the table below…
Black, Blue, Red, Green
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
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 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.
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.
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.