As I’ve been working on the Elegant PURL plugin site, I decided I wanted to sell premium versions of the plugin. The lite version would still be free over at WordPress.org but I wanted two versions available on the site. That meant setting up a little bit of e-commerce which didn’t frighten me because I knew I was going to use WooCommerce. The challenge I did have, however, was that the standard WooCommerce approach defaults initial routing to the /shop sub-directory and that would display the classic Products Page – which, for my needs, was useless. After all, my product definition page as you can see is a pricing grid.

No Need For a Grid

Not every e-commerce solution is going to be sold off a products grid. If you’re in retail you will like it, but what if you’re selling software. What if you’re selling a single product, with a few variations. Do you want those variations handled in a drop down like a t-shirt size? Not likely. So in this case, I wanted a pricing grid. That pricing grid looks pretty good because I used a plugin called CSS3 Web Pricing Tables Grids For WordPress, which you can find on CodeCanyon for $15. Sure, I could have coded it myself but for $15, I most certainly couldn’t have coded it in 6 minutes. So I bought it and filled in some of the fields and was done in no time.

Step One: WooCommerce Settings

One of the first things I did in the WooCommerce settings was select the option that would take users to the shopping cart after putting something into their cart. This was critical because I wanted people to go from the pricing grid to the shopping cart, and this setting let me do it. While there I also turned off shipping, tax, and determined which payment gateways I would support (in my case it was Stripe).

Step Two: Add Products

In this case, I didn’t have to enter products as much as product variants. But the issue is that for each column in my pricing grid, I was going to need a button that would put that version (with a unique name) into the shopping cart. So I went into WooCommerce Products and added the two product versions I’d be selling.

Step Three: Putting Items into the Cart

Because that products page has all the “add to cart” buttons on it, it was a perfect place to grab the urls for each product. These urls went into my pricing grid at the bottom, for the url of the ‘buy now’ buttons. And because the setting in WooCommerce directs people to their cart after the item is selected, the expected experience would be perfect. I tested it and it worked.

Problem One: The Empty Cart

But everything wasn’t perfect once I deleted the product from the cart. I was then left with an empty cart. And the empty cart has a button that says something like “continue shopping” but it takes people back to the products page. The page I’m trying to get rid of. So that meant finding out where to make the adjustment, and the empty cart is displayed via the logic of /templates/cart/empty.php. So that’s where I went. And that’s where I found the code that needed to be changed. Look for the text, ‘woocommerce_get_page_id(‘shop’)’ because that’s the code that Woo is using to to into the settings and look for your shopping page. I left the shopping page, but overwrote this line completely to route it to my pricing page. Now people would be redirected to the pricing page when they wanted to continue to shop. NOTE: There may be other ways to solve this, but this instance of WooCommerce is only going to support this product on this site, so I didn’t need any solutions that were more complicated.

Problem Two: The Cart Widget

The second issue came when I put the cart widget in the sidebar. It’s a great little widget but it wants to send people to the product page for each product in the cart, and I wasn’t going to have any of that! So it was time to adjust the woocommerce code again. And again, it’s a really simple tweak, if you’re doing what I was doing.  This time the code is in /widgets/widget-cart.php.  As you read the code, you’ll look for this line: echo ‘<li><a href=”‘.get_permalink($cart_item['product_id']).’”>’; That’s the line that puts the url for each product into the link of the listed products in the cart. And that means it’s a line I want to hard code to my pricing page. So where it puts in the ‘get_permalink’, I made the change to the /pricing page again. Pretty fast and simple.

Last Issue: The Non-Empty Cart

I thought I was done. I was pretty happy with the results. And then I kept testing and found that when I put items into the cart, the products were taking users back to their product page (if they clicked on the link). Oh oh. I love WooCommerce but it seemed hell bent on focusing on the product list/product detail page paradigm and I didn’t want that for this site. So up came Coda2 (my IDE on a mac) and I went back into/templates/cart/cart.php and started reviewing the code. On the page, you’d need to look for this comment, ‘<– Product Name –>’ to know you’re in the right place. Once there, you’ll see that WooCommerce is basically building the code for the cart’s contents. It’s already handled the remove icon, the thumbnail image, and now it’s time to put the name of the product in place (with it’s url). So that’s where you look to make a change. And it comes in the second parameter of the string it’s building. Look for esc_url and you’ve found it. Inside that parameter there’s a call toget_permalink, and inside that, a call to apply a filter. All that  can go. Instead, inside the esc_url(), I put (and you have to use single quotes here), ‘http://elegantpurl.com/pricing‘ and it was all done. NOTE: The site isn’t selling yet, because I have to bind the SSL certificate before I can take it out of test mode. But it’s coming soon!

Why I Love WooCommerce

You would think that with all the above changes I might have something to complain about with WooCommerce, but it’s completely the opposite. WooCommerce is so cleanly written, so easily understood, that I could make these changes in virtually no time at all. Most of the commerce solutions for WordPress have similar challenges in that they’re coded to solve one or two kinds of commerce – but trust me, none of them can get it all perfect. That’s not the issue. The issue is how well you can modify the code, in isolated places, so that you can have it do what you want. And in the case of WooCommerce, it wins the prize!

Want a few other Tweaks?

Here are two articles you might like:

• Three Easy Tweaks to WooCommerce
• Using WooCommerce as a Catalog