Today is part one of a three-part article on using Wordpress for E-Commerce. My goal is to create a sort of how-is-that-done series on using Wordpress as an easy content management tool for selling actual products. Some of these techniques can be implemented by anyone, whether you are an advanced programmer or a beginner to WordPress. Today’s example is from Rockstar Wedding Planner, a recently relaunched site by That PHP Girl.

Why Use WordPress for E-Commerce?

I have yet to find an e-commerce solution that I really like and that will do everything I need. Most of them are very complicated to do custom design on, or they are limited in terms of custom design in order to maintain functionality. The time-consuming nature of customizing e-commerce software is what makes an e-commerce site so expensive to make … and to be honest, most people don’t need a full-blown e-commerce solution because they won’t use most of the functionality, and/or they have very few products. Many people also don’t want a real store—they just want a way to throw in a few products into their content. So for those reasons, along with the ease of use and development of WordPress, finding a way to make WordPress work for e-commerce purposes makes sense.

Anatomy of a Products Post

Rockstar Wedding Planner has two main shopping areas: The products section and the coaching section. The products section is just a category listing disguised as a page — it uses WP_Query to pull all the posts from the products posting category and orders them by title. The loop then starts to display all the posts.

The first section is just a simple call to the the_title(); function in an h3 wrapper:

The second section calls the_content();, using the <!–more–> quicktag to control what is displayed on the page and what is displayed after the link.

The third section calls a price for the product, and a description for that price if it is available (which it is when there is more than one price option). It starts out by finding out if a price is listed using a custom field, displaying the description if there is one, and then displaying the price.

The code for that looks like this:

<?php if (post_custom(‘bundle_price’) == true) { ?><p><?php if (post_custom(‘bundle_price_descrip’) == true) { ?><?php echo post_custom(‘bundle_price_descrip’); ?> | <?php } ?>Price: <?php echo post_custom(‘bundle_price’); ?></p><?php } ?>

The fourth block is the actual add to cart button. Because the button and the surrounding code for the display stays the same for all products, I opted to just pull the link for this button from a custom field. The admin for the site simply pulls the store link for this product from their payment processor and adds it to the custom field.

Code:

<?php if (post_custom(‘bundle_link’) == true) { ?><div class=”btn-buy”><a href=”<?php echo post_custom(‘bundle_link’); ?>”><img src=”http://www.mcssl.com/netcart/images/cart_buttons/cart_button_12.gif” style=”border:none; background:none;” /></a></div><?php } ?>

The final block is a learn more link, which could possibly go to the rest of that post, or it could go to another page entirely.

This is also accomplished through custom fields, using an if statement to determine if there is a special link, or if the_permalink(); should just be called:

<div class=”btn-continue”><?php if (post_custom(‘bundle_learnmore_link’) == true) { ?><a href=”<?php echo post_custom(‘bundle_learnmore_link’); ?>”><?php echo post_custom(‘bundle_learnmore_text’); ?><?php } else { ?><a href=”<?php the_permalink(); ?>”>Learn More<?php } ?></a></div>

The coaching section pretty much follows the same functionality, with the biggest exception being that no link is display if a learn more link is not entered as a custom field, instead of using the_permalink(); as the else alternative.

Want a code-free version?

WordPress is built upon the structure of categories, posts and pages. Most modern E-Commerce software is built with categories, products and extra content pages. So why can’t "products" just be posts in the category of "products"? If you want to simplify this whole thing, you could just purchase an existing theme (or use whatever you are using now), and create a category of products. Inside this category, you would use a new post for every one of your products including the description, price, and a Buy It Now button. (Buy It Now buttons can easily be created through services like Google Checkout, PayPal and 1ShoppingCart.) Once you have all your products in, your "store" would then just be your category listing, for example /category/products/.

One note: Depending on your version of WordPress and how you edit your pages, it may not work to paste in button code for the visual editor. To solve this problem, enter your text into the visual editor, save the post, and then click on the HTML editor to put the button code in, clicking update post after you are done.

Hopefully I have given my readers some good ideas about what they can do with their own sites, but remember—if you get stuck, I’m always here to help!

Coming up: Part 2 will be on using WordPress with a custom, on-site cart solution. Part 3 will be about using a plugin to create a shopping solution.