We've already covered WP e-Commerce on this blog, but the current leader in WordPress shopping carts has a new rival ... WooThemes recently launched WooCommerce.
WooCommerce is off to a quick start because it is a fork of the existing JigoShop product and even uses some of the same core developers.
This tutorial will introduce you to WooCommerce and get you started with your first WordPress store. We'll demonstrate simple products, downloadable products, virtual products, grouped products and variable product types. You can use these examples as guidelines to building your own cart selling anything you want.
The first thing you have to do is a little planning before you add the products.
Step 1. Plan your cart
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 these categories
- Hosting Plans
- Website Packages
Our store will have all of the basic product types:
- Simple products - A standard, regular product which is tangible and can be shipped.
- Downloadable products - A digital product the user can download. Nothing is shipped.
- Virtual products - Nothing is shipped and nothing is downloaded – this could be a service or a booking.
- Grouped products - Not sellable itself, a grouped product is a collection of related products, for example a dinner set containing multiple simple products.
- 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 2. Search for WooCommerce and install the package
On the Dashboard go to Plugins > Add New > Search Plugins for woocommerce.
Click Install Now and follow the prompts to activate the plugin
Installation automatically adds pages and menu items specific to the ecommerce package. This image above hows what the menu looks like in the 2011 theme.
You can edit these pages like any other page as in the image below:
These pages can be edited just like any other page. Go to All Pages and select the one you want to edit from the list.
WooCommerce creates the page and automatically inserts the proper shortcode. You can build these pages manually as well. You can get a full list of shortcodes from the WooCommerce documentation.
Step 3. Configure the basic parameters for the cart
Once it's installed you'll see a new Dashboard section for WooCommerce, click Settings and read and check all configuration options.
Go through each tab and look at all the options and change them as needed.
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.
Configure the Tax and Shipping for this example
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.
Enable Flat Rate Shipping
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.
Step 4. Start adding categories
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.
Add all of our sample categories by repeating the step.
- Hosting Plans
- Website Packages
Step 5. Add a Simple Product (or a Virtual Product)
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.
Step 6. Configure the Product Data
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.
Step 7. Set the price on the General tab
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.
Step 8. Set the tax status
Since this is a tangible item set the Tax Status to Taxable.
Step 9. Set the Inventory parameters
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.
Step 10. Complete the entry
- 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.
Set the image as a Featured Image
- 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
You will see this in the editing page.
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.
Step 11. Add 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.
Step 12. Give it a price on the General tab
Scroll down to the Product Data Panel.
Price it at $49.00.
Go to the Tax tab.
Step 13. Set the tax status
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.
Step 14. DO NOT check the Manage stock? checkbox
Downloadable products have infinite inventory. Leave it blank or uncheck it if it's checked.
Step 15. Set the attribute - download link
- 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.
Step 15. Create a Cross-sell opportunity
- 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
The product page you just created will look similar to this.
The Cart page
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.
Step 16. Create a Variable Product
Create a product called Hosting Plans.
Choose Variable from the Product Type drop down. The other parameter choices will change to match your choice.
Step 17. Create Some Attributes
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.
They will look like this on the site.
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.
Step 18. Add the Variable Attributes.
- Dashboard > WooCommerce > Products > Attributes.
- Add a new attribute called hostingplans and Label it Hosting Plans.
- Choose Select from the drop down.
- Click Add Attribute.
Step 19. Add the variations
Click Configure terms on the right side of the page after you have created the attribute.
Step 20. Create a list of variations.
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.
Step 21. Add the variations to the product
- 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.
Step 22. Add the prices to the variations
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
Your product page after adding the variations.
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.
Step 23. Create a Grouped Product
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.
Creating a new product and adding it to the Grouped Product
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.
Adding an existing product to the Grouped Product
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.
The finished Shop page.
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.