Right out of the box WooCommerce creates a shop page and displays a grid of products which works quite nicely for stores with dozens of products. But what about the stores that only have one or two products? Or just one product with a couple different levels? Sometimes it's best to have a single page that lays out the pros and cons of each product rather than a grid of products. You can easily add a pricing table to WooCommerce with Easy Pricing Tables freely available on WordPress.org.
Adding a Pricing Table
Add Your Product Information
Once you've created your table you have to add the features of your product. Add one feature per line and the plugin will format them on the front end. A key to creating good pricing tables is to only show differences between plans. If there are similarities between all plans then it's best to describe that feature in the content above or below the pricing table.
Add Your Button URL
http://mysite.com/?post={number}
.
Once you have the product ID you can then make your button URL by adding ?add-to-cart={product-id}
to any url in your store. So if your site is patricksawesomeblog.com and your product ID is 101 then your button url would be http://patricksawesomeblog.com?add-to-cart=101
.
I would suggest using your cart URL for this. It's a nicer experience to add something to your cart and then be redirected back to the cart rather than stay on that product page.
Feature Your Preferred Plan
Organize Your Columns
You can add up to 10 columns and drag & drop the columns to organize them any way you want. A good practice is to order them highest to lowest.
Order your pricing plans from left to right by most expensive to least expensive, so that you’ll immediately expose users to the high pricing plans that they would otherwise ignore.
– UXMovement
Create a Product Page
Now that we have the table ready to go we need to save it, copy the shortcode, and put it on a page. Create a new page add some content about your plans and then paste the shortcode on the page.
Change the Appearance of the Table
The pricing tables look pretty good already but you may want to tweak them to make them match your brand. The awesome news is that all of this is possible via the plugin settings. Just switch to the Design tab and tweak away. There are dozens of settings. In my case I like purple so I wanted to add that in there and I also wanted to change “Most Popular” to “Best Deal”.
Going the Extra Mile
The pricing table looks pretty great already but we can do a few extra things to make the whole experience even nicer.
Hide the Product on the Shop Page
Using Products with Variations
If you want to use a variable product instead of using multiple simple products you'll have to add a little bit extra information to the url. Remi Corson has a great tutorial on adding a variation to the cart.
The Final Product
After all of the installing, writing, creating, and tweaking here's the final product. Pretty awesome.
Easy Pricing Tables Pro
If you like the idea of using pricing tables but you want additional styles there's a pro version available with five extra styles and a couple extra really nice features like Google Analytics event tracking.