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%).
