• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

EqualServing

WooCommerce, ActiveCampaign, 1ShoppingCart, Infusionsoft Expertise.

  • Services
    • Build Websites
    • Task Automation
      • ActiveCampaign Marketing Automation
      • Process Automation with Infusionsoft
    • Website Content Migration
    • Service Bundles
    • Third Party Software Integration
    • WordPress Plugin Development
  • About Us
  • Contact
  • Blog
  • Shop
    • Service Bundles
    • WordPress Plugin For 1ShoppingCart.com V2.0
    • WordPress Themes
    • All Our WordPress Plugins
  • Support
    • FAQ – 1ShoppingCart Plugin For WordPress – GENERAL
    • FAQ – 1ShoppingCart Plugin For WordPress – FREE
    • FAQ – 1ShoppingCart Plugin For WordPress – PREMIUM
    • Contact Support
You are here: Home / 1shoppingcart.com / Create a Price Comparison Grid With Plugin

Create a Price Comparison Grid With Plugin

September 18, 2012 by Michele

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>

Filed Under: 1shoppingcart.com, Wordpress Plugin

Primary Sidebar

Help / FAQs

  • 1ShoppingCart Plugin For WordPress – GENERAL
  • 1ShoppingCart Plugin For WordPress – FREE
  • 1ShoppingCart Plugin For WordPress – PREMIUM

Footer

Stay Connected

Stay up to date with the latest news, product announcements, and more by signing up for our email newsletter. Don't forget to follow us on your favorite social sites as well.
  • Email
  • Google+
  • LinkedIn
  • RSS
  • Twitter
  • YouTube

Contact Us

EqualServing

46 Amethyst Rd
Palmyra, VA 22963

727-490-7443 https://www.equalserving.com/wp-content/uploads/2013/11/eslogo_300x60.png $$
Email :: Plugin Support
  • ActiveCampaign
  • How To
  • WooCommerce
  • WordPress Explained
  • Resources and Recommendations

Copyright © 2021 · Web Development :: EqualServing.com on Genesis Theme Framework
» You will find affiliate links on this site. When we find a company or individual that consistently delivers a high quality product or service, we will become an affiliate. «