Enabling WordPress for e-Commerce – Part III: Product Setup and Payment Information

In Part I of this series, I discussed four different options for turning a WordPress installation into a viable e-Commerce site. Part II then covered the initial setup and configuration of both WordPress and the YAK plugin.

Now it’s time to get to the “meat and potatoes” of any e-Commerce site: listing products and setting up the payment system.

Product Categories

Before you can list products, there is one more configuration step in YAK that we must complete: setting up product categories. At the end of the previous article, I discussed YAK’s initial configuration options, one of which is the Product Category Name. The default name is products.

yak_products.png

No matter the name that you chose, remember it, and create a corresponding category in WordPress with that chosen name (ManageCategoriesAdd New. Leave the Category slug blank, and make sure the Category parent is set to None.

You have now created an overall category for all of the products you will list. Now, underneath this overall category, create at least one additional category (even if you only have one type of product). You may call it whatever you want, such as default. When creating this category, be sure to choose products as the Category parent, and like before, leave the Category slug blank.

That covers the basics of setting up the necessary categories. Of course, you can add more categories as you need.

Adding a Product

Alright, let’s get to the fun part: adding some products. All products in YAK will show up as posts, so create a new post in WordPress. Title the post whatever you want, but I suggest using the name of your product as the post title. Add any descriptive information, then be sure to check the appropriate category (or categories) on the right. Just like in a typical WordPress post, you may add any pictures or formatting that you like.

Now we need to add the price and the “Add to cart” button. Prices in YAK are handled by inserting little snippets of code (called “tags”) into the HTML of the post. You cannot add these in the “visual” editor, so switch to the “code” view.

Wherever you want the price to appear, add this tag:

<!--yak_price-->

If you want an “Add to cart” button to appear, also add this tag:

<!--yak_buy-->

Here is the code view of an example product that I am listing. Click for a full view:

product_post.png

Now I will add a sample picture, and the end result will look like this. Click for a full view:

sample_platypus.png

A stuffed platypus, huh? I bet that it sells like hotcakes! 🙂

There is one step that I have not yet mentioned – actually setting the price for your product. In the example above, you can see that my platypus costs $10, but that price does not appear anywhere in the code view. Instead, the price is set in what is called a Custom Field for your post.

Before you actually publish your post, scroll to the bottom of the page and find the Custom Fields option. Here, add an entry called yak_price with a numerical value that represents the actual price of your product. Also, I like to go ahead and add an entry called yak_title that contains a the title of my product. Here is a sample screenshot of the Custom Fields area.

product_custom_field.png

Manage Products

Once you have added the custom fields, you may “publish” your product. However, you are not quite finished yet. Navigate to Manage, then yak, then Products. You should see a listing of any products you have listed so far. If you do not, go back over these instructions. Did you set the category appropriately? Did you remember to add the custom fields?

IMPORTANT: To finish configuring your product, you must set a quantity. Otherwise, your price and “Add to cart” options will not appear, as YAK will think that you are sold out (and you can’t sell anything that has zero quantity, of course). Click the three dots to the right of your product listing to see the expanded view (as seen below):

manage_products_expanded.png

Enter a quantity. Of course, you do not have to enter exactly how many of those products you have, but can use this option to help keep track of how many you have sold. For instance, I make some items available for download on my soon-to-be-launched site, so I just enter a large quantity for that item, such as 1000. The quantity will automatically reduce as I sell items, and I can easily tell how many have sold.

Items for Download

Speaking of downloading, this is the place in which you may enter a path for file downloads. You must set the absolute path to the file on your server. Ideally, this folder is not available from the web, as you do not want anyone to discover the path to your file(s) without paying first. If you have shared hosting on a web host such as A2 Hosting, the path to the file could be something like:

/home/username/downloads/filename.zip

Be sure to type the path correctly, as any slight error will break the link to the file when a customer purchases it. You can test this feature after you set up the payment options.

Add Your Cart

Now that you have items available for purchase, it is time to set up a page that will serve as the shopping cart. This is easy, and the content of the page only has one line. Create a new Page in WordPress (not a post), and add this short tag in the code editor:

<!--yak_checkout-->

That’s it. Now you should probably create a link to this newly-created page somewhere noticeable, such as in your header or sidebar.

Set Up Payments

Alright, now let’s discuss how you will actually get paid for the items that you sell. YAK can handle accepting credit card information directly, but I did not opt for this for several reasons. First of all, if you want to accept credit cards yourself, you must have SSL (Secure Socket Layer) available to you on your server. SSL is what creates that nice little “padlock” icon in your browser whenever you sign in to the payment area of a site such as Amazon. If you do not have SSL, DO NOT ACCEPT CREDIT CARDS DIRECTLY, as it will be easy for a third party to intercept the information. Plus, setting up a gateway to accept credit cards yourself can cost a lot of money each month, whether or not you make any sales. No thanks.

You can also set up a page to accept checks/money orders if you want. When a customer purchases items from you, they will be redirected to a page that explains where to send a check. Since I plan to sell some items for download, this will not work either for me. Hmmm.

YAK also integrates directly with PayPal. Though I’m not a very big fan of PayPal, it’s the best option currently available (though I hope some brilliant programmer will soon add easy integration with Google Checkout). You will need either a Premier or Business account with PayPal to accept credit cards.

Playing in the Sandbox

I also highly recommend setting up a free Developer account with PayPal, which will allow you to test transactions to make sure they are working without spending any real money. In the Developer account, you can create test accounts: one to represent a merchant and one to represent a test buyer. Set up the test accounts in the sandbox and remember what they are, as you will need them again briefly.

YAK PayPal Settings

Back in your WordPress admin area, go back to the YAK settings (Manage, yak, Settings). Scroll down to the Payment Settings, and enter PayPal as the payment type. In the redirect area, enter this address to access the sandbox:

https://www.sandbox.paypal.com/cgi-bin/webscr

Note: when you are actually ready to sell products, you will need to remove the “sandbox” part of the above address. Until then, all purchases will just be test transactions.

For the account, enter the test merchant account that you created in the sandbox. Likely, this will have a “biz” somewhere in the fake e-mail address. Also, I chose to use IPN (Instant Payment Notification) as the notification type. If you want, you may also specify links to pages that customers will see if they return from PayPal (more on this in a moment) or decide to cancel a payment.

paypal_settings.png

Set Up IPN

The next thing we need to do is actually make your site integrate with PayPal. Using the IPN system (mentioned above), PayPal will automatically contact a specific page on your site to inform you that someone has made a payment. Create another page in WordPress, and within that page add this one snippet of code.

<!--yak_paypal_ipn-->

Make note of the page ID number for your newly-created page. Since this page should not be visible to the general public, let’s hide it so that it does not appear in your sidebar. WordPress versions 2.2.1 and higher simplify this process. Using the aforementioned Widgets in Part II, you can easily specify the ID numbers of pages to exclude.

wp_hide_pages.png

Now, go to your PayPal sandbox environment and enable IPN for that account (View Profile, Instant Payment Notification Preferences). For the IPN URL, specify the entire link to the IPN page that you just created.

Post-payment Processing

You are almost done. One of the last things you need to do is create a “Thank You” page to which PayPal will redirect after a successful payment. The content of the page could say something like this:

Thanks for your order. Your order number is <!--yak_order_id-->. You may log into your PayPal account to view the transaction details.

Please note, items can take between 5-10 working days to be delivered. If your order included items for download, you will receive a separate e-mail with download instructions shortly.

<!–yak_cleanup–>

Back in the PayPal sandbox, go to Profile, then Website Payment Preferences. Enable Auto Return, and specify the URL for the page you just created. This should be the same as the path you specified in the YAK settings.

The Transaction Test

You have now completed the necessary steps to enable WordPress for e-Commerce. However, the setup is not complete until you have tested the payment system to make sure it works! 🙂

Go ahead, buy an item from yourself. When you come to the Ordering Information section, enter the fake buyer e-mail address that you set up in the PayPal Developer Sandbox. That’s the important part. Throw in some random information for the other entries, such as address and phone number.

ordering_form.png

When you click “Confirm Order,” you will be taken to the Sandbox. Log in with the test buyer e-mail address and password that you created, and proceed with the transactions. Don’t worry, you are not actually spending any real money. When finished, if all goes, well, you should be returned automatically to your “Thank You” page. If your mock purchase included a download, you should receive a separate e-mail as specified in the YAK Download Settings. The garbled download link is tied to the first IP address that tries to access it, so you don’t need to worry about customers sending the link to friends.

Final Thoughts

Of course, I cannot cover every possible configuration option in YAK or WordPress. There are still some options left to consider, such as how you want to handle shipping. Note: YAK currently calculates shipping based on weight in grams, and you can set varying shipping rates by country. Since I plan to sell mostly items for download, they all weigh 0 grams. 🙂

When you decide to make your site go “live,” be sure to switch from the Sandbox to the real PayPal. Otherwise, I’m sure your customers will be highly confused. Also, be sure to configure your real PayPal account in the same manner as the Sandbox (IPN, etc).

Fortunately, most of this process only has to be completed once. From this point, adding new products only entails creating a new post and adding the few custom fields and other options for that particular product.

In the end, I like WordPress because I am familiar with it, and I know how to make it do what I want (most of the time). Plus, creating backups is simple, which is important for an e-Commerce site. I like YAK because I feel like it gives me control over its integration with WordPress, even down to editing the CSS if I want. Plus, I like the simplicity of listing products as posts.

I’m sure I will continue to edit, tweak, and test my soon-to-be-unleashed site before it goes “live.” I want to make sure it works correctly, and writing all of this documentation has helped me learn how it all works. I hope it will be of use to you as well, dear reader.

If you enjoyed this article, please subscribe for future updates.


Author: misterIM

Site administrator. Technology enthusiast. Linux lover. As Martin Luther said of me:

He is the master of the (bank)notes. They must do as he wills. As for the other [finance authors], they must do as the (bank)notes will.

About this site