Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggregation Enquires Welcome

Example Interest Rates: Home Loan Variable: 1.89% (1.9%*) • Home Loan Fixed: 1.84% (2.11%*) • Fixed: 1.84% (2.11%*) • Variable: 1.89% (1.9%*) • Investment IO: 2.05% (4.36%*) • Investment PI: 1.58% (2.72%*)

Responsive Pricing Tables in WordPress (Example)

  FAQ · Blog 

The responsive pricing table on this page supports the article here titled "Simple Responsive Pricing Tables With WordPress Shortcode". The shortcode will render as many responsive columns as are defined, and display as many attribute fields as required. It's a simple example that might be used as a template.

Mote, 25th March 2022: This code is well and truly deprecated so is not maintained. Refer more recent examples.

■ ■ ■

  • Title1
  • $1
  • Row1 Cell1
  • Row1 Cell2
  • Row1 Cell3
  • Sign Up
  • Title2
  • $2
  • Row2 Cell1
  • Row2 Cell2
  • Row3 Cell3
  • Sign Up
  • Title3
  • $3
  • Row3 Cell1
  • Row3 Cell2
  • Row3 Cell3
  • Sign Up
  • Title4
  • $4
  • Row3 Cell1
  • Row4 Cell2
  • Row4 Cell4
  • Sign Up

Shortcode: [pricingtable titles="Title1, Title2, Title3,Title4" pricing="$1,$2,$3,$4" data="Row1 Cell1,Row1 Cell2,Row1 Cell3%%Row2 Cell1,Row2 Cell2,Row3 Cell3%%Row3 Cell1,Row3 Cell2,Row3 Cell3%%Row3 Cell1,Row4 Cell2,Row4 Cell4" colors="#000000,#000000,#FF0000,#000000"]

■ ■ ■

If you were to use the shortcode of index="1" you might consider changing the title background color (or removing style completely). The intention is that you'll create an attribute title on each row.

  •  
  • Feature
  • Attribute1
  • Attribute2
  • Attribute3
  •  
  • Title2
  • $2
  • Row2 Cell1
  • Row2 Cell2
  • Row3 Cell3
  • Sign Up
  • Title3
  • $3
  • Row3 Cell1
  • Row3 Cell2
  • Row3 Cell3
  • Sign Up
  • Title4
  • $4
  • Row3 Cell1
  • Row4 Cell2
  • Row4 Cell4
  • Sign Up

Shortcode: [pricingtable titles="Title1, Title2, Title3,Title4" pricing="Feature,$2,$3,$4" data="Attribute1,Attribute2,Attribute3%%Row2 Cell1,Row2 Cell2,Row3 Cell3%%Row3 Cell1,Row3 Cell2,Row3 Cell3%%Row3 Cell1,Row4 Cell2,Row4 Cell4" colors="#000000,#000000,#FF8040,#000000" index="1"]

■ ■ ■

Any number of rows are permitted (based on the number defined in your data attribute. This table was scaled to 400px with width="400" (defaults to 100%).

  • Title1
  • $1
  • Row1 Cell1
  • Row1 Cell2
  • Row1 Cell3
  • Sign Up
  • Title2
  • $2
  • Row2 Cell1
  • Row2 Cell2
  • Row3 Cell3
  • Sign Up

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on reddit
Reddit