Colorful Pricing Table w/ TablePress

Transform TablePress into a beautiful (and colorful) pricing table. Compare products, pricing plans, or anything you can think of!

Free resources included:

  • Custom CSS
  • Graphics / Images

I transformed an image mockup into a full TablePress template. Feel free to reuse this code in your own projects, just don’t repackage or sell it please.

You’ll also like: How to style TablePress with CSS (full tutorial)

Usage:

  1. Add classname ‘pricing-table’ to your TablePress table
  2. Make first row the header
  3. Make last row the footer
  4. Add the CSS code (below) to your theme or directly to TablePress custom CSS

Freebies

  1. Table Demo
  2. CSS Template
  3. Icons (external link)

Demo Table

 BasicStandardAdvanced
$9.99/m$29.99/m$49.99/m
Feature 1
Feature 2
Feature 3
Feature 4
Refund Policy100% guaranteed100% guaranteed100% guaranteed
Buy NowBuy NowBuy Now

The CSS:

.tablepress.pricing-table thead th { font-size: 25px; text-transform: uppercase; color: white; border-radius: 10px 10px 0 0; } .tablepress.pricing-table th.column-2 { background-color: #F5B923; } .tablepress.pricing-table th.column-3 { background-color: #007C48; } .tablepress.pricing-table th.column-4 { background-color: #026F96; } .tablepress.pricing-table .row-2 { font-size: 22px; color: white; font-weight: 700; } .tablepress.pricing-table .row-2 .column-2 { background-color: #FFCA00; } .tablepress.pricing-table .row-2 .column-3 { background-color: #01B48D; } .tablepress.pricing-table .row-2 .column-4 { background-color: #00AAC4; } .tablepress.pricing-table .row-1 .column-1, .tablepress.pricing-table .row-2 .column-1, .tablepress.pricing-table tfoot .column-1 { visibility: hidden; } .tablepress.pricing-table td, .tablepress.pricing-table th { text-align: center; } .tablepress.pricing-table tfoot a { color: white; text-transform: uppercase; display: block; background-color: #FFCA00; max-width: 160px; padding: 3px 10px; border-radius: 100px; margin: 0 auto; } .tablepress.pricing-table tfoot th { background-color: white !important; border-radius: 0 0 20px 20px; } .tablepress.pricing-table tfoot .column-3 a { background-color:#01B48D; } .tablepress.pricing-table tfoot .column-4 a { background-color:#00AAC4; } .tablepress.pricing-table .column-1 { background-color: #eee; } .tablepress.pricing-table td, .tablepress.pricing-table tfoot th { border: 1px solid #ddd; } .tablepress.pricing-table td, .tablepress.pricing-table .pt-icon { vertical-align: middle; }
Code language: CSS (css)

Icons

I get most of my icons from 3 places:

  1. FontAwesome (free)
  2. IconMonstr
  3. Flaticon (free w/ attribution or paid)

In this video, I used free icons from Flaticon (I have a premium subscription)

Leave a Comment