Setting Up WordPress Site as an e-Commerce Platform

Exclusive offer: get 50% off this eBook here
WordPress 2.9 E-Commerce

WordPress 2.9 E-Commerce — Save 50%

Build a proficient online store to sell products and services

$26.99    $13.50
by Brian Bondari | February 2010 | WordPress

In a previous article we began work on converting WordPress from a blog-centric platform to a business-focused platform. We covered the Installation of WordPress e-Commerce Plugin and Activation of Third-party Themes.

This article by Brian Bondari, author of WordPress 2.9 E-Commerce, will cover:

  • Setting up a static front page
  • Using widgets
  • Complementary plugins
  • Adding a contact form
  • Adding a business blog

Setting up a static front page

By default, the main page of your WordPress site shows a running list of your latest posts. While this is perfectly acceptable for a personal blog, an e-commerce site typically takes a more static approach so as not to confuse any first-time visitors.

Fortunately, configuring a static front page is simple. We first, need to create a new page that will become the default front page. In your WordPress Dashboard, navigate to Pages and select Add New, as shown in the following screenshot:

WordPress 2.9 E-Commerce

Add any variety of information that you would like first-time visitors to see, such as a logo, a welcome message, a breakdown of product categories, or whatever you would like.

When you've finished, go ahead and publish your page. The page we created for our music shop is titled Welcome. Now let's set it as the default front page. Back in the WordPress Dashboard, browse to Settings and click on the Reading option, as shown in the following screenshot:

WordPress 2.9 E-Commerce

Underneath Reading Settings, select the option to display a static front page. Be sure to choose the title of the desired static page from the drop-down list. Note that we chose Welcome, the same page that we just added. The following screenshot shows the Reading Settings options:

WordPress 2.9 E-Commerce

Another good option for a static front page is to directly choose the Products Page from the drop-down list. The Products Page is automatically created when you activate the e-Commerce plugin for the first time, and is essentially the gateway to your e-commerce shop. If you want customers to first see your products when they visit your site, choose this option.

Using widgets

Also known as "sidebar accessories", widgets are one of the slickest and easiest ways to vary the content of your WordPress sidebars. With widgets, you can elegantly add text, images, gadgets, HTML, or any other design elements to one or more sidebars on your site. A growing number of plugins for WordPress also come with additional widget features, including the WP e-Commerce plugin.

To get started with widgets, navigate to Appearance in your Dashboard and click on Widgets, as shown in the following screenshot:

WordPress 2.9 E-Commerce

Feast your eyes on the number of Available Widgets. The following screenshot shows the different widgets available:

WordPress 2.9 E-Commerce

Adding a widget to your desired sidebar is a simple, click-and-drag affair. You can add as many widgets as you like to the sidebar, and re-arranging them is as easy as dragging and dropping them.

Here are the three widgets that we added to our music shop: a Search box, a Text Widget, and the Shopping Cart. The Shopping Cart widget is shown in the following screenshot:

WordPress 2.9 E-Commerce

Creating text widgets

For an e-commerce site, a text widget is like a Swiss Army Knife since it's one simple tool that can serve a variety of purposes. Here are a few tasks that text widgets can accomplish:

  • Create a "Featured Product" widget and rotate the contents every few days or weeks
  • Add a custom image that links to a specific product category, such as "Albums" or "Singles"
  • Create an HTML drop-down list with links to all product categories
  • Add notices about sales or special discounts

Here's an example: let's say we want to let our customers know about a special coupon code for our shop that is valid during the month of April. A text widget is the perfect way to let all visitors know about the sale.

Drag-and-drop an empty text widget and place it in the sidebar. It should expand automatically, and now we can type all of the necessary text and HTML.

In the following screenshot, we've added some text and a little HTML. The Title of the text widget is now April Sale! The <p> tags simply format the text into paragraphs, and the <strong> tag makes the coupon code show up in bold text. The usage of these tags is shown in the following screenshot:

WordPress 2.9 E-Commerce

Be sure to save all of the changes once you have created the text widget. If we now take a look at the front page of our music shop, we can see the widget layout and the sale information in the WordPress sidebar, as shown in the following screenshot:

WordPress 2.9 E-Commerce

WordPress 2.9 E-Commerce Build a proficient online store to sell products and services
Published: March 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Complementary plugins

Though the WP e-Commerce plugin is the focal point of this book, there are a number of other plugins that can greatly augment the functionality of your site. They include:

  • Akismet
  • All in One SEO Pack
  • Google XML sitemaps
  • WP-DB-Backup
  • WP-Polls

Akismet

The Akismet plugin comes with WordPress by default, but if for some reason you do not have it, download it from the link http://akismet.com/download/. What does Akismet do? It essentially eradicates comment spam, which is a true bane to anyone running a blog with comments enabled. Granted, if you already disabled comments, your site has no need for an anti-spam plugin. For the rest of us, Akismet (or a similar plugin) is mandatory. After all, you wouldn't want your business blog flooded with rogue, distasteful comments would you?

WordPress 2.9 E-Commerce

The Akismet plugin is free for personal or hobby use. If your online store is a full-fledged commercial venture, they ask you to purchase a commercial license.

A similar free plugin is WordPress SpamFree. For more information, refer to: http://bit.ly/wp-spamfree.

All in One SEO Pack

Download link: http://bit.ly/wp-seo-pack

The SEO pack for WordPress is designed to help your site rank higher in search engines. While the effectiveness of the SEO pack is determined by a large number of factors, especially the content of your site, using this plugin certainly doesn't hurt. Just understand that installing and activating it is not likely to rocket you to the top of Google overnight.

All in One SEO Pack specializes in allowing you to set your own titles, descriptions, and keywords, both for your site's front page and individual posts. You can see it in action in the following sample music shop screenshot:

WordPress 2.9 E-Commerce

Google XML sitemaps

Download link: http://bit.ly/google-sitemaps

In conjunction with the All in One SEO Pack, the Google XML sitemaps plugin is designed to make it easier for major search engines to crawl and index your site. Activating the plugin will create a sitemap (compatible with http://www.sitemaps.org) that major search engines such as Ask.com, Google, MSN, and Yahoo! understand.

The following screenshot shows the Google XML Sitemaps plugin in action. Adding or updating a post will automatically rebuild the sitemap.

WordPress 2.9 E-Commerce

The ideal end result is that if the search engines understand and index your site in a better way, new visitors will find your store more easily.

WP-DB-Backup

Download link: http://bit.ly/db-backup.

WP-DB-Backup has one single purpose: it exports a backup of your WordPress database that you can restore later in case of an emergency. Upon installation, you will find a Backup option underneath the Tools menu in the Dashboard, as shown in the following screenshot:

WordPress 2.9 E-Commerce

It's better to be safe than sorry, so please don't overlook this plugin. The last thing you want is to find out that your server got hacked and you have no database backup to restore. Ouch!

WP-Polls

Download link: http://bit.ly/wp-polls

WP-Polls provide an easy way to add interactive polls to your site, either on an individual post, a page, or embedded within the sidebar via a widget. Once installed, the Polls menu shows up in the WordPress Dashboard.

You can create as many answers as you like for each poll, plus add automatic closing times. Since we're building a music shop, how about asking our visitors about their favorite music genre? This also directly helps us learn more about our customers. Notice the poll embedded within our WordPress sidebar in the following screenshot:

WordPress 2.9 E-Commerce

Adding a contact form

No e-commerce site is complete without providing a way for customers to contact the shop owner(s). Fortunately, this is an easy task to accomplish. Some themes for WordPress already contain a "Contact" page template. If your theme does not, there are a multitude of plugins that can bolt on that functionality with only a click or two. Here are three options:

  • WordPress SpamFree contact form
  • Contact Form 7
  • cforms II

WordPress SpamFree contact form

Download link: http://bit.ly/wp-spamfree

If you opted to use the aforementioned WordPress SpamFree plugin, then rejoice! A simple, yet functional contact form is already included. To add it, first create a new page (not a post), switch to the HTML editing tab, and add the following tag: <!--spamfree-contact-->, as shown in the following screenshot:

WordPress 2.9 E-Commerce

The WordPress SpamFree contact form doesn't have many bells and whistles, but if all you need is a simple form that customers can use to contact you, it suffices nicely.

Contact Form 7

Download link: http://bit.ly/contact-form-7

If you require more than a single contact form on your site, consider the Contact Form 7 plugin. It supports multiple forms, basic customization via simple markup language, CAPTCHA support, and spam filtering via Akismet.

Usage is similar to the WordPress SpamFree contact form. To add a new form, create a new page (not post) and add the following tag: [contact-form 1 "Contact form 1"].

cforms II

Download link: http://bit.ly/cforms

The cforms II plugin offers a plethora of configuration options for your contact form. If you need ultimate control over the customization of your form(s), cforms II will not disappoint you. A small sample of the options are included here:

  • Multiple forms
  • AJAX-supported form submission
  • File attachment support
  • Timing and submission limits
  • Widget support

Adding a business blog

Up to this point, we've worked hard to convert WordPress from a traditional blogging platform into a more appropriate business platform. However, we can't deny that blogging is ultimately the strength of WordPress. Business blogging is rapidly becoming more popular. Although you can certainly create a functional e-commerce site with WordPress using nothing but static pages and the WP e-Commerce plugin, the addition of dynamic content on a blog helps give your shop a personal element. It provides the customer with a sense of the face and personality behind the store. If nothing else, it can serve as a medium for communication between you, as a store owner, and your visitors.

Adding a business blog only takes a few clicks. As we created a static front page earlier, we first need to create an empty page that will serve as the placeholder for the blog. In your WordPress Dashboard, add a new Page. Give it a title, such as Blog. You don't need to add any content to the page.

Just like when we created a static front page, navigate to Settings and click on Reading. Underneath Reading Settings, click on the drop-down list next to Posts page and choose the Blog page that you created. The Reading Settings options are shown in the following screenshot:

WordPress 2.9 E-Commerce

What we have just done is select a default location for all of the new posts that we will create as part of our business blog. As our site uses a static front page, it will remain the same, but all new posts will show up on the Blog page.

See for yourself. If you write a new post, it now appears as part of our business blog. The following screenshot shows the Blog page:

WordPress 2.9 E-Commerce

Summary

Congratulations! You have now completed all of the basic prerequisites needed to prepare your WordPress site for use as an e-commerce platform. In this article, we covered:

  • Adding new pages and setting a static front page
  • How widgets add massive flexibility and functionality to any WordPress e-commerce site
  • A range of recommended, complementary third-party plugins, including tools for spam protection, search engine optimization, database backup, and polls
  • Three different options for adding a contact form, ranging from simple to advanced
  • Taking advantage of WordPress' strength as a blogging platform to add a business blog that allows for interaction with customers
  • Your store-in-progress should now look and act much more like a business platform and much less like a blog.

    If you have read this article you may be interested to view :

    WordPress 2.9 E-Commerce Build a proficient online store to sell products and services
    Published: March 2010
    eBook Price: $26.99
    Book Price: $44.99
    See more
    Select your format and quantity:

    About the Author :


    Brian Bondari

    Brian Bondari is a musician, composer, and teacher with equal loves for both music and technology. His hobbies include reading, hiking, composing music, and playing with his pet rabbit. He also spends an exorbitant amount of time lying on the floor grading papers.

    Brian earned his doctorate from the University of Kansas in 2009 and is currently an Assistant Professor of Music Theory and Composition at the University of Texas at Tyler. When he is not writing music or grading papers, he serves as Senior Editor for the multi-author technology blog, http://www.TipsFor.us.

    You can also visit him at http://www.bondari.com.

    Books From Packt

    WordPress MU 2.8: Beginner's Guide
    WordPress MU 2.8: Beginner's Guide

    WordPress Plugin Development: Beginner's Guide
    WordPress Plugin Development: Beginner's Guide

    Magento 1.3 Sales Tactics Cookbook
    Magento 1.3 Sales Tactics Cookbook

    WordPress 2.8 Theme Design
    WordPress 2.8 Theme Design

    PHP 5 E-commerce Development
    PHP 5 E-commerce Development

    Joomla! E-Commerce with VirtueMart
    Joomla! E-Commerce with VirtueMart

    TYPO3 4.2 E-Commerce
    TYPO3 4.2 E-Commerce

    WordPress 2.8 Themes Cookbook
    WordPress 2.8 Themes Cookbook

    Your rating: None Average: 5 (2 votes)
    Introduction by
    A professional Joomla! expert can help you leverage the benefits of a Joomla! powered e-commerce website and there is no denying to the fact that India is a vast pool of IT experts. Due to the growing competition in the field of web designing and development, there is a huge demand to these services and outsourcing them as well. So, if you plan to design or may be, develop an e-commerce website of your own, outsourcing these services from India would be a good option.
    Excellent site, keep up the good work by
    I'm glad that I've found your www.packtpub.com website. What a classy blog! I love how particular each of the entries are. They are well balanced, both informative and amusing, and the pictures are nice too.
    Really well explained procedure by
    Even I can do this! Thanks for a great article.

    Post new comment

    CAPTCHA
    This question is for testing whether you are a human visitor and to prevent automated spam submissions.
    4
    s
    s
    j
    9
    R
    Enter the code without spaces and pay attention to upper/lower case.
    Code Download and Errata
    Packt Anytime, Anywhere
    Register Books
    Print Upgrades
    eBook Downloads
    Video Support
    Contact Us
    Awards Voting Nominations Previous Winners
    Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
    Resources
    Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software