EqualServing

WooCommerce, ActiveCampaign, 1ShoppingCart, Infusionsoft Expertise.

You are here: Home / 1shoppingcart.com / Create a Price Comparison Grid With Plugin

Create a Price Comparison Grid With Plugin

by

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">&#x2713;</td>
<td class="column-3">&#x2713;</td>
<td class="column-4">&#x2713;</td>
</tr>
<tr class="odd">
<td class="column-1">Feature Number Two</td>
<td class="column-2">&#x2713;</td>
<td class="column-3">&#x2713;</td>
<td class="column-4">&#x2713;</td>
</tr>
<tr class="even">
<td class="column-1">Feature Number Two</td>
<td class="column-2">&#x2713;</td>
<td class="column-3">&#x2713;</td>
<td class="column-4">&#x2713;</td>
</tr>
<tr class="odd">
<td class="column-1">&nbsp;</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">&nbsp;</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>

Reader Interactions