eCommerce Site using WooCommerce and WordPress

This post will cover how to make an eCommerce site using WooCommerce and WordPress.  WooCommerce is a comprehensive open source eCommerce platform for WordPress.  The plugin has many features which aren’t covered here; this is just that bare bones setup to take you from installing WooCommerce to having a product for sale and PayPal as a payment gateway.

Here is the best order I’ve found to attack this:

  • Install a WooCommerce-compatible theme
  • Install the WooCommerce plugin
  • Configure the WooCommerce plugin
  • Add Products

Let’s get started!

Installing a WooCommerce Compatible Theme

  1. Go to your WordPress Dashboard, then click on “Appearance” on the left sidebar.
  2. Then click on the “Add New” buttonadd new wordpress theme
  3. On the “Add Themes” page, type the search term “woocommerce” in the search box.  This will (hopefully) only return only the themes that are WooCommerce-ready, meaning that they are developed in a special way so that your WooCommerce product pages will look fantastic.
  4. Note:  If you install a non-WooCommerce-ready theme, you’re likely to see this indication when you’re on your Dashboard

    "Your theme does not declare WooCommerce support"
    You’ll probably see this message if you use WooCommerce with a WordPress theme does not not “declare support” for it.
  5. Click “Install” on the theme you’d like to use, then click “Activate” on the next page to activate the theme.
  6. Warning: Activating a new WordPress theme may cause loss of some content from your current theme.  Particularly vulnerable are widgets and any theme-specific settings, such as those set from a theme-specific options page.  Talk to someone knowledgeable about WordPress if you have a lot at stake here…it is very frustrating to lose data!
  7. Now that you have a WooCommerce theme installed, you’re ready to install the WooCommerce plugin.

Installing WooCommerce Plugin

  1. Go to your WordPress Dashboard, then click on “Plugins” on the left sidebar.
  2. Type the search term “woocommerce” in the search box and press enter on your keyboard
  3. You should see the below result.  Click on “Install Now”
    Install WooCommerce by clicking the "install" button
    Installing WooCommerce is soo easy from the WordPress Dashboard

     

  4. If prompted, click “OK” to verify that you’d like to install WooCommerce
  5. Next you should see a plugin install screen like the one below.  If the screen says “Successfully installed…”, you’re in business!  Click on “Activate Plugin” to continue.

    To activate WooCommerce, click on the Activate Plugin button.
    Click on “Activate Plugin” to activate WooCommerce after installation.
  6. After you activate WooCommerce, you’ll need to install pages.  Click on “Install WooCommerce Pages” to do this.

    The Dashboard now contains a "Install WooCommerce Pages" button.
    You’ll need to click the “Install WooCommerce Pages” button for it to install your Cart, Checkout, My Account, and Shop pages.
  7. You should be taken the to “Welcome to WooCommerce…” screen.  Congrats!

Quick Configuration

    1. Click on WooCommerce on the Dashboard, and then click on “Settings” (under WooCommerce)
    2. Under “General Options,” update your “Base Location” and check your “Selling Location(s)” based on your intended customer base
    3. Under “Currency Options,” select the proper currency from the dropdown menu.
    4. Note the “Frontend Styles” area in case you’d like to come back and change them later.  It’s best to see how everything looks and then change them based on that (as opposed to making guesses at this point).

      Shows which settings to check for a quick configuration. They are: Base Location, Selling Locations, Currency, and Frontend Styles
      These areas are important to update or at least take notice of on the “General” tab
    5. Click “Save Changes”
    6. Take a look at Products and Tax tabs, although we won’t covering these in this tutorial.
    7. On the Checkout tab, you should enable “Force secure checkout” note that this requires SSL.
    8. Under the Payment Gateways section, we’re going to set up PayPal and disable all others.  Click on the Settings button for Direct Bank Transfer

      The Settings button for each gateway is located under the "Payment Gateways" section.
      To enable, disable, or configure a payment gateway, click on the Settings button for that gateway.
    9. Uncheck the box that says “Enable Bank Transfer”
    10. Click “Save Changes”
    11. “Your settings have been saved.” at the top of the screen lets you know that it has worked.
    12. Repeat the previous 4 steps to disable “Cheque Payment”
    13. PayPal is my preferred payment gateway for a quick WooCommerce installation on a site, click on its Settings button to begin setting it up.
    14. All you need to do is enter your PayPal account email into the “PayPal Email” box. Wonderful!
    15. Remember to click “Save Changes” at the bottom of the PayPal page in order to save your email.
    16. Make note of the Shipping, Accounts, and Emails tabs. They’re important, but the defaults work very well for our purposes today. If you’re selling physical products that require shipping, contact me if you’re interested in learning how to set up this section.

Now we’re ready to move on to the next step 🙂

Creating a Product to Sell

Now that WooCommerce is installed, let’s make some Products!  In WooCommerce, the things you sell are referred to as Products.  To start creating your first Product, go to the Dashboard and click on Products.

  1. From the Products page, click on the “Add Product” button.
  2. Name your product by filling in the “Product name” field.  Then add a nice long description of it in the big box below.
  3. Fill in the “Regular Price” field under “Product” data at a minimum.
  4. Add a Product Short Description
  5. Add at least a Featured Image…even better is to also add a Product Gallery
  6. Add a Product Category by clicking “Add New Product Category” or selecting an existing category.
  7. Click “Publish”

    Screenshot highlighting which fields should be filled out in a WooCommerce Product page.
    Here are the minimum fields I recommend filling out for your Products.
  8. Click “View Product” to see your masterpiece!
  9. Repeat for other products

Difference Between WordPress.org and WordPress.com

In my local WordPress meet-up, the most common cause of confusion among my group members is the difference between WordPress.org and WordPress.com.

This is a simple question with a somewhat complex answer, so I put together a presentation that covers it, drawing on the history of WordPress, what web hosting really amounts to, and comparing the different features of WordPress.com against some key features of WordPress.org.

What’s the difference between WordPress.org and WordPress.com?

Here is the difference in a nutshell: WordPress.com is a service that hosts WordPress blogs. WordPress.org is a community where people work on the open source WordPress software, which can be downloaded and run on your own web server.  To see more information, you can download the slides for the presentation (pdf).

difference between wordpress.org and wordpress.com
Click to download the pdf of my presentation

Beginner Track at 2014 WordCamp Baltimore

Not sure which talks are best for beginners? Read on…

 

If you’re relatively new to WordPress, I recommend going through these talks tomorrow.

wordcamp - beginner track
My recommended “beginner” talks are highlighted in blue border. Click the image to go the WordCamp site to see the official schedule.

 

Some notes:  Everyone should check out Chris Lema’s Keynote…he’s WordPress-famous and by all accounts a great speaker.  Also, overall, this is a pretty technical WordCamp relative to the few others I’ve been to.  More than the talks themselves, you should be able to benefit from mixing and mingling with other WordPressers in the community.  Looking forward to seeing everyone there.

 

Subscribe to my mailing list

* indicates required