Woocommerce is a handy WordPress plugin that allows you to add a shopping cart capability to your WordPress site or blog. While it does not have as many features as Shopify or Big Cartel (which are actual e-commerce website hosts), it can be a quick and fairly simple way to sell a few simple items on your site. Feel free to watch my video or scroll down for step by step instructions.
To manage your Woocommerce plugin, you will need to know how to add new products to your site. This is a short tutorial that walks you through adding a new product:
Probably the easiest way to add a new product if you have existing products is to simply go to Products > All Products, hover your mouse over the product name and click the Duplicate button. This will duplicate your product, and then all you have to do is update the product name, information, price and image.
Set your product category. This is the category of your product (eg. Housewares, Clothing, Books). You can also add product tags to further specify your products. For example, you could have a category of Clothing and tag your product with Shoes, if it is a pair of shoes. You should also upload the Product Image. This is the image of the product that will be shown to the customer.
Scroll down to the Product Data section and choose Simple Product. Under the General tab (on the left) you can set the price, and you can also set a sale price if you wish. You can choose the tax status of your product if you are using taxes.
Now select the Inventory tab on the left. Here you can assign a SKU number to your product. Click the Manage Stock box to manage the stock of your product. Here you can enter the quantity of products that you have available to sell, enable backorders (this will allow you to keep selling even if your stock quantity drops below 0) and finally be sure to set the status of your product to In Stock.
Click on the Shipping tab. Here you should enter the weight and dimensions of the PACKAGE that your product will be shipped in. Woocommerce has now added a plugin: Woocommerce Services which allows you to offer live USPS shipping rates. Your customer can choose their shipping option at checkout
If you have multiple images of your product (eg. different angles or zoom) you can go to the Product Gallery box and upload additional images. These images will appear below your main product image on the product page.
And that’s it! You can now publish your product, and it will appear as a single page and also on your Products page.
But what if you product has variations like different sizes or colors? There is an additional step to add attributes and variations. Scroll back up to Step 4, and instead of Simple Product, select Variable Product:
On the Attributes tab, click the Add button next to Custom Product Attribute. Add the name of your attribute, eg. Color. In the Values box, type the name of each attribute separated by the pipe ( | ) character. For example, I am selling a clock available in black, white and natural. So I will type black | white | natural in this box. If you cannot find the pipe character on your keyboard, feel free to select this text: black | white | natural and paste it into the box on your own site. You can change the attributes as needed. Be sure to click the Visible on Product Page and Used for Variations boxes and click Save attributes.
Now go to the Variations tab. Next to Add Variation, click Go. Then click the arrow to expand your variation. In the expanded area, set the price, the stock status (set to In Stock) and the weight and dimensions of the product. Click the blue Save Changes button at the bottom and you are done. You can now publish your product and it will show the color choices (or whatever attribute you have selected) on the product page.
Here is a screenshot of the end result! Keep in mind that your blog styling may be different so the product will not be exact, but you should see your product photo and description, pricing and cart button on the product page and you can start selling! Note: if you want your product to appear as a full page as shown in the screenshot, in your page editor just go to the Layout Settings tab and select full page width. This will display your product without the sidebar.