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.

No matter the name that you chose, remember it, and create a corresponding category in WordPress with that chosen name (Manage – Categories – Add 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:

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

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.

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):

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.

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.

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.

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.

Get WordPress Going

Now it is time to install and configure WordPress. Installing WordPress is fairly easy. If you must install from scratch, WordPress offers a famous 5-minute installation guide. Many web hosts also offer easy, 1-click installation of WordPress. One such host that I recommend is A2 Hosting, as installing WordPress with them literally took about four seconds.

Once you have WordPress installed, choose a theme that you like (or design your own). There are literally thousands of themes available (some much better than others). I prefer simplicity over flashiness, so I settled on an elegant 2-column theme that’s widget ready and includes an “options” page.

No matter what theme you choose, let’s work on making it a little less “bloggy” and more like a traditional web site.

To Comment, or Not to Comment?

Unless you have a need for “comments” on your e-Commerce site, I suggest disabling comments entirely. Navigate to Options, then Discussion, and uncheck the options about comments:

If after disabling comments, your theme shows any indications of “No Comments” or “Comments Off,” you can rip those out pretty easily. Navigate to Presentation, then Theme Editor, and then choose Single Post on the right. Find and delete this little snippet of code (note: you should make a backup of the file just to be safe):

< ? php comments_template(); ?>

Depending on your theme, do the same thing on the file called something like Page or Single Page.

Static Front Page

Newer versions of WordPress have an option to use a static front page rather than display the latest posts. Since all YAK products will show up as posts, it’s wise to use a static front page. Create a new page that you would like to use for the front of your site (I called mine Welcome). Navigate to Options, then Reading.

Select your page from the list. Voila.

Bring In the Widgets

If you’re a WordPress user, you probably already know about Widgets. They’re slick little drag-and-drop icons that allow for easily changing your sidebar(s). Here is a screenshot:

For an e-Commerce site, Widgets are the ultimate tool. Here are a few ideas: Create a “Featured Product” widget and rotate it out once a week. Create a drop-down list with links to product categories. Add notices about sales or discounts. The possibilities are endless.

Install YAK

Now let’s add YAK, the backbone of our WordPress e-Commerce site. Install YAK as you would any other WordPress plugin (Manage — Plugins — click Activate). Under the Manage menu, you will find a new entry for yak.

At this point, you should configure YAK’s Settings to your needs. There’s a plethora of options, but some of the important ones to configure are:

• Currency Symbol – such as $, £, €
• Money Format – the format of the digits (decimal places)
• Currency Format – a combination of the previous two settings (for the creation of a result such as $100.00)
• Default Country – USA, Canada, Tokelau, whatever
• Product Category Name – Since each product will appear in a post, you need to set a category for your wares. The default is simply products, which works for me.

Note: be sure to also set a value for the Auto Discount option, as by default to offers a slight discount on all items. Set it to the value of 1 if you do not want to automatically offer a discount.

I overlooked this option at first, and this drove me crazy until I noticed it. I couldn’t figure out why none of my prices worked!

When you are finished, click Update Options. Congratulations, you have finished the initial setup and configuration for both WordPress and YAK.

Part III of this series will cover the fun part: adding products to your site and setting up the payment system. Stay tuned.

Update: Part III has arrived.

If you enjoyed this article, please subscribe to receive future updates.

My main requirements for building an e-Commerce site were simple:

• I want the software to be easy to use.
• I want the software to be FREE.
• Bonus: I want the software to offer digital downloads, preferably automated.

Unfortunately, it seemed that those first two notions were diabolically opposed, as all of the software that claimed to “get me running in a matter of minutes” would also quickly separate me from hundreds, if not thousands of dollars. Unacceptable. On the other hand, the few free offerings that I found (such as osCommerce and Zen Cart) left me scratching my head, backing away slowly, and wondering if this endeavor would indeed be worth the effort. Surely there must be a middle ground!

At that point I decided to use the so-called “blogging” software that I know and love, WordPress, to power my up-and-coming site, and I must simply find a way to cram a “shopping cart” down its throat.

After many hours of searching, configuring, testing, and swearing, I ultimately settled on four potential solutions. All of these options are FREE, though some of them offer “paid” upgrades.

Option 1: WP e-Commerce Plugin

WP e-Commerce is the most visible option for setting up a shopping cart. As a plugin for WordPress, installation and configuration is fairly simple. A few of the purported features include:

• Unlimited product and category listings
• A cart that shows slick “alerts” when products are added
• Support for “downloadable” files, such as e-Books
• Integration with PayPal

WP e-Commerce was the first shopping cart option that I tried, and I had high hopes for it, but ultimately I was quite “underwhelmed.” Sure, listing products was easy, and the tight integration with WordPress was nice, but a number of bugs led me to quickly abandon it. For instance, I never did get the “download file after purchase” option to work correctly, nor could I remove a file once I listed it as a “downloadable” option. A quick look at its support forums yields far too many issues for me to put my trust in it. In the end, WP e-Commerce had the most promise, but delivered the least. I sincerely hope it improves in the future.

Option 2: FatFreeCart

Released for free by e-junkie, FatFreeCart is a novel idea: no installation, no significant coding knowledge needed, yet it maintains a perceived integration with any site. FatFreeCart will easily work with WordPress, but since it needs no installation, it will work on ANY site (even those ridiculous social networking sites like MySpace).

To operate it, simply copy a snippet of code, modify the values to match your needs, and insert it by each product that you want to sell. Here is a working demo. Note: Please don’t actually buy this product listed below. It doesn’t exist.

EDIT: Nevermind, the FatFreeCart doesn’t work too well with my current WordPress theme, but that’s a personal problem. See their site for a functional demo.

Pretty neat, huh? I especially like the integration with both PayPal and Google Checkout. I almost decided to use FatFreeCart with my site-in-progress, but ultimately decided against it for perhaps a silly reason: the actual software powering the FatFreeCart resides on e-junkie’s server, and if their server ever goes down, my shopping cart ceases to exist. I’m not sure I’m entirely comfortable with that. Plus, it doesn’t allow for “downloadable” items, which is a selling point for me.

Option 3: Mercantec E-commerce Express

In a similar vein, Mercantec’s “express” offering is a free 3rd-party integration that will work with most any site, whether or not it is powered by WordPress. Like FatFreeCart, much of the configuration is done outside of your regular web site. With Mercantec, you create an account with them, then add items, determine shipping, track orders, and setup payment gateways all on their site. So once again, if their server goes down, your customers will not be able to give you money.

Truth be told, I like the free Mercantec offering so much that I’m willing to forgive that aspect. I appreciate that they offer both PayPal and Google Checkout, and I enjoy the plethora of item options that are available, as well as the ability to create many options/prices for shipping. Here is a screenshot of basic item creation:

Actual integration of the shopping cart only requires generating a few snippets of code and adding them to the desired location on your site. Once again, I almost decided to solely use the Mercantec offering, but it currently lacks support for “downloadable” items. If I had tangible items to sell exclusively, this would be my choice. For what it’s worth, I e-mailed them and requested the option to allow for file downloads, and a few hours later I received this response:

Thanks for your feedback…. We have received several requests to support the downloading of digital goods once an item has been ordered. We have added this to our feature
request list and will strongly consider it when we plan our next release.

In other words, keep your eye on this one.

Option 4: YAK for WordPress (Yet Another Kart)

The final option is YAK. Despite its strange name, I have found it to be quite promising. Of all the options listed, YAK is the only one that is open-source, meaning that the source code is available for anyone (with the know-how) to scrutinize.

Just like WP e-Commerce, YAK is a plugin for WordPress, meaning that installation is simple, but the initial configuration requires some setup time. None of it is particularly difficult, but the actual integration requires that you insert tiny snippets of code and the setting of custom fields to allow for certain functionality, such as the addition of “Add to Cart” buttons and the display of prices. With YAK, each item is listed as a post, meaning that the items are easily “searchable” from the standard WordPress search box. Nice.

Here is a picture of a very simple YAK post in action:

YAK includes a multitude of configuration options, though the only current payment gateway offered is PayPal. I would desperately love to see integration with Google Checkout. And before you ask, yes, YAK allows for the automatic downloading of files after purchase. I’ve tested it, and it works well.

If you can’t tell, I decided to use YAK for my e-Commerce site-in-progress. Part II of this series will detail the initial configuration of WordPress and YAK. Stay tuned.

Update: Part II has been posted.

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