WooCommerce – eCommerce for WordPress

Decide what categories you are going to need so you can build the taxonomy that will let people navigate and find your products. For this example, we’re going to have the following categories:

• Books
• Downloads
• Services
• Hosting Plans
• Website Packages

Our store will have all of the basic product types:

1. Simple products – A standard, regular product which is tangible and can be shipped.
2. Downloadable products – A digital product the user can download. Nothing is shipped.
3. Virtual products – Nothing is shipped and nothing is downloaded – this could be a service or a booking.
4. Grouped products – Not sellable itself, a grouped product is a collection of related products, for example a dinner set containing multiple simple products.
5. Variable products – Not sellable itself, a variable product contains several variations each of which can have different stock levels, sku’s and prices. A good example of this is a t-shirt where the variations could be size and color.

Step #6. Configure the Basic Parameters of the Cart

Once you install the plug-in, you’ll see a new menu for WooCommerce. Click Settings and read and check all configuration options:

You’ll be defining the base currency, tax rates and other basic parameters. The defaults are set for the UK. If you are in a different country be sure to go through all of the tabs and make sure you have everything set for your location.

In this example we’re using the simplest methods for each. You would need to purchase add-ons or get help from WooThemes for more complex tax and shipping setups. The same goes for different payment methods. The default is PayPal, and they are still developing add-ons for other payment methods at this time.

Click the Tax tab. Set the tax rate for Washington. In the US, taxes are applicable to any shippable product, and they are based on the state of origin, or the state the company headquarters are in. You need to check the tax laws in your state to comply and get the correct rates.

Click the Shipping Methods tab and enable the shipping method and set a type, tax status and set the price. We’re using Flat Rate shipping with a Handling Fee.

Go to the Dashboard > WooCommerce > Products > Categories. Click Categories in the Products section on the dashboard.

Just give the category a name and click Add New Product Category if that’s all you need. You can create subcategories if you want and also upload a category image. This may not show on your template. WooCommerce has it’s own set of themes. I am using the default 2011 theme in this example. All of the administrative functions will be the same, but the ultimate display is determined by what theme you are using.

Go to Dashboard > WooCommerce > Products > Add Product

To make this a Simple Product, choose Simple from the Product Type.

Type the information for the product into the edit window as you would for any post. Don’t add the product picture yet. We’ll do that when we choose the featured image. The program uses the featured image for the product detailed information page. If you don’t use a Featured Image, and insert the picture from the editor, you won’t have a picture on the details page.

You can add other pictures and graphics on the rest of the page using the editor.

NOTE: The process for creating a virtual product, like a service, is the same as the simple product, except for needing to track inventory. So we won’t be repeating the steps for that Product Type. By the end of this tutorial you will have plenty of practice adding products.

You will see that while this is similar to a regular post, there are special fields that are specific to products. Clicking through the list of tabs will give you access to each setting group.

For our example give it a Regular Price of $34.99 and a Sale Price of $20.99.

Set the duration of the sale, unless it is goes on forever. In that case leave it blank.

The weight and dimensions will be needed to calculate shipping. I’ve got the cart set to Flat Rate shipping, so I don’t need to fill these in right now.

Since this is a tangible item set the Tax Status to Taxable.

When you check the Manage stock? box you will see the additional fields for Stock status, Stock Qty, and Allow Back orders? Set those as you need them.

This is all we need to do for this simple product. We don’t need attributes, but we will for more complex products. We can’t do up-sells and cross-sells because we don’t have any other products entered.

We do need to finish the entry before we publish.

Choose the category

Add tags as needed

Click Set featured image.

Upload from your computer or choose an image from the correct source. Here I’ve chosen to upload From Computer.

Click Use as featured image. It will say Done as a confirmation. Insert it into the post when it’s done.

Click Insert into Post

If the picture has been properly uploaded and set as the Featured Image, you’ll see the image.

Scroll back to the top of the page and Click Publish to publish the post.

I put in two items so you could see results. In the one with the reduced price a “Sale” icon is displayed and the original price and the reduced price.

You’ve completed everything you need to do for adding a simple product. This part of the process is identical for all products, The differences come in Step 5, where you choose the type of product. The following intermediate steps will be different for each type. Rather than repeat all the steps for every setup, I’ll show you how to adjust the intermediate steps for each type of product.

Let’s start with a Downloadable Product.

Go through all the product creation steps, and add a product named OS Downloads, but when you get to Step 5 choose Download from the drop down menu on the Product Type and Visibility panel.

Scroll down to the Product Data Panel.

Price it at $49.00.

Go to the Tax tab.

Some items don’t need to be taxed. In this case choose None from the selector. We don’t need to charge tax on downloadable items so we don’t need to select this box. Be sure you check your state or country laws regarding taxes.

Downloadable products have infinite inventory. Leave it blank or uncheck it if it’s checked.

Click the Attributes Tab

Click Upload a file.

Upload a file suitable for the download. It can be a compressed file, a PDF, an image or anything you want people to pay for before downloading.

If you already know the path to the file, you can type or paste it in the File path: field. You can limit the number of downloads as well. A single customer will only be able to download it X times depending on what you choose.

If you’ve uploaded the file from your computer, you will find it in a Gallery that was created by the shopping cart. This is only a temporary gallery and will disappear after you have finished with the product. It makes it easy to find the pictures you’re currently using. When you’re done, the picture will be added to your Media Library if you need it again you will find it there.

Go to the Gallery tab

Click Insert into URL field

If you go to the gallery and choose the item you can find the complete Link URL if you need to copy it or manually enter it.

Go to the Cross-sells tab

Search for a product by starting to type the name or a tag

Click the arrow to add it to the right-side panel

A cross-sell opportunity is a product that is somehow related to the product you’re entering and the customer might buy it as well. In this case, we’re offering a Joomla Module, so the same person might be interested in the Joomla book. An Up-sell is similar and is added in the same way. It is used to entice the customer to buy a more expensive model or version of the original product.

Now you can finish the entry as you did for the Simple product and publish it.

The product page you just created will look similar to this.

When the customer proceeds to checkout they’ll go to the shopping cart page, showing what they are buying, plus the suggested cross-sell item.

Since we set the Tax Status to “None” you don’t see any taxes added to the total. There won’t be any shipping costs added, and the download link will be available after payment is received, so you won’t see it here.

Create a product called Hosting Plans.

Choose Variable from the Product Type drop down. The other parameter choices will change to match your choice.

After setting Tax Status and Inventory, go to the Attributes tab and add some information that is common to all the variations of the product.
Click the add button and add pairs. The Attribute Name and the Values will appear on the website. These attributes are for informational purposes only. There is an additional step for createing the variable attributes.

When a customer visits this product they will see a new tab on the product page for Additional Information, and the list will be visible. You can add lots of attributes. Attributes are included in searches, so someone searching for “linux hosting” for example will be able to find this product in the search results.

Go to:

Dashboard > WooCommerce > Products > Attributes.

Add a new attribute called hostingplans and Label it Hosting Plans.

Choose Select from the drop down.

Click Add Attribute.

Click Configure terms on the right side of the page after you have created the attribute.

The process is similar to adding the attribute, but these are like “sub-attributes” to the attribute. So you have an attribute called Hosting Plans, with three variations, an Ecommerce, Business and Family Plan. Add each option until your page looks like the one in the image above.

Go back to your product entry page and the Product Data Panel and click on the Attributes tab again.

Choose Hosting Plans from the drop down

Click the Add button

Fill in the check boxes

In the Values box, type “Ecommercer Plan | Business | Plan | Family Plan”. Separate each term with a “|” pipe. Usually above the enter key on the keyboard. Press SHIFT + “\” (backslash) to get the pipe character. When you type it in it will have pipes, after saving it will show commas between the entries.

Go to the Product Type Options panel on the product entry page. Choose the variation you want to activate first.

Click Add Variation to add more options.

Choose the Variation in the drop down for each product.

Give each Variation a different price

An option box is now part of your product entry. The picture and price will change with each selection.
An additional attribute is added to your Additional Information tab that lists the variations.

Go through all the steps, but choose Grouped from the product type.
Set your Inventory Attributes, Up-sells and Cross-sells. (Up-sells are set up the same as Cross-sells. We skipped detailed instructions since they are the same.)

Add your text and images and publish the group. You don’t need a price, because the price will be calculated as the customer makes selections from the group.

That’s all you need to do. As you create new products you will see additonal choices in the Grouping field. Choose the group you want the product to belong to. This won’t affect it’s category or anything else. You can also add already existing products to the group.

You can quickly add existing products by going to the product list and clicking on “Quick Edit” as you do for any post. Change the Parent in the drop down menu labeled Parent.

Mark all new and existing products that you want to be presented on a single page into the same parent group. Here’s what your product detail page will look like after you have added several products.

Your customer will be able to add several items to the package at one time by choosing the quantity of each and adding them to the cart. Since the lowest price item in the package is free, it shows the prices as being “From $0.00”.

This is the cart after I’ve added one selection of each product from the bundle.

Samples of the thumbnails for the catalog page. If you…

Enter no photo

Enter a photo that doesn’t have square proportions and is smaller than the thumbnail size

Enter a really large photo that doesn’t have square proportions

Marked down Items have a green circle that says Sale

Website Package shows the lowest price item in the package. Since I included the Free Extras, it shows as 0.00 in the list. But they will see all the choices when they visit the page.

I didn’t adjust any of the defaults. You can play with the defaults and also get other templates that have much different settings so you can get the result you want.