Plugin-less WordPress e-Commerce

Naturally, I looked to WordPress to handle everything — the products, the blog and the pages. With custom post types, this wasn’t a problem; a custom post type for the products and then an individual entry for each of the products, with standard posts being used for the blog and custom page templates for the pages. We’re not going to look at those, though, instead we’re going to look at how the e-Commerce part of the site worked.

Choosing a shopping cart

The problem was going to be the shopping cart itself. I was only after something lightweight — a full plugin like WooCommerce would have been overkill — and thus I turned to my (trusty?) friend PayPal.

The first thing to do was to sign up for a PayPal Business account and then get started with Website Payments Standard, the free PayPal checkout tool. There is a pay-monthly version, but it’s more complicated than we need to worry about.

Creating your button

The button creator tool is surprisingly easy and versatile. You can choose from a couple of different button types — shopping cart, recurring payment or just buy it now are the ones you’re likely to use — depending on what you want to sell. I used the shopping cart button.

You can then add an item name and ID, price and currency.

We’re then onto the useful part: customising the button.

I needed to be able to select different types of bracelet (which cost different amounts), so the first customisation was adding drop down menus with a price option. I then needed sizes, so a drop down menu with the different sizes was the next customisation. If you need text, add a text field.

It’s all fairly standard at the moment, though. Clicking the “customise text or appearance” button will open up the important section, though, which allows you to use your own image instead of the PayPal “Add to Cart” button.

Here I headed over to GraphicRiver and picked a button pack that suited the design, customising a little in Photoshop. Once I’d uploaded it, clicking the “use your own button image” option and then linking to my button let me use my custom button instead of the standard PayPal look (the end result is below).

The rest is something you’ll have to do yourself: shipping, tax and adding inventory. Once you’re done, click “Create Button” and copy the code you’re given.

Adding to WordPress

Actually adding the button to WordPress was quite simple, with the help of our good friends custom fields.

For each bracelet entry, I added a custom field paypal, where I pasted the button code. I then added the following to the single-bracelet.php file (as I’m using custom post types):

<?php echo get_post_meta($post->ID, 'paypal', true); ?>

This gets the custom field and spits out its contents, adding my lovely button! I added a div around the code above in order to let me style the button; once the styling was applied, I had a lovely new button!

No plugin here

I’ve slightly over-simplified things here; there’s slightly more to it than just creating a button, putting it into a custom field and watching the money roll in — I also used custom fields for the images you see on the product page and had to add a second button for international postage as PayPal wasn’t quite flexible enough. I also had to add a div to each button code in order to get my styling how I wanted it; it’s not a perfect system, but for a simple shopping cart, it’ll do just fine.

Over simplification or not, though — plugin-less e-Commerce is a cost effective, quick and easy way of setting up a shopping cart on any WordPress powered site.