Download Personify, our first Genesis Framework Child Theme. It's FREE

More Info

How to Add Responsive Pricing Table in WordPress

In you’re running a business site, pricing table is a great marketing tool to help users to make wise comparison on which package they should buy or subscribe to.

In today’s tutorial, we’ll show you how to add a responsive pricing table to your WordPress site in few steps. Generally, a pricing table can be created using some HTML markups and a bit of CSS to customize it. However, it’s a bit hacky for non-tech savvy users and therefore we’ll be using Easy Pricing Tables plugin instead.

Easy Pricing Tables plugin is a free WordPress plugin and once it is activated, you’ll see a new menu to add a new pricing table on the left sidebar of your dashboard.

While some other plugins allows you to add the pricing table using a shortcode, when you’re having a table with lots of details about the products, the shortcode will become too long and very confusing. Unlike other plugins, Easy Pricing Tables plugin comes with an intuitive settings page to create a pricing table in matter of seconds.

Easy Pricing Tables

Some features of this plugin are:

  • Intuitive settings page
  • Responsive design
  • Drag and drop column to make it even easier to sort the columns
  • Basic settings to customize the design
  • Ability to feature a most popular package (or column)
  • Easy to use shortcode

The plugin allows you to create unlimited number of pricing tables and each pricing table will have its own shortcode that can be used in any post, page or even widget. However, to use the shortcode in the text widget, make sure you’ve enabled the use of shortcode in WordPress widget.

Here’s an example of the pricing table we’ve created with the plugin:

Pricing table

Overall, the plugin is very easy to use and comes with decent default design. If you’d like to customize it to your liking, the design settings page will help you to do that. For advance customization, you may use Firebug to inspect the element and overwrite the CSS code with you own CSS code.

Comments

  1. Keith Davis says:

    Easy Pricing Tables plugin looks good and as you say… with a little additional CSS.

    Don’t need it now, but one to remember for the future.

  2. very easy to use WordPress plugin.. Can you tell me how to psd pricing table in a WordPress post ? I want to add psd in a format through which anyone can’t copy it..

    • Which no one can’t copy it? I think it’s not possible, unless you ask the readers to pay for it so only certain people have access to it. You can compress it as .zip format if you want to distribute a psd file.

  3. Keith Lockhart says:

    You could use Image Widget to hold the image, and link it to your checkout page. You would probably have to convert your PSD image to something a bit more web-friendly like jpeg or png, but that should be very doable.

    Not sure you will accomplish much. Screen capture has been around for quite a while, and you won’t get around that with a picture ruse.

    • That’s probably not the best option, based on these two reasons:

      1. Image will increase the loading speed of your site. That’s the reason more people opt for using Icon Font instead of image.

      2. It’s not flexible. What if you want to change the price in future or just want to change the price temporarily (for promotional offer), then you have edit the image and upload it back to the site. That is a lot of work to do.

  4. David Hehenberger says:

    Hi,
    Plugin author here. Thanks for mentioning Easy Pricing Tables.
    - David

    PS, we’ve just launched a premium version of the plugin at http://easypricingtables.com. Let me know if you’d like to give it a try.

  5. Best end nice plugin i like it…

Leave a Comment

*