1. Code
  2. WordPress
  3. Theme Development

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

Scroll to top
Read Time: 7 min

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.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.