Exercise – Adding Items to a

WooCommerce Store
Important note about this exercise – This exercise is NOT part of the Term Project. Some of the
following steps will add pages and elements to your WordPress site that can be safely removed once
you have completed the exercise and explored a bit.

Overview
In a previous exercise, you added the WooCommerce Plugin to your WordPress Web site. This week we
will activate the Plugin and go through some of the initial steps needed to configure a WooCommerce
online store including two products for sale. We will also look at the changes that the plugin makes to
your overall WordPress site.

Instructions
The next step after installing (and updating if needed) the WooCommerce plugin is to activate it. Note
that when the plugin is activated, it will add menu items to the WordPress Dashboard as well as create
some Pages. To activate the plugin, go to Plugins, find WooCommerce and click on Activate.

Page 1 of 14
Initial Setup
When you activate the plugin, you will be prompted to provide information about your store such as
your experience, the name of your store, global location, and what you sell. There are other optional
services such as payment processing, security, and marketing tools (we will not install or configure these)
presented before the store is activated.

In the next step you need to put in some information. I suggest you enter the following:

Give your store a name = Leave the name it suggests, this is your site name
What type of products or services do you plan to sell = Clothing and Accessories
Where is your store located = Canada - Ontario

Page 2 of 14
This slide offers several additional plugins that are recommended for use with WooCommerce. Since we
are only doing a quick overview of the product, we will NOT install any of these, but look them over to
see what they are and what they do. Once you have read this page over, click Continue and your store
will install into WordPress.

Adding Products to your Store

We will now walk through setting up your first product in WooCommerce. You will need the pictures
provided in the ZIP file for this part of the exercise. Descriptions and other text can be copied and
pasted from this document. Let’s begin by adding 2 products to the site, a Seneca Baseball Hat and a
Seneca Women’s Sweatshirt.

Page 3 of 14
To begin you need to select the type of product you will be adding. Read the descriptions. The first
item, a Seneca Hat, will be a Physical product. This type of product does not have any options or
variations.

Next you will enter the details, upload the photos and configure other settings related to the item. Refer
to the following table and screen shots to configure the Seneca Branded Hat as a product.

Name: Seneca Branded Hat

Page 4 of 14
Product Zepher brand, structured, mid-profile, semi-curved snapback hat. Black with red bill
Short and large embroidered Seneca logo. One size fits all.
Description

Description: Show your school colours with this high-quality baseball hat. Cloth construction with a
semi-curved bill to shade your eyes from the sun. Features an adjustable plastic snap
on the reverse side for a perfect fit. The large, red embroidered Seneca logo stans out
against the black fabric and is complimented by the red bill.

List Price: $46.00

SKU: 978446 CCOMP-S/4A/2951

Photos Seneca Hat 1.webp, Seneca Hat 2.webp, Seneca Hat 3.webp
Note: For this exercise we have provided very low resolution webp graphics. This is to
try and prevent server issues when the class tries to upload all at once. In a real
situation you would want to use better quality pictures of your products!

Page 5 of 14
The following images show the additional properties that need to be set. These include SKU, Stock
Status, Shipping Fees, and Dimensions. Enter the information as shown in the image below and when
done, click the Add button. Note you can always correct or adjust these things later.

Page 6 of 14
This is what your product should look like once entered. Notice that the product is in the Category
Uncategorized.

Product Categories
Much like your blog posts, you really should configure Categories for your store. In larger stores with
many products, this will be critical for the success of your shoppers.

To set up Categories you can go to the WooCommerce Categories menu. Here you can add the
categories and provide a relevant description. In the next screen shot, a category called “Clothing” is set
up with a description that reads “Seneca branded clothing for personal use or to give as gifts!”. A
category image was also added, use the AdobeStock_276428144.webp image provided.

See the screen capture on the next page for details…

Page 7 of 14
Once you have created and added the new category, you can go back and add the Hat to it as shown in
the next screen shots.

Page 8 of 14
Adding a Second Product
The first product that we added was reasonably simple as it was a one-size-fits-all single colour option
product. The next product we are going to enter, a Woman’s Hooded Sweatshirt is available in many
sizes and colour combinations. In the old days, all options and SKUs needed to be manually created and
added. Today, with modern eCommerce platforms, this task is mostly automated.

This time we will be choosing a Variable product from the list.

Next, add the product using the information found in the table below. Use the screen shots for
reference.

Name: Woman’s Hooded Sweatshirt

Product Practical and comfortable, this women's cozy campus hooded sweatshirt will quickly
Description: become a favorite. Slim fit women's sweatshirt features an attached hood, rib knit cuffs
and waistband, and a roomy front pouch pocket. Add the Seneca College name in
tackle twill letters on the front for the perfect way to share school pride.

List Price: $64

Product Practical and comfortable, this women's cozy campus hooded sweatshirt will quickly
Short become a favorite.

Page 9 of 14
 Description:
Price: $64.00
SKU: 071721 WFL24/S20452T/2951
Photos Woman's SweatShirt Black.webp, Woman's SweatShirt Green.webp, Woman's
SweatShirt Grey.webp, Woman's SweatShirt Red.webp

Unlike the Seneca Hat which we added as a Physical product and only had a single size and colour, the
Woman’s Seneca Sweatshirt comes in four colours and six sizes. We will need to ensure that shoppers
can choose the colour and size combination that they need. We will need to enter the size and colour
options next. Enter the available colour options and sizes into the next boxes using a | as a separator as
shown below and in the related screen captures.

Colours Black|Red|Grey|Green

Page 10 of 14
 Sizes XS|S|M|L|XL|2XL

With the options entered, you can click the Generate variations button to have WooCommerce
automatically generate the products in the database. You can review and if needed edit the variations
(leave them alone for this exercise) then add a price.

Continued on next page….

Page 11 of 14
The last step in this process is to upload the product photographs for the products. This will create a
gallery showing the different colours of the product.

Adding the store to your Web site Menu

By default, WooCommerce will add pages and menu items to your WordPress site. If you have
completed the in-class exercises, you will have a custom menu and will need to manually add items to
your menu(s). To add your Store to the menu, go to the Customize > Menus configuration for your
Theme in the WordPress Dashboard. In the following screenshots the Miniva theme is active.

Page 12 of 14
Add Shop, Cart, Checkout and My account to the menu by clicking on the + before the items in the list.
Once added, drag Cart, Checkout and My account slightly to the right to turn them into sub-menu items
as shown in the next screen capture.

Publish your new menu and then go shopping!

Term Project Notes

This exercise is not part of the Term Project. You DO NOT need to have a store as part of your Web site.
You are free to leave the Store menu item if you would like to, however feel free to remove the menu
items if you wish. To remove the menu items, go back to the Customize > Menus them customizer on
the WordPress Dashboard. Choose your menu and for each item you wish to remove, click on the item
and select Remove from the bottom of the box that expands:

Page 13 of 14
Page 14 of 14