Pricing Tables
November 20, 2014 | 44 Feedbacks

Pricing Tables

Simple responsive pricing tables, in 3 different styles and with a bouncy animation while switching to different plans.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

A ready-to-use pricing table is one of those resources to have in our toolbox. They are not particular challenging in terms of design and user experience, yet they represent a key section of our web page: it’s where the potential client takes action.

We put together an easy-to-customise pricing table, in 3 different styles. Besides we integrated our popular Bouncy Content Filter as transition while switching from one plan to another.

On small devices we took a new approach: instead of listing all the features vertically – which would force the user to scroll a lot to go past the pricing section, we listed them horizontally. This way we save a lot of space; users can compare all the prices at a glance, and they can dive deeper into the features if interested.

Creating the structure

The HTML is structured in 2 blocks: a div.cd-pricing-switcher containing the filter, and a ul.cd-pricing-list, containing the pricing tables. Inside each list item of the .cd-pricing-list  we nested a second ul element (the one which rotates) containing the pricing tables as list items.
Each pricing table is made up of a .cd-pricing-header (containing plan title and price), a .cd-pricing-body (containing plan features) and a .cd-pricing-footer (containing the action button).

Adding style

On small devices, the .cd-pricing-footer is in position: absolute and placed over the .cd-pricing-header to cover it (we assigned the same height to both elements). The action button has a display: block and height: 100% so that it has the same dimension of the table footer (the pointer-events: none assigned to the .cd-pricing-header assures that the button is clickable).
The .cd-pricing-body has overflow-x: auto to hide part of the ul.cd-pricing-features element – whose width could be higher.

On desktop devices (viewport width more than 1170px), the css is pretty straightforward (you can find additional comments in the scss/css file for the tricky parts).

One important note : we created 3 classes to customise the pricing tables (all classes have to be applied to the .cd-pricing-container element):

In our demo we created 3 different table styles : the first is the default one, the second is obtained adding to the .cd-pricing-container both .cd-full-width and .cd-second-theme classes, and the last adding the .cd-tables-have-margin class.

One important note: the styles associated to these 3 classes differ on desktop devices only.

Additional note on the bouncy animation: as pointed out in the comments, if you have only 2 switching options (in our demo ‘Monthly’ and ‘Yearly’), it feels more natural to invert the rotation direction while switching from one option to the other. For this reason, we created the .cd-bounce-invert class to be added to the ul.cd-pricing-list. If you have more than 2 options, just remove this class and the rotation will preserve the direction.

Events handling

For the pricing table rotation, you can check what we did for the Bouncy Content Filter.
Besides, we used jQuery to remove the subtle gradient on the right side of the pricing table body (mobile version only) – that we added to indicate that there’s more content – at the end of the scrolling.

Changelog

Nov 25, 2014
  • Added .cd-bounce-invert class - invert rotation direction while switching from one option to the other
  • Download file - added version without switcher
Nov 20, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Seito

    Good stuff!

  • Ricardo

    Simple yet so effective, I like it! I also enjoy the added mobile responsive styles that CodyHouse always focus on. As a web developer with almost no creative mind, I really appreciate those who are more creative than me :) CodyHouse has great tutorials, and is always my go to place when I need design inspiration, keep up the good work.

    • http://codyhouse.co Claudia Romano

      Thank you Ricardo! :)

  • Borteo

    Great job!

    My 2 cents: when you select ‘Monthly’ from ‘Yearly’, the flip animation should be the other way around. Which means from right to left (-180deg). I reckon it’d look more natural :)

    • http://codyhouse.co Claudia Romano

      Hey Borteo, thanks for the suggestion! I totally agree on that. We’ll update the resource asap ;)

  • http://dnomak.com/ Doğukan Güven Nomak

    claudia please check out http://flexible.gs :)

  • Sarah Bennet Mills

    Great job Claudia. We have featured it here at http://www.byteswire.com/fresh-tools-of-the-week-n-7/

  • http://www.gbtags.com terry

    very good article

  • Cheky Van Basten

    Amazing, Top Job… Good Luck =D

  • Steve Topper

    Hi, I love this, I have a question is it possible to have 4 prices side by side, instead of 3? I tried adding one but it appears underneath even on a large monitor.

    Any help is appreciated.

    • http://codyhouse.co Claudia Romano

      Hi Steve, glad you like it! You need to change the list items width in order to add a new one.

  • http://www.androidreviewblog.com/ omurphy

    Sweet effect as usual. I’m shamelessly using it in a new website.

    • http://codyhouse.co/ Sebastiano Guerriero

      Enjoy mate ;)

  • http://capital-theme.net Human.A

    Perfect perfect design, I love it.

    There is one important point NOT mentioned in the article that is the inputs and their labels must have uniquely named id=”” and for=”” values respectively.

    I added three separate price lists in one page and then realized when I click on the switch button only the first price will switch between monthly and yearly, gave me a headache to realize that it was not a js issue. So I used PHP to give the labels and the inputs a uniquely generated id=”” and for=”” value to make it work. Thought might save someone else from wasting 1 hour of valuable time.

  • Karthik Siddabatthula

    Hi..
    Please could you please let me know how to add this table to wordpress installed website?
    I’ve tried copying the css code in ‘wp html text widget’ but it’s not working..

  • giorgiokatr

    Hi great job!
    If you select the yearly tab and then refresh the page
    the yearly tab stays selected but it displays the content of the monthly
    tab

    • http://codyhouse.co Claudia Romano

      Hi, make sure you don’t have any cookies storing that option

      • giorgiokatr

        Thank you Claudia! Ι cleared the cookies in your demo. It only resets back to normal if i close the browser and reopen it!

  • Oliver

    Hi Claudia,

    I have been asked to find a pricing plan switcher and I really like this one. However I couldn’t get it to work on my WordPress website.

    I followed the instructions and the pricing tables appeared, but the annual pricing table appeared below the monthly tables. Also there was no toggle to switch between the two pricing options.

    Can you help me? I’m not sure what I’ve done wrong.

    Regards,

    Oliver

    • http://codyhouse.co Claudia Romano

      Hi Oliver,
      glad you like it! Make sure to include the style.css file and the proper html ( if the switcher is missing, you probably didn’t include it in your page). Hope this helps!

  • legolass73

    hello I would like to know how does your selection for three, for example daily, monthly and yearly, thank you

  • amin islam

    madam. please make video tutorial.

  • http://www.facebook.com/sabia.njoya Sabia Njoya

    Thank you so mch for this website.I will follow you on twitter right now ! llol !

  • melvins138

    This is a great solution! Thank you so much for creating it. One question: how can I get the animated floating background on Pricing Switcher options from two (Monthly, Yearly) to three? I have adjusted the width of each cd-pricing-switcher label and cd-pricing-switcher .cd-switch to match the longer titles I have, which is 150px. Yet, I can’t figure out how to adjust the .cd-pricing-switcher input[type=”radio”]:checked + label + .cd-switch, .cd-pricing-switcher input[type=”radio”]:checked + label:nth-of-type(n) + .cd-switch to work with three. I have adjusted the transform to 150px to match, yet when I select the second option, the floating background doesn’t movie, but will but only over 150px when I select the third option. How can I fix this? Thanks in advance.

    • Shubham Dogra

      Hello, I think it wont be able to adjust with switcher. So I moved to labels. You can remove the switcher and add this to css.

      .cd-pricing-switcher input[type=”radio”]:checked + label {

      color: #fff;

      background-color: #009CB8;

      border-radius: 50em;

      -webkit-transition: -webkit-transform 0.5s;

      -moz-transition: -moz-transform 0.5s;

      transition: transform 0.5s;

      }

      • Sami Ullah

        Shubham can you explain me that how can I add this table into my wordpress website ?

  • David Cross

    I just need two pricing tables, centered but when I remove a table the others to shift to the left. What do I need to change please? Thank you.

    • http://codyhouse.co Claudia Romano

      Hi David, you should try changing the width of the .cd-pricing-list > li elements (50%). That should work!

      • Sami Ullah

        Kindly help how can I add this table into my wordpress website !

  • Douglas Marzean

    Loving this pricing table. Have one issue I can ‘t seem to resolve. I can’t get the switcher to style properly.

    • http://www.netkandi.co.uk/ Netkandi

      Did you ever find out how to fix this?

  • http://www.lightbox.com.ni/ Nestor Jaen

    nice code

  • http://www.splinterteal.co.uk/ Freelance Web Designer

    pretty sweet demo

  • Sami Ullah

    how can I put downloaded files into my wordpress ? or which code should I paste into my page ?

  • Sami Ullah

    Kindly help how can I add this table into my wordpress website !

  • Prabhjas Singh Bajwa

    Hye,

    Beautifully explained. Could you please help me to create this table on wordpress website. As, I’m unable to use these codes over their. Please respond back.
    Thanks.

  • Daniel Morales

    Hi, im new to webdesign. Im from Venezuela, and i would like to use this for my website, currently my plans are: 1 month,3 month and 12 month. I want to adapt it to my Adobe muse template. Can you please help me ? thanks !

  • BHB

    Anyone have experience getting this to work well in Squarespace?

  • http://www.netkandi.co.uk/ Netkandi

    Would anyone be able to assist me in installing this into a Drupal 7 site please?

  • Silas Selekane

    hi, i am looking for price table similar to the one on the link: https://www.isignite.co.za/wizard/InternetAccess/Products?tab=%23CappedDSL

  • Chase

    Anyone able to assist on how I could do this in weebly?