Theme Development

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


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 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.

Related Posts
  • Code
    A Guide to Providing Quality Customer SupportQuality customer support
    If you’ve ever released free or premium WordPress Themes or Plugins, you know that launching your new product is not the end of the process. In fact, it’s just the start, and raises a lot of questions: How do you provide support? How do you support customers after they’ve used your product? How do you manage email, social media and forum support easily? Should you support your free products, or just your premium ones? Read More…
  • Web Design
    E-commerce for Mobile: Making the Most of Your SiteMobile thumb
    In this article we’re going to address some mobile e-commerce hurdles. I'll break down a few of the most important steps to take account of in preparing an e-commerce site for mobile access and offer you some advice based on my experience.Read More…
  • Code
    Theme Development
    Making the Perfect WordPress Theme: Maintenance, Compatibility, and Customer CareWp white 400
    In the previous part of this series, we reviewed what to avoid when making a WordPress theme. It is an important article because it's really easy to make those mistakes. And in this article, we're going to go through the things we need to do after making our theme.Read More…
  • Business
    How to Choose an eCommerce Payment Gateway3 ecommerce payment gateway preview
    To be in business, you must sell things. To sell things, money must change hands. For money to change hands, you need a way of accepting payments. That's what a payment gateway is for. A payment gateway allows you to: Take payments quickly and easily. Keep your customer's money and details secure. Gain the trust of your customers, so they're willing to hand over their money. A payment gateway helps you make money, but yes it does cost money. It's important to choose a professional payment gateway provider for your online business. In this post, we'll look at a number of popular options and compare their pros and cons. First, let's review the features to look for in a quality payment gateway.Read More…
  • Business
    The Top WordPress Plugins You Need for Your Authority Blog5 preview authority blog wordpress plugins
    In the last post we got your blog setup with a unique-looking design courtesy of the Canvas theme framework. But aesthetics are just one piece of the puzzle -- in reality, any successful blog needs to function well in order to succeed. Although WordPress has great functionality out the box, its true power lies in its extensibility, which is exactly what we're going to cover today. I'm going to take you through the top WordPress plugins you can use to elevate your authority site to another level. We're going to cover everything from backups, to security, to search engine optimization, to post promotion and more. This step-by-step guide will show you how to install and setup each of the WordPress plugins I consider to be must-haves for authority site owners. Enjoy!Read More…
  • Code
    Getting Started With WooCommerce: Initial SetupGettingstartedwithwoo
    E-Commerce is massive, most of us use it and global e-commerce sales are set to top $1.25 trillion by 2013. Over the past few years it has become easier to start your own e-commerce store with products like ZenCart, Open Cart, OSCommerce and Magento. WordPress has a few options for e-commerce but none have stood out as the full enterprise quality system that serious sellers need. Today I'm going to talk about a product that has changed that and put WordPress right at the front as a serious contender as an e-commerce platform. Say hello to WooCommerce. In the first of our two part series we'll look at installation and initial setup talking through the various options available to you. In our second tutorial we will look at adding our first product as well as theming and styling WooCommerce.Read More…