and like us on FB

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

A comma separated list of column titles.

pricing

A comma separated list of pricing titles. If you’re including an index column, use the column index or simply leave the title out.

data

All column data should be included in a comma delimited list. All new columns should be separated by two percentage signs (%%).

text

The button text. We use ‘Sign Up’ by default.

colors

The colors are the title background colors. Use in a comma delimited list.

links

The links for each button in a comma delimited list.

color

The color is the background color of the pricing and button cell. Defaults to #EEEEEE.

cellcss

To apply specific style to a cell, include it in here. Defaults to text-decoration: none;.

buttonsize

The size of the button text.

headertextsize

The size of the header button text.

pricingsize

The size of the prizing size text.

index

To include an index column, use index="1". The first block of text in your data string should be the attribute titles.

width

By default the width of the container is 100%. To alter, use width="400". You’ll have to style the container to float appropriately.

cache

We use the tables for dynamic data so we only cache for a couple of hours. We use Simple Cache to store the results as plain text. It’ll cache for 28 days by default. If it’ll never change you can happily cache indefinitely.

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.

Download

Title: Simple Responsive Pricing Tables With WordPress Shortcode
Description: Simple Responsive Pricing Tables With WordPress Shortcode. Includes a number of customization options.
Download: Shortcode (V0.1) | | Plugin Page

Shortt URL for this post: http://shor.tt/Ejj