A Crash Course in Creating E-Commerce Websites with WordPress

WordPress is an awesome publishing platform which is utilized everywhere these days. You will find WordPress development from Harvard Gazette to Andy Roddick’s official website. In this 1st article of 1st E-Commerce week, we will learn how to create a website which has online store’s functionalities in it. In simple words we will create a fully functional electronic store. We will also talk about building e-commerce themes from a developer’s point of view.

Cheap SSL CertificatesE-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Check their site to get the cheap SSL certificates.

Who should read this tutorial?

If you have not ever created an e-commerce website before, then this crash course is best-suited for you. I am considering that you are totally an idiot when it comes to e-commerce websites. At the end we will also talk about how a developer can integrate e-commerce features in his WordPress theme. So I will say this tutorial will take you from beginner level and at the end you can continue with creating e-commerce websites with WordPress as a developer.

What we will learn in this tutorial?

We will create a demo store using WP e-Commerce and WordPress. At the end there will be a discussion about how to develop e-commerce ready WordPress themes.

Our Main tool:  WP e-Commerce?

There are a lot of free and premium e-commerce plugins available to enhance WordPress for e-commerce functionality but we are going to use WP e-Commerce. The reasons why we have picked it out are pretty simple.

Why Use WP e-Commerce?

  • Free and open source (You are free to modify its code and to share it with others).
  • The Oldest one: Yes, WP e-Commerce is the first ever plugin created to deal with e-commerce in WordPress. So it has a lot of nice features which shows its maturity like many shipping solutions and so on.
  • Free support forums and most importantly a very friendly support team.
  • It offers template tags to integrate it in your WordPress theme and hence easy to design themes which have e-commerce functionalities in them.
  • Premium Modules: If you don’t know how to code or have less time for finalizing a client project, you can always buy some premium modules of WP e-Commerce from their store to extend and enhance some features of your e-store.

Pro Tip: Setting up the development environment

It is always the best practice to set up WordPress on localhost as it fastens the process of development. After setting it up, you have no need to use any ftp program to upload files to servers. In short, hassle free development and it increases  productivity a lot. So this is highly recommended for you. If you are on windows or Linux you can use xampp. For mac lovers, I will suggest to use mamp. Follow these short and easy tutorials on how to setup local host on your own computer.

Resources:

  1. Installing WordPress Locally on Your Mac With MAMP

Moreover I am using jQ, an awesome free theme for WordPress. How ever this tutorial should work fine with all bugs free themes.

Let’s do some real action. Fasten your seat belts as we are ready to start our development.

Installing the plugin

You can install WP e-Commerce from official plugins repository or from its official website. After activation, you will find a tab named Products below the comments tab. We will start from settings and then we will create some products to finally set up our demo store.

Settings WP e-Commerce>General

The first sub-tab under the settings tab is of general options. You can set your location, target markets and currency in which you will sell products. You can also set additional tax which will be applied on the top of your product price. For example in Pakistan, each business has to pay 15% of the total sales as general sales tax.

Settings WP e-Commerce>Presentation

The presentation tab is all about how you want to show your store. Instinct, the company behind WP e-Commerce also offers a gold cart with more options. You can say that it’s a premium version with more features so if you see some options disabled in settings, don’t worry. There is nothing wrong with your server permissions or installation method. You can only enable them after buying Gold Cart.

Most of the options in this tab are pretty self explanatory.  You can choose button types and choosing whether to show breadcrumbs, product ratings or not. Show Postage and Packaging means that you want to show the shipping charges on your product pages or not.

Product page settings allow you to customize the layout of product pages. You can select different layouts (only for gold cart) and different themes to show products. WP e-Commerce comes with three built-in themes. 3rd option is what group of products you want to show on product pages. The concept of product groups is a bit complex and we will take a look on it later. For now, just take them as categories which help you in categorizing products in different ways as well as helping your customers in finding products easily and quickly.

Shopping cart settings allows you to choose where you want to show cart. You can select different options ranging from widgets to manual insertion of template tag. Sliding cart enables your customers to maximize and minimize the shopping cart using +/- buttons and the last option has been explained already.

Before going to next section of settings, it will be good if you learn what product groups are.

What are product groups?

You can take them as categories and tags built in with WordPress. Actually WP e-Commerce uses pages for all its needs and WordPress don’t allow you to categorize pages. That’s why the plugin comes with product groups. For example if you are creating a theme store (download goodies shop) you can make product groups of WordPress, tumblr, Drupal and Joomla while you can also categorize all the themes with respect of colors or some specific features. Hopefully you got the point. Just think that you can group product of same features with help of these product groups. I will try to make this concept clearer when we will create our product groups.

Let’s get back to Settings of our E-Store

While creating a product group you can give description and thumbnail of that group. In Product Group settings you can choose which parameters to show on product pages.

Thumbnails are pretty self explanatory. You can also choose pagination. If enabled, it will divide your products into different pages just like WordPress pagination. You can also choose whether to use IntenseDebate or not.

Settings WP e-Commerce>Admin

Here you can setup your digital goodies store. You can set how much time a user can download a specific file. You can also lock downloads to that specific ip from which orders has been placed. You can also set default email addresses for sending different notifications to customer and for your own record.

You can also write custom messages here which will be sent out to your customers on different events and also to the admin of e-store. At the end of this setting page you can give link to different pages. You will have to set page links after changing permalink structure.

Settings WP e-Commerce>Shipping

You can setup all the shipping options here. You can choose different shipping schemes like flat rate and weight rate. The plugin will automatically calculate the shipping charges and will add these charges on top of your product price. WP e-Commerce has built in support for ShipWire which is an order fulfillment company for online vendors. You can create some kind of conditions/layers. For example you can set rate if product’s weight is greater than 4 pounds. Remember you don’t need these options if you are going to set up a digital products store.

Settings WP e-Commerce>Payments Options

The most important part of an e-commerce store is payment gateways. WP e-commerce comes bundled with 2 Payment Gateways, paypal and google checkout. You can also select Manual Payment/Test Gateway if you want to receive payments using money orders or online transactions to your bank account.

Using import tab you can import data of your previously made products from a csv file.

Settings WP e-Commerce>Checkout

This is last step in setting up WP e-Commerce is setting up the checkout form. You can implement the restriction of registration before checking out. Remember that it will only work if you will check “Any one can register” box in WordPress general website settings.

So we are done with our settings. Let’s create some product groups and products so that we can have a functional e-store.

Creating Product Groups and Categories

We are going to create a t-shirt store from where people can buy t-shirts. So we are getting into t-shirt business.:) Just think how you can group t-shirts? You can group them by size, by brand, by color and also by sex. Then we can have sub groups under these parameters to organize things more professionally. I have come up with following groups to set up demo store.

T-Shirts

  • Color
    • Black
    • Blue
  • Brand
    • Nike
    • Adidas

Let’s start adding them. Go to Products>Categories. First of all add a new group there and after that you can create categories in it. This is as simple as creating categories for WordPress. Take products as categories and “categories” as sub-categories.

After this step you will be able to select t-shirts from drop down menu. Select then edit it and add sub-categories to it.

The concept of adding categories can confuse you a bit. Best way to understand it to play with it as long as you become a master. Don’t forget to delete two dummy categories “brands” and “categories”. This is what I have after adding all the categories.

So we are done with categories. Let’s move towards products.

Creating your first Product with WordPress and WP e-Commerce

Go to Products>Products. You can add new products here. You will see a WYSIWYG editor just like WordPress post editor where you can fill all the details. Some things which are important to define are given below

SKU: is abbreviation of Stock Keeping Unit. It’s a general term used in our everyday life. In store it is an identifier of specific product just like each post in WordPress has unique id. I am showing you process of adding one t-shirt. You can add others products with some method.

You can also choose inventory to keep track of your store. Moreover you will have to upload product image here. After adding two products, this is how my product dashboard looks like.

After finalizing products, its time to add widgets to your WordPress theme. Go to Appearance> Widgets. Add shopping cart widget and product groups widget to sidebar. It will give an awesome look to your e-store.

You can now see how our store looks like.

Single Product Page

You can also use products page as home page by going to WordPress reading settings if you don’t want a blog at all. Another tip is to utilize wp-hide-post for hiding some pages so that no one can access shopping cart page and order pages directly.

Short Codes:

You can use short codes for showing specific products and product groups inside posts and pages. You can get a short code by editing the category. Just see the following screenshot for better understanding.  Same is the case for products.

Integrating WP e-Commerce in your WordPress theme

Another great feature of WP e-Commerce is its template tags which make the job of integrating e-Commerce functionalities in a WordPress theme very easier.

You can use following template tags to include different functionalities in your WordPress theme.

<?php echo nzshpcrt_shopping_basket(); ?>// Show Shopping Carts
<?php nzshpcrt_latest_product(); ?>// Show Display Latest Products
<?php show_cats_brands(); ?>// Show all Categories
<?php echo wpsc_buy_now_button(1); ?>//Show Buy Now Button
<?php echo wpsc_add_to_cart_button(1); ?>// Display Add to Cart Button

Extending WP e-Commerce

Because of its reputation, there are lots of premium and community plugins available to extend the functionality of WordPress. You can take a look on this page for the plugins and themes available to extend WP e-Commerce.

I am sure that you enjoyed this crash course in building e-commerce websites with WordPress. Feel free to leave your questions and thoughts about the article.

Cheap SSL CertificatesE-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Besides standard SSL certificates, wildcard and EV certificates are offered with discounts too. Check their site to get the cheap SSL certificates.

Saad Bassi

Saad Bassi is a 20 years old web developer from Pakistan who loves to create beautiful websites with great user experience. He is co-editor at CrispyTech and 1stWebDesigner and blogs about the next Windows at Windows8Geek. He also loves to make new friends so don't forget to say him a hello on Twitter. Last but not least, make sure that you check out my latest project, Addictive Fonts which focuses on free high quality font downloads.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. David says

    thanks for the post. I’ve just been integrating wp ecommerce with several free themes that I’ve been hunting down so will post about it shortly.

  2. Chris says

    I already have a WordPress blog. I assume however that I must create a new WordPress installation.
    That is install from my host or upload new files.

    Any help on this would be great!!!!!!!!!!!!

  3. griffon says

    I can’t seem to find anywhere how to make the price change based on information entered on the checkout forms. They are unfortunately rolled into an inaccessible loop, so the values can’t be checked or corroborated. I have only one product, but the price changes if they click something on the checkout page.

    Furthermore, I can’t seem to get these ‘unique names’ to be manipulated. They don’t show up on the customer receipt, and don’t appear even to be wp variables.

    This would seem like basic stuff. But, apparently not possible. At least no one has reported achieving this in any forums etc.

  4. says

    hi sir..
    Am using WP e-Commerce plugin and ECOBIZ 1.5 theme for this site.
    All working fine but checkout form is already pre filled. And form fields are not aligned.
    How to fix this..
    kindly please send me reply sir.

    Thank you
    Paddu

  5. Mike says

    How can an e-commerce site offer monthly scheduled shipments of products? For example, if a customer wants 1 box of energy bars automatically delivered each month, is there a way to set that up?

  6. Stan says

    Thank you for sharing this great info. I have installed WP e-commerce and I can’t seem to find a way on how to include my “store” in my general menu bar with all its pages or subpages. Thanks again.

  7. Ronak Thakkar says

    Hi is there any way i can print this article i am not able to find the print button out here and one of the images i guess i corrupted or is not loadin properly if you could just help with this.
    Thanks a lot nice article

  8. Tushar Shetty says

    Loved the Tutorial, bang on, got what I wanted but just one more thing, I don’t have to install any other plugin for Credit Card, Debit Card Transfers and one more thing, I couldn’t find in the tutorial if there is a dropdown list for Tshirt Sizes for eg, S, M, L, XL, because I will be needing it to start my tee design online store. Thanks.

  9. Reema says

    Hello,

    Just want to say you’ve done a great job! It’s a very good tutorial :) thank you so much!

  10. Ryan J says

    I am building a t-shirt store and wondering how you can add a drop down menu or variation to select the size t-shirt you want rather than posting a different product for each size though it is the same t-shirt? Thank you

    • Stuart says

      Ryan, you just set the variations.
      First create the product then go in and create a variation for size and another one for colour and you will have the drop downs within the product. It’s best to set the price first as modifying it later can be a slow and painful process, especially if you have a lot of different sizes.

  11. Ethan says

    which settings for the permalinks are required to set the url of the pages…
    please reply urgently
    w8ing..??

  12. Chris says

    I can’t get the digital downloads to work. Is there anywhere online that shows how to set these up?

  13. sam says

    This was a great article – Thanks!

    Could you go into more details about settling up a Custom Payment Gateway. The one I need to connect it to isn’t supported in the list of payment gateways.

    cheers!
    Sam

  14. Martin says

    I must say this is a great tutorial, my question is it possible to have this plugin for Donate only for Non-for profit Organization? without physical products.

  15. Stan says

    You need a crash course in conversational manners. To say “I am considering that you are totally an idiot…” is talking down, condescending and downright rude. Correct your sales pitch…please. (Reference: Your opening paragraph, titled ‘Who should read this tutorial’.)

  16. BSLugnut says

    While I thought I understood the “Groups” and “Categories” section, it does not behave like I thought.

    I was hopeful that I could create different Groups (brands, type of use, etc.) for easier sorting by the customer. All it did for me was add every category to the product page adding additional clutter.

    Did I do something incorrectly?

  17. says

    I followed all the steps and I was able to create my own store.
    However, it doesn’t look professional. I will have to hire someone to change the design for me.
    What is the best place to outsource web designers?

  18. Saad Bassi says

    This will cost you 1000$. Send me an email at saad at 1stwebdesigner.com if you are interested.

  19. Tracy says

    Hi

    Great tutorial…but i am going wrong somewhere. The actual ecommerce software makes sense and appears quite easy to use. What i am having problems is… the installation. Successfully installed XAMPP and also w ecommerce plugin. Do i have to download wordpress as well? I dont know how to get to the first screen where you mention “adding a product” – although downloads have been successful i dont seem to be able to open the software. I’m sure its something very simple but i think ive missed out a step. Please can you help as i dont seem to be able to open wordpress or ecommerce.

    many thanks
    Tracy

    • Saad Bassi says

      Yes, you need to download wordpress. I will suggest you not to do this yourself. Better hire a professional because you are a noob

  20. Alice says

    I have a friend who is using a wordpress ecommerce store, she is selling digital products and has some free stuff. When someone tries to get the freebies the order cancels itself. I have been looking in the settings and I can’t work out what the problems is.

  21. bobbi says

    I amconsidering WP E commerce..this is an excellent tutorial. What I would need to accomplish is having the product groups/subgroups further categorized in multiple ‘shop by’ categories, for example ‘shop by color’ then all teh blue t-shirts would show…can this be accomplished in WP E commerce? Thank you!

  22. Duane says

    I just came across your post (awesome!) …I have seen the icondock.com site before and they are using this in a very nifty way, reading your post answered most of the questions in my mind about it, save one… I was wondering – is there some way to check the availability of an inventory item based on the state a person is requesting shipment from or zip code out of the box? I appreciate you sharing this and I welcome your ideas on resolving my query. Thanks.

  23. Abhijit V. Chaore says

    Hi Saad, Thanks for this useful information. WP has really made life easier for the eCommerce guys. Thanks again. You have done a great job. Keep it up.

  24. Jack says

    Hey Saad,
    Just wanted to say great job on this guide. I have been looking for an easy solution to building an e-commerce site. I will be doing a workshop on teaching students how to build E-commerce store so you definitely saved me. Also, followed you as well.

  25. says

    I haven’t used WP yet when creating some websites so lets say I have 0 knowledge on it, but I have used several Applications on web developing like dreamweaver, joomla and drupal. I’m quite interested in creating a WP site so I say thanks this post gave me a lot of information.

    Thanks

  26. says

    Cheers for the tutorial Saad,

    I have purchased WP E-Commerce gold cart and installed and set it up with Google Checkout.
    My only issue is when people add a product to their cart and procede to checkout they are given an extra step where they are asked for their name and contact details. Do you know if they can miss this step out as they have to provide this information when they are moved onto google checkout anyway.
    Hope you can shed some light on this one, i’m sure it must be an easy fix :)

    Dave

    • says

      Hey,
      I haven’t used the WP-ECommerce Gold Cart but I guess I can guide you to the right direction. I guess it has something to do with the code. Follow the steps below:
      1) First of all make a backup of all your files as If you screw up it would be difficult to get everything back.
      2) Open the Plugin files and find the file which consists of the Checkout function. Here you’ll find a link to the file the visitor is redirected after clicking Checkout.
      3) Open that file and carefully delete the form which asks for info. I don’t know what buttons show up on that form. Are they “Submit” or “Proceed to Google Checkout”?
      4) If its Google Checkout then leave this button and delete everything else and if its the “Submit” button check where its processing the form and after that what its doing (probably redirecting the visitor to Google Checkout). Just copy the code for proceeding to Google Checkout with the SUBMIT button processing.

      I think that’s it! It may be looking like a long process but if you understood it correctly and know some PHP then I think you can surely do it.
      Thanks..

  27. Syaiful says

    Great tutorial ! Question : how to add parameter to product ? Example books have parameters like publisher, page, dimension etc. Thanks

    • Saad Bassi says

      You can use custom taxonomies for this purpose.:) Or may be you can use Meta Info

  28. Dan Milward says

    Hello. What a great tutorial!

    Thanks for choosing to write about WP e-Commerce Plugin. I think WP e-Commerce Plugin from GetShopped.org is most definitely the right choice. Sure it doesn’t offer every possible shipping option for every type of scenario you can possibly imagine but it works for 90% of the hundreds of thousands of users who want a fairly standard industry solution.

    Please email me. I’d like talk to you about writing more tutorials around the gold modules that we sell.

    Best,
    Dan

  29. says

    Now we try to add more theme with wp-ecommerce
    because there is only few theme can available with wp-ecommerce
    if you guys… wanna download, please check this link we have 3 free wp-theme for wp-ecommerce. enjoy it :)

  30. Dodie says

    I love this post. My friend just asked me to help him make a site for his father to sell some stuff, and the first thing that came to my mind was you guys having e-commerce week, and so I went straight to this post. Thanks for the infos!

  31. says

    Looks simple and is fairly easy to set up – I’ve done it. However, am currently searching for another cart and will be switching as soon as possible. If you have a product you ship of different weights, this cart will NOT give you the options you need to NOT lose money on shipping.

    The shipping modules tie into USPS and UPS somewhat well – USPS not so much as it keeps giving the $4.95 priority option for everything even tho our weights are above the limit and our products don’t fit in that tiny little box (so we had to disable USPS completely). And the Calculate Shipping option is not required to fill anything in. Since we have to collect and pay Sales Tax into our state, we have the tax set for just those buyers in Colorado. The Calculate shipping takes that as the default state and postal code (which is fine) but we never ship to anyone in our city. And since this is the cheapest shipping possible (as you can imagine), users don’t update their state and zip or if they do, don’t hit Calculate and thus the shipping never updates and the sale completes. AND WE LOSE MONEY EVERY TIME.

    The shipping option does not fill in from the billing/shipping address postal code and Same As Shipping checkbox also not required so we get many orders coming in with all that blank and no way to really know for sure if they want shipping to the same address.

    The developers may be friendly – when they answer. But they haven’t even responded to the several I’ve written on this issue and friendly only counts when they address a problem.

    There are definitely good things about the cart but overall I’m highly dissatisfied and will be dropping it ASAP – a business can’t run on something that causes it to lose money. I’m sure it’s fine for some things but if you have an actual product to ship and need to calculate shipping – BE VERY CAUTIOUS and I’d recommend looking at other options before trying this one. There are other little issues too – like no way to run a report for the in-state sales so I have to pull them all open manually and add them by hand to submit our Dept Of Revenue form and payments – not fun at all.

  32. Tatuaze says

    I’ts looks really good and very easy to use.
    I will try it!
    Adn yes WP rocks and version 3.0 is comming ! :)

  33. Jal says

    Great write up. I was knowing nothing about e-commerce before reading this article. Now I can even pass a test on wp-ecommerce. :) I have some queries in my mind but they are too trifle. I am sure the more I’ll use it , the more I’ll get familiarized with it.

    Thanks again.

  34. Adam says

    This is exactly what my users need, a simple solution!

    Just another step towards WordPress take over haha

  35. Logobird Designs says

    Using WP is a great way to get an eCommerce store up and running fast with minimal cost. Have used for a few of my clients whom wanted just a basic online store and works really well.
    Good intro Saad!

  36. brian says

    nice job with the tutorial/intor Saad.
    I used to build some sites with wp-ecomm but made a change 6-8 months ago with shopplugin.net.

    it’s not totally free (55$) for a license but with all the wp-ecomm add-ons you need to make it look/work nice it amounts to the same.

    I guess it’s a matter of choice and all but I just feel more comfortable using shopp. Cheers!

    Brian

    • Saad Bassi says

      Well Brian, I have not heard so much praise about shopp. I searched a lot before selecting my choice. Some fellow developers have not good experience with it. I will think of contacting people at shopp.:)

  37. says

    I need a web designer to create a unique design to be used with wp ecommerce. Email me if you are interested. thiagoisremarkable at gmail.

  38. says

    Good to start this Crash Course, I have use wp-ecommerce plugin in my WordPress Projects and It is awesome plugin.

    It can used for e-commerce projects as a CMS.
    here is a Sample project where I have used wp-ecommerce

  39. TheRECoach says

    great article, now can you do one on creating an amazing IDX and CRM for WP for Real Estate?

  40. VARLabs says

    I’m using WordPress for my in-progress e-commerce site too!
    I’m not using that specific e-commerce plugin, but I chose WordPress because of all the reasons you listed above!

  41. Andy Sowards says

    Great tips, I am glad to see that wordpress is becoming a great alternative to the old methods of e-commerce

    Keep it up!

  42. says

    Wow, thanks for the article. I didn’t even realize that WordPress could do e-commerce, it never occurred to me. And I’ve been building WP sites for a long time. Well, you learn something new everyday. :)

    • Saad Bassi says

      Yeah. We are always in learning process. Thanks for your valued feedback.:)