Pricing tables render as a visual comparison of product features to better assist your user determine what product might be a best fit for their needs. One pricing option is normally highlighted in some manner to reflect "best value" for the customer, and to increase upon that product's conversion. The basic comparison table uses columns for the products or services, and rows for the attributes. It allows for quick and easy comparison between each product/service feature and/or characteristic.
This article will provide you with a super-simple responsive pricing table that may easily be embedded into any WordPress post or page. The number of columns, rows, and other features are customization. It's more of a starting point than a complete solution. Using a mix of scoped style, inline styling, and the numerous shortcodes makes it a far-than-ideal solution for many projects. It should, however, indicate how unnecessary plugins are for the purpose of such simple features.
The Result
The three rows of default values may be returned with the shortcode of [pricingtable]. The result:
- 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
Adding data isn't without complexity and likely confusion. I picked a random hosting website and have reproduced their pricing packages below. The shortcode of (yeah, it's long) is as follows: [pricingtable titles="Beginner,Small Business,Large Business" pricing="$7m,$15m,$27m" data="1 Email Address,1 MySQL Database,500GB Storage,5GB Bandwidth,Webmail%%5 Email Address,5 MySQL Database,2000GB Storage,25GB Bandwidth,Webmail%%25 Email Address,15 MySQL Database,5000GB Storage,100GB Bandwidth,Webmail"]
- Beginner
- $7m
- 1 Email Address
- 1 MySQL Database
- 500GB Storage
- 5GB Bandwidth
- Webmail
- Sign Up
- Small Business
- $15m
- 5 Email Address
- 5 MySQL Database
- 2000GB Storage
- 25GB Bandwidth
- Webmail
- Sign Up
- Large Business
- $27m
- 25 Email Address
- 15 MySQL Database
- 5000GB Storage
- 100GB Bandwidth
- Webmail
- Sign Up
Note that the rows of attributes are separated by commas, and double percentage signs between columns. You may alter this if you choose to actually use commas in your text. It's the data field that determines how many rows are rendered.
See more pricing comparison examples here.
Shortcode Attributes
There's a large number of attributes. It's expected that you'll alter the defaults to your liking. In real-world use it's unlikely that you'll have more than a couple of comparison tables on your site.
titles
pricing
data
text
colors
colors are the title background colors. Use in a comma delimited list.links
color
color is the background color of the pricing and button cell. Defaults to #EEEEEE.cellcss
text-decoration: none;.buttonsize
headertextsize
pricingsize
index
index="1". The first block of text in your data string should be the attribute titles.width
width="400". You'll have to style the container to float appropriately.cache
Considerations
- Your website visitors will compare your product against your competitors, but also want to compare your own products against each other. They are an extremely valuable resource that shouldn't be overlooked.
- We used this comparison chart initially for mortgage broker products (with exceptional results for a product comparison site) before switching to a grid-style rendering.
- See additional examples here.
- It's expected that you will paste the appropriate CSS into your custom functions CSS file, and alter the shortcode for your specific needs.
- Maintaining a product database is obviously the preferred method of retrieving products for comparisons.
