Pricing tables are an effective way to present comparable products on a page for your customers to select the product that best fits their requirements.
Using version 1.4 of the premium 1ShoppingCart Plugin for WordPress, makes creating a simple pricing table very easy.
Click here for a live demo of the price chart.
Below is a snapshot of a basic pricing chart:
Here is the CSS required to format the price chart as shown above. Insert the following code into your page or post:
<style type="text/css">
#compareTable .compareTable {background-color: #CDCDCD; border-collapse: separate; border-spacing: 1px; font-size: 8pt; margin: 10px 0 15px; text-align: left; width: 100%;}
#compareTable .compareTable tr.odd {background-color: #FFFFFF;}
#compareTable .compareTable tr.even {background-color: #F0F0F6;}
#compareTable .compareTable td {width: 22%; text-align:center; padding:4px;}
#compareTable .compareTable td.column-1 {width: 34%; text-align:left;}
#compareTable .compareTable td.buynow {padding:12px 2px;}
#compareTable .compareTable td.desc {font-size:.85em;}
</style>Copy and paste the following HTML into your page or post along with the CSS from above to create the pricing chart shown at the top of this page.
<div style="margin-top: 30px;" id="compareTable"> <table class="compareTable"> <tbody> <tr class="odd"> <td class="column-1"></td> <td class="column-2"></td> <td class="column-3"></td> <td class="column-4"></td> </tr> <tr class="even"> <td class="column-1"></td> <td class="column-2"><h2>[es1sc_product_field prd_id='1000001' field='#ProductName']</h2></td> <td class="column-3"><h2>[es1sc_product_field prd_id='1000002' field='#ProductName']</h2></td> <td class="column-4"><h2>[es1sc_product_field prd_id='1000003' field='#ProductName']</h2></td> </tr> <tr class="odd"> <td class="column-1"></td> <td class="column-2 desc">[es1sc_product_field prd_id='1000001' field='#ShortDescription']</td> <td class="column-3 desc">[es1sc_product_field prd_id='1000002' field='#ShortDescription']</td> <td class="column-4 desc">[es1sc_product_field prd_id='1000003' field='#ShortDescription']</td> </tr> <tr class="even"> <td class="column-1">Feature Number One</td> <td class="column-2">✓</td> <td class="column-3">✓</td> <td class="column-4">✓</td> </tr> <tr class="odd"> <td class="column-1">Feature Number Two</td> <td class="column-2">✓</td> <td class="column-3">✓</td> <td class="column-4">✓</td> </tr> <tr class="even"> <td class="column-1">Feature Number Two</td> <td class="column-2">✓</td> <td class="column-3">✓</td> <td class="column-4">✓</td> </tr> <tr class="odd"> <td class="column-1"> </td> <td class="column-2"><span style="font-weight:bold;font-size:1.3em;">[es1sc_product_field prd_id='1000001' field='#ProductPrice']</span></td> <td class="column-3"><span style="font-weight:bold;font-size:1.3em;">[es1sc_product_field prd_id='1000002' field='#ProductPrice']</span></td> <td class="column-4"><span style="font-weight:bold;font-size:1.3em;">[es1sc_product_field prd_id='1000003' field='#ProductPrice']</span></td> </tr> <tr class="even"> <td class="column-1 buynow"> </td> <td class="column-2 buynow"><a href="[es1sc_product_field prd_id='1000001' field='#BuyNowURL']"><img src="/wp-content/plugins/es1sc/images/add-to-cart-white.png" /></a></td> <td class="column-3 buynow"><a href="[es1sc_product_field prd_id='1000002' field='#BuyNowURL']"><img src="/wp-content/plugins/es1sc/images/add-to-cart-green.png" /></a></td> <td class="column-4 buynow"><a href="[es1sc_product_field prd_id='1000003' field='#BuyNowURL']"><img src="/wp-content/plugins/es1sc/images/add-to-cart-white.png" /></a></td> </tr> </table> </div>