I thought I would show another example of a product price comparison table that can be created easily using the WordPress plugin for 1Shoppingcart.com.
You will need to upgrade to version 1.5 of the premium 1ShoppingCart Plugin for WordPress to use this technique.
Click here for a live demo of the price comparison table.
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">
.products .product p {
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif !important;
margin: 18px 0 9px;
color: #777777;
color: #565656;
line-height: 18px !important;
margin: 0 0 18px;
}
.products .product{padding:16px 16px}
.products .selected.product,
.products .product:hover,
.products .selected.product{padding:13px 13px}
.products .big.product{padding:20px 20px}
.products .big.selected.product,
.products .big.product:hover,
.products .big.selected.product{padding:17px 17px}
.products .product{width:250px;border:1px solid #ccc;background-color:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 1px 10px #ccc;-moz-box-shadow:0 1px 10px #ccc;box-shadow:0 1px 10px #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;cursor:pointer;list-style:none;text-align:center;position:relative;z-index:5;top:20px}
.products .product:after{content:"";display:table;clear:both}
.products .product h3{color:#555;font-size:22px}
.products .product .price-wrapper{color:#aaa;margin:18px 0;font-size:22px;font-weight:normal}
.products .product .price-wrapper .dollar-sign{vertical-align:40%}
.products .product .price-wrapper .price{color:#555;font-size:40px;font-weight:bold;margin:0 2px}
.products .product p{margin:18px 0 9px}
.products .product p.addtocart{text-align:center;}
.products .product .check{display:none;background-image:url(/wp-content/themes/equalser/images/orange-and-gray-check-sprite.png);background-repeat:no-repeat;height:17px;width:18px;position:absolute;top:10px;left:10px}
.products .selected.product,
.products .product:hover,
.products .product.base-package-styles.selected{border:2px solid #728a9a;-webkit-box-shadow:0 1px 10px #999;-moz-box-shadow:0 1px 10px #999;box-shadow:0 1px 10px #999}
.products .selected.product .check,
.products .product:hover .check,
.products .product.base-package-styles.selected .check{display:block;background-position:0 -17px}
.products .selected.product h3,
.products .product:hover h3,
.products .selected.product .price-wrapper,
.products .product:hover .price-wrapper,
.roducts .product.base-package-styles.selected .price-wrapper{color:#999}
.products .selected.product .price-wrapper .price,
.products .product:hover .price-wrapper .price,
.roducts .product.base-package-styles.selected .price-wrapper .price{color:#333}
.products .selected.product{border:4px solid #fe7722;-webkit-box-shadow:0 1px 10px 1px #fe7722;-moz-box-shadow:0 1px 10px 1px #fe7722;box-shadow:0 1px 10px 1px #fe7722;background-color:#fef5ef}
.products .selected.product{border:4px solid #ff9900;-webkit-box-shadow:0 1px 10px 1px #ff9900;-moz-box-shadow:0 1px 10px 1px #ff9900;box-shadow:0 1px 10px 1px #ff9900;background-color:#fff5e5}
.products .selected.product .check{display:block;background-position:0 0}
.products .big.product{width:330px;width:290px;z-index:10;top:0}
.products .big.product h3{font-size:30px}
.products .big.product .price-wrapper{font-size:30px;margin:22px 0}
.products .big.product .price-wrapper .price{font-size:50px}
.products{*zoom:1;margin-top:40px;margin-left:67px;padding-bottom:1em}
.products:after{content:"";display:table;clear:both}
.products .product{float:left}
.products .product.first{-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-ms-border-radius:4px 0 0 4px;-o-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}
.products .product.last{-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-ms-border-radius:0 4px 4px 0;-o-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}
.products a.selected.product{text-decoration:underline}
</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.
<ul class="products">
<li data-package-name="basic" class="first product">
<h3>[es1sc_product_field prd_id='1000001' field='#ProductName']</h3>
<div class="price-wrapper">
<span class="dollar-sign">$</span><span class="price">[es1sc_product_field prd_id='1000001' field='#ProductPrice']</span>
</div>
<p>[es1sc_product_field prd_id='1000001' field='#ShortDescription']
</p>
<p class="addtocart"><a href="[es1sc_product_field prd_id='1000001' field='#BuyNowURL']"><img src="/wp-content/plugins/es1sc/images/add-to-cart-white.png" /></a></p>
<span class="check"></span>
</li>
<li data-package-name="professional" id="big-package" class="big product selected">
<h3>[es1sc_product_field prd_id='1000002' field='#ProductName']</h3>
<div class="price-wrapper">
<span class="dollar-sign">$</span><span class="price">[es1sc_product_field prd_id='1000002' field='#ProductPrice']</span>
</div>
<p>
[es1sc_product_field prd_id='1000002' field='#ShortDescription']
</p>
<p class="addtocart"><a href="[es1sc_product_field prd_id='1000002' field='#BuyNowURL']"><img src="/wp-content/plugins/es1sc/images/add-to-cart-green.png" /></a></p>
<span class="check"></span>
</li>
<li data-package-name="enterprise" class="last product">
<h3>[es1sc_product_field prd_id='1000003' field='#ProductName']</h3>
<div class="price-wrapper">
<span class="dollar-sign">$</span><span class="price">[es1sc_product_field prd_id='1000003' field='#ProductPrice']</span>
</div>
<p>
[es1sc_product_field prd_id='1000003' field='#ShortDescription']
</p>
<p class="addtocart"><a href="[es1sc_product_field prd_id='1000003' field='#BuyNowURL']"><img src="/wp-content/plugins/es1sc/images/add-to-cart-white.png" /></a></p>
<span class="check"></span>
</li>
</ul>
