Patrick's Programming Blog

How to Create a Pricing Table for WooCommerce

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

Once you install the plugin you'll see a new menu item called Pricing Tables. The pricing tables work just like WordPress pages and posts so you can easily add a new one and then add the pricing table content.

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

Writing the name, pricing, & plan features should be pretty easy since you can copy what you already have on the product page. But the button url is a bit different. The first step is to find the product ID. You can find this on the product page in the url. It will look something like 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

You want to make things easy for your users right? Then guide them to the option that's best for them. This plugin gives an option to feature one plan. The plugin has prebuilt special styling for the featured 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.

 Now you can preview the page and see your table. Looks pretty awesome right?

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

If you only have this one product then make sure to hide the shop page. Remove that page from your menus entirely. If you still have other products then you can't hide the shop page but you can still hide the product itself from the shop page. There's Catalog visibility setting in the Publish window on the Edit Page 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.

Exit mobile version