How to Build an E-Commerce Website Using WordPress: Part 1

How to Build an E-Commerce Website Using WordPress: Part 1

on Dec 24th 2011 with 35 comments
Tutorial Details
  • Program: WordPress
  • Version : 3.0 or higher
  • Difficulty: Easy
  • Estimated Completion Time: 30 minutes to 1 hour

Today we will be creating a simple but powerful e-commerce site using one of the most popular WordPress plugins called WP e-Commerce. Using this plugin we will be creating a website which sells holiday gifts!

Knowing WP e-Commerce Plugin

WP e-Commerce is a powerful shopping cart plugin for WordPress developed by GetShopped.org. Using this plugin in WordPress lets users buy your products and services online. Given below are some of the features of this amazing plugin.

  • Easy to install.
  • Works with any WordPress theme.
  • Supports all kind of WordPress Widgets.
  • Template modification is very easy.
  • Instant support community.
  • All the popular payment gateways supported.
  • 100% Search Engine friendly.
  • Can be used to promote products on social networking sites.
  • Supports multiple languages.
  • Can be integrated with Google.
  • Supports multiple currencies.
  • Multi shipping options.
  • SSL security integration and many more.

You can start selling your products, downloads and services right away.

There are also additional features for premium customers. You can go through all of these features by clicking here.

Prerequisites of installing WP e-Commerce

Before installing and activating the plugin lets discuss some core pre requirements.

1. WordPress development environment must be ready in your system.You can either host your site locally or using a web hosting service. You can also use BitNami for WordPress, which is a great combined tool for WordPress development and testing.

2. Please log in to your WordPress admin and go to Post -> All Posts and remove (trash) the default post from the list.

3. Please go to Posts -> Categories and create categories relevant to your products. Here we will create Bakery Items, Confectionaries and Flowers. While creating the categories you just need to provide the name and a short description.We have changed the Uncategorized category to Bakery Items.

4. Please go to Pages -> All Pages and remove (trash) the default page from there.

5. You can customize and keep the current theme or go to Appearance -> Themes to install a new one that suits your e-commerce site. You can also use third party themes for your e-commerce site.

6. On the Appearance menu click on Header and upload your site’s header image. You may need to crop the image while uploading.

7. Under the Settings -> General change the following things.

  • Site Title to Christmas Shopping
  • Tagline to Gift n Enjoy
  • Select the Anyone can Register option.

Please click on Save Changes after changing these options.

8. Please go to Settings-> Permalinks. Select Custom Structure and enter /%postname%/. Finally Save the changes done. Permalinks helps you to create customized urls for your pages instead of the default ones.

9. In the Settings -> Discussions page, uncheck all the options and click Save Changes. This will prevent any type of comment in your e-commerce site.

Installing WP-eCommerce

This plugin can be installed either manually or from the WordPress plugin menu.

Lets install it using the easiest method that is by using the WordPress plugin menu.

Please go to Plugins -> Add New and Search for WP e-commerce. In the list generated locate the WP e-commerce plugin and click on Install Now.

After the plugin is installed, click on Activate Plugin to activate the plugin.

That’s it the plug has been installed and ready to use.

After the plugin is installed, you will see a Products menu in your dashboard and a Store option under Settings. The Products menu is used for adding different products to your site and the Store option is used for the plugin settings.

In your dashboard you will also find three new items which shows- Sales by Quarter, Sales by Month and Sales Summary.

A few more additional changes before configuring the plugin

Please go to Settings -> Reading and under Front page displays select A static page and choose the Products Page as your front page. This will ensure that when customers visits your site, the products page will be displayed by default.

Defining a Contact Us page for your site.

We shall use the Contact Form 7 plugin to create a Contact Us page for the site.

For this please go to Plugins -> Installed Plugins and Activate the Contact Form 7 plugin. After activation please click on the plugin settings.

In the plugin’s settings page you can create a customized contact us form by using different types of options available there. Under the Mail option enter your email address beside the To: field. Under Messages you can use your own error messages. Finally copy the generated short code and paste it into your post, page or text widget content. In our case we have copied the code [contact-form-7 id="18" title="Contact form 1"] to a newly created page named Contact Us.


Finally our site looks…

Lets set up the WP-eCommerce plugin before adding products

Please go to Settings -> Store. Here you can set the different options for the plugin.

1. General

a) Select a Base Country/ Region.

b) Select the markets you are selling products to.

c) Set the amount of time the items in a customer's cart are kept reserved.

d) Select a Currency Type and Currency Sign Location.

Finally click Update.

2. Presentation

a) Select Add to Cart under Button Type.

b)You can enable additional options from Show Product Ratings, Show Stock Availability, Display Fancy Purchase Notifications, Display per item shipping etc. For now we will only enable the Display per item shipping: option.

c) Under Gird View Settings we will enter 3 products per row and select Display Description, Display "Add to Cart" Button and Display "More Details" Button options.

d) Under Shopping Cart Settings select Cart Location as Widget. and enable Display "+ Postage & Tax":

e) You can set the product image thumbnail format from the Thumbnail Settings.

f) You may enable other options as per your requirements. As of now we shall keep the other options as default.

Finally click Update.

3. Admin

a) The first three options are used for downloadable products like software, music, games etc.

b) Under Purchase Log Email and Purchase Receipt – Reply Address: enter your email address.

c) Enter your name against Purchase Receipt – Reply Name:

d) Set Terms and Conditions if any.

e) You can edit the Purchase Receipt and Admin Report formats under the Custom Messages.

f) Tracking responses can also be created from this page.

Finally click Update.

4. Taxes

Here you can define the tax rules according to your requirements. You can also define the tax per item.

5. Shipping

a) We will enable the Use Shipping option since we are selling Christmas Gifts.

b) By selecting the Enable Free Shipping Discount, you can provide shippings discounts to customers.

c) Under Shipping Modules we have selected and edited the Fixed Rate shipping option and provided the shipping rates for the customers of different countries.

d) Under External Shipping Calculators we have selected UPS as our shipping gateway and provided all the details.

Please note: You need to have a UPS account in order to use this option. You can also use other shipping options.

Finally click Update.

6. Payments

Here you can define the payment gateway for the customers. Among the various options available, we will use the Test Gateway and PayPal Payments Standard 2.0. The PayPal Payments Standard 2.0 option can be used if you have a PayPal account. This lets customers buy products using PayPal. We will also use the Test Gateway option as a means of manual payment. After selecting and editing the payment options you need to provide all the details.

Finally click Update when done.

7. Checkout

a) Under Misc Checkout Options enable Users must register before checking out, Enable Shipping Same as Billing Option: and Force users to use SSL options.

b) The Form Fields define the Customer's checkout form. You can create a new form or use the default one. You can change the field's Name, Type and Mandatory options. You can also Drag and Drop, Delete different fields based on your requirements.

Finally click Save Changes after its done.

8. Marketing

This option is used to share and broadcast your products among different social networking sites, RSS and Google Merchant Center. For now we shall select the Show Share This, Customer Survey and Facebook Like options.

Click Update when done.

9. Import

The import option is used to upload products automatically using a csv file. We shall come to this later.

In the next part of this Tutorial I shall explain how to add products and use different widgets/plugins in your e-commerce site.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I am a software developer cum web content writer. I just love exploring new techniques and share them among budding developers. Cheers!  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://austinhinderer.com Austin Hinderer

    Personally, I’ve used WP-Ecommerce before, and would never use it again. They have a strong history of releasing updates that break their whole plugin. Having not tried any of the other WordPress eCommerce plugins, I can’t suggest an alternative.

    • http://cjkipper.com CJ Kipper

      I don’t care for WP-eCommerce either. I’ve had really good success with Cart 66 (http://cart66.com/). They have limited feature a free version but the paid version is more than worth the money in my opinion.

      • Mike

        I agree with CJ Kipper. I’ve tried WP-eCommerce with a lot of pain. I’m a big fan of Cart 66 also and combined with custom post types, you can build a very robust eCommerce site that is easily managed.

  • http://www.jrpilates.com Mark S.

    I too had a bad experience with the plugin just taking down my whole site. I personally find the free version of ecwid easy to use, SUPER easy to implement and great looking. I’m glad I found it.

  • MarekZeman91

    I was looking for this tutorial for a long time.
    I hope I will understand all the steps :)

    Than you ;)

  • http://royeyal.com Roy Eyal

    I’ve had nothing but bad experience with this plugin; It breaks every update, the interface is anything but intuitive and I’ve lost customers for that piece of code.

    WooCommerce is a better alternative in so many levels.

  • http://webmastersintexas.com Jerry Lee

    WooCommerce is pretty good, definitely better than Ecommerce, but still needs work. I am building an online trading site with Woo at http://bartercow.com and have had pretty good luck so far, though it’s far from done.
    I am checking out the cart 66, and it looks pretty sweet. It’s cool that you wrote something here though for this topic in general though, the tutorial deals with overall set up of an online store, and is beneficial.

  • Soumitra
    Author

    Thank you all for suggesting great alternatives. I would be happy to write tutorials on those in the future :)

    This tutorial is a synopsis for a beginner to understand the basic aspects of building an e-commerce site. Of course the premium version of Wp- ecommerce has much more functionalities than the free one, still some of my friends have been using Wp-ecommerce for their online stores and had no issues with that. In case the site produce glitches after the update, refreshing the permalinks would do the trick.

    • Ricard

      Come on!!!! it’s a good eCommerce, remember it’s FREE If you want, you can use Magento or…. wowcommerce that… you must pay.
      WPEC it’s a GOOD solution for a small company or a small guy that wants to sell for first Time.

      Excelent article!!!! When…… 2º part???!!!!! Come on!!!

  • Michal

    An online store based on WP? Why not on phpMyAdmin? It’s also very good.

    • Xander

      Seriously funny. Very inspiring. Let’s move this tutorial to retard.tutsplus.com.

  • Kirk

    Does anyone know of a shopping cart for wordpress that users can buy credits to spend on the site? Looking at something similar to how the ThemeForest and other Envato shop fronts work

  • http://graphicd-signs.com Danny

    I think one of the best ecom WP plugins is Shopp. I have used it for about 2-3 sites now, and works great. It will run you $55 plus some fees for addons, but well worth the fee.

    • Xander

      I definitely agree with you after testing all shop software, shopp plugin worked the best.
      Also all the developer options and custom code stuff rules.

  • http://www.elimcmakin.com Eli McMakin

    I have not tried any e-commerce plugins, but I have to implement an e-commerce solution. Thanks for the tutorial. Looking forward to part 2!

  • http://preeminentproductions.com/blog Anthony

    I just got done using the eShop plugin to build an e-commerce site. It has been working quite well so far. Could use some improvement, but can’t complain too much for it being free.
    I used it on http://thewoodstock.co.za/

  • Brian

    I understand that this is a beginner tutorial, however I feel you could have chosen a far better example for an ecommerce plugin than WP-Ecommerce. I am a developer and all I can say is that WPEC is a nightmare to work with from a developer standpoint. WooCommerce, Jigoshop, Shopp. All very well designed, coded and DOCUMENTED plugins.

    My biggest beef with WPEC while I was working with it, is that they changed their website 3 seperate times, they lacked ANY kind of relevant documentation for their plugin. They had about 3 different prefixes for their functions, and even their in-plugin documentation was sub-par. I don’t know if that has changed in the last year/months, but I’ve boycotted them and rely mostly on WooCommerce for my Ecommerce needs.

    • Xander

      Exactly what I am thinking. The way I feel about this tutorial is that the author wanted a quick buck from tutsplus and just created this awe-full tutorial for absolute noobs.

  • http://www.mayne.net The Mayne Design

    We use WP eStore for our eCommerce sites – fantastic support from the author, free updates, loads of features and it just gets on with the job.

    Would be good to see a future instalments of this series touching on other available eCommerce Plugins and Themes.

    Cheers.

  • http://www.exclusivecakeinlondon.com Abi

    This tutorial is awesome, well done! As a beginner, I have learn a lot from this. Just one question thus, where is the link to part 2?

  • Pingback: How to Build an E-Commerce Website Using WordPress: Part 2 | Wptuts+

  • Pingback: My Stream » How to Build an E-Commerce Website Using WordPress: Part 2

  • Pingback: How to Build an E-Commerce Website Using WordPress: Part 2 | wpapp.phpfogapp.com

  • Pingback: Weekly Roundup for Jan 16th to 22nd 2012 - WPKewl!

  • Paul

    First up, thanks for the tutorial, I found it very helpful.

    I think people are treating this tutorial alittle unfairly.

    Yes WPEC has it flaws, as do a great many other e-commerce plugins and programs (OSCommerce anyone?). WPEC will be the first port of call for designers because it is free. Yes, the other plugins are likely to be better, mainly because they charge a fee which can be ploughed back in to developing the plugin further. Like I said, I am only scratching the surface of WPEC at the moment. In the past I used the eShop plugin and to say it was a horrible experience would be an understatement.

    As for the tutorial being for ‘noobs’, what’s the problem with that? Everyone starts somewhere and we were all beginners once (including the folks who have been complaining in the comments). Maybe this tutorial will serve to highlight the problems with WPEC by getting people using it, then looking for alternatives.

  • aryan

    Enough of statements about different plugins. Now Can someone summarize the things and tell which e commerce plugin to use for my new e commerce site on wordpress. It was confusing to get to a decision reading all the comments above.

  • http://rbcwd.com Randy

    Being new at wordpress and after reading all of the negative comments about e-commerce plugin is leaving me wondering, after putting so much time into setting it up I truely don’t want to do it all over again so I’m going to stick with it and hope I have better luck then those that didn’t.

  • Zie

    WP just started using it, it is pain in the ass not intuitive so let along doing the ecommerce with it. Horrible interface and clunky explains. Why can’t any good developer just develop something easier?!!!

  • joy

    Can any body tell me how to make any e-com website for genral user like-any external user can post and sale his product not by admin??????any plugins???????

    • Rajan V

      Its easy add user role modifier plugin to provide add product rights for all users

  • Pingback: Tự mở gian hàng trực tuyến với WordPress | Bienla Library

  • Pingback: WP Ecommerce Tutorial « tediscript.wordpress.com

  • http://www.facebook.com/ddmmatias Matias Diez

    Hi everybody. I had a quick look into this and seems exactly what i’m looking for, but before i start using it i have a doubt about the payment methods.

    I need to include credit card options and SMS payment service. I know both payment types are hired from the specific credit cards and phone companies but is this framework/plugin flexible enough to include those services later on? or should I be building my site in a different way?

  • umer

    thats great, good style of presentation

  • http://twitter.com/afshigul AfshiSpeaks.com

    Best post and great presentation style.Thanks for sharing it.

  • saiful

    I extreemely impressed by this tutorial, where is the next part please inform me,

  • Steve

    Thank you for taking the time to produce this tutorial. I wanted a brief introduction to WPEC and this hits the mark 100%. Just what I wanted. To the detractors I would say this is obviously not for you if you are more experienced, but if you are so critical do what I say to other critics – go away and spend your own time developing something more comprehensive and then give it away for free as Soumitra has done. Its great that in this day and age people are still willing to pass on their knowledge for free.

  • fd george

    thank you

  • Ashvin Jain

    Right now i haven’t tried it but i really enjoy it, now i gonna try this.. yaaaahhhiooooooo……….. thx

  • Pingback: WP e-commerce (part-2) | GumotiGumoti

  • Midnimo

    hi!
    how can i create online marketplace website where people can sell their products for free and no payment methods is allowed only details about the product.

    and which open source is the best to do it?