WooCommerce tutorial – This is a basic overview of WooCommerce plugin

WooCommerce tutorial…

There are several e-commerce plugins for WordPress, the ones I’ve seen work in a similar way. This is a basic overview of WooCommerce. I hope you find this WooCommerce tutorial useful.

First install the plugin and activate it.

WooCommerce tutorial activating the WooCommerce plugin

Now you are asked to install the WooCommerce pages. Click the button and the pages will be installed.

Install WooCommerce pages

The pages installed are…

  • General
  • Pages
  • Catalog
  • Inventory
  • Tax
  • Shipping
  • Payment Gateways
  • Emails
  • Integration

To edit any of these pages go to WooCommerce > Settings, then click the Tax tab etc.


 

For the next step in our WooCommerce tutorial…

We’ll add a tax rate to help you understand how the settings work.

On the tax page click Add Tax Rate button, then click the Edit button.

Add - edit taxrate in WooCommerce

Click in the box to select a country or countries, you can select as many as you want.

UK Tax selected in WooCommerce dialogue box

Don’t forget to click Save changes

Click this button to save your changes

Now that we have set a tax rate for the United Kingdom, when a UK resident reaches checkout, VAT will be added to the bill.


 

Next in our WooCommerce tutorial, the shipping tab helps you set up shipping costs.

We’ll set the flat rate shipping options. Choose WooCommerce > Settings > Shipping > Flat rate.

Select flat rate shipping in WooCommerce

Flat rate lets you define a standard rate per item, or per order. But you can also add options like next day delivery or gift wrap. If you click in the Specific Countries box you can choose one or many countries to sell to and if you click in the Shipping Options box you can add the options for express delivery or gift wrap etc.

To add the option of gift wrap type in the Shipping box,

Gift wrap|3.25|yes

Type one option per line, and use as many options as you need.

Flat rate options in WooCommerce

Once again remember to click save changes.

Click this button to save your changes


 

Now we’ll add a payment gateway to our WooCommerce tutorial site. Go to…

WooCommerce > Settings > Payment Gateways > Paypal

WooCommerce Payment gateways PayPal link

You are taken to a page that asks for your Pay Pal email address.

Setup PayPal details

Once again remember to click save changes.

Click this button to save your changes

You can buy add-ons for other payment gateways such as Google Checkout etc from the WooCommerce site.


 

Google analytics and sharing buttons to WooCommerce.

The integration tab lets you input your Google analytics ID and enable sharing buttons to make it easy for your site visitors to tell their friends about your site.

Go to WooCommerce > Settings > Integration

Then just add your info.

Share this and Google analytics

And then save your changes.

Click this button to save your changes


 

Now we can add some products to our WooCommerce shop.

Goto Products > Add Product

Products - Add Product. In WooCommerce

Adding a product is very similar to adding a page or post, so…(See screen shots below)

  1. Click the screen options tab and tick all boxes
  2. Type a title
  3. Add some information about your product in the main text box
  4. Choose Product Type > Simple Product
  5. Fill in the Price, Weight and Dimensions boxes (in the Product Data section)
  6. Type some text in the Excerpt box (this appears at the side of the product image)
  7. Click the Featured Image link and add a photo of your product (don’t add your photo in the main page content area)
  8. Click the big blue Publish or Update button. (Top right corner of your screen.)

Add WooCommerce product screen shot one

Add product screen shot two

Publish the page

The screen shot below shows how the page we have just made looks.  In this screen shot I was using Twenty Eleven theme but I recommend you use one of WooThemes premium or free themes for your shop. They look better and are reasonably priced.

Simple product webpage using WooCommerce

 


 

Adding attributes such as size or colour to your WooCommerce product, here’s how to do it…

In the Product type box chose Variable Product

Variable product type

Then in the Product Data section click the Attributes tab. (See screen shot below.)

  • Click the blue Add button
  • Type a name for your Attribute (colour)
  • Tick both tick boxes
  • Type values for your Attributes, separate them with a pipe character, on a UK key board the pipe character is in the bottom left corner near the shift key, it looks like an up and down line.
  • Don’t forget to click the big blue Update button. You must click update before you add Variations (our next step)

WooCommerce attributes tab

Click publish or update in the top right corner of your screen.

The update button

Next… (Click the screen shot below to see details.)

  • Click the Variations tab and then click the blue add variation button (the box expands to reveal more input boxes).
  • Type the price etc into these boxes.
  • You MUST choose a variation from the drop¬† down list (Red Green Blue etc.) or variations won’t work properly.
  • Keep clicking the blue Add Variation button and adding variations until you have set up variations for all of the variations you added under the Attributes tab (Red Green Blue etc.)

My dialogue box keeps disappearing! Choose your option from the drop down box after setting the price, weight, shipping class etc. Otherwise the dialog box keeps closing and you may wonder where it’s gone.

WooCommerce product variations

The update button

And don’t forget to click the update button!

Now people who use your shopping cart can choose a variation such as colour or size and the price will change accordingly.

Variable product choice screen shot

Wow! that was a long page but it gave you a good start in using WooCommerce plugin. If you’re interested in learning more, go to their website and download the plugin and a free theme. To download a free theme you have to sign up for a free account and this allows you to access WooCommerce tutorials and help pages.

This is a great way to learn more…