• Removed the decorative sidebar and shifted the content left.
• Dropped the sidebar lower, modified it to randomly select testimonials, and added a logo to the top of the page on that side.
• Created custom backgrounds for the page, header and footer.
• Swapped out the footer widgets for a special announcement and a link list (using WordPress links).
• Used a structure of pages instead of posts.
• Connected to an existing shopping cart to create purchase options.
• Changed color schemes and some font treatments to achieve the right look.
• Created a graphic for the slogan to connect the elegance and star power of the event.
• Formatted the content and pictures for flow.

The end result is a flirty and fun site featuring the site owner’s favorite colors that does a great job in getting across the feel of the event itself. It is a big departure from the original format of the Rockstar Wedding Planner LIVE! site, which was more of a long sales form — and the folks at RSWP couldn’t be happier with their new design! The event (and the site) are sure to be another smashing success for Daykin Productions.

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.