Add a Simple Pricing Table to Your Theme Without a Plugin

On several occasions I have been contracted to add a really simple, no bells & whistles type pricing table for website owners who sell products and services. This is a really easy way to do it.

This tutorial will have you modifying your themes style sheet. If you are unfamiliar with modifying your style sheet or you do not want fuss with adding the pricing table CSS directly into your current theme, you can install and activate the Simple Custom CSS plugin first. However, you do not need a plugin to use these instructions.

Add the Pricing Table CSS

The next thing you want to do is add the pricing table CSS by selecting the “View Raw” link at the bottom right of the code. You will want to highlight all of the code, then copy/paste the code into the Simple Custom CSS box. Save it.

Add the Content

Now we need to add the content that you will modify with your prices, list content, etc. If you have an existing page, you will only need to add this to that page. If not, you can create a new page. In either case, you will need to click the “Text” tab on the Edit screen before pasting your code. Again, select the “View Raw” in the bottom right corner of the code below. Highlight, then copy/paste the content into your page.

Edit the Content

You can clearly see the items you will need to modify in the content. Switching from Text to Visual will also show you the information that you can replace with your own content. But using Text may be a better way to make sure you code stays in tact.

To link the “Sign Me Up” button to a purchase page, eCommerce shopping cart, or other payment source – replace the pound (#) sign only on lines 10, 21 and 32 in the “href” with the appropriate URL.

That’s it! You are all done.