• Skip to main content
  • 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 Another Price Comparison Table With Plugin

Create Another Price Comparison Table With Plugin

September 27, 2012 by Michele

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(https://www.equalserving.com.cdn.cloudflare.net/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>

Filed Under: 1shoppingcart.com, Wordpress Plugin

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. «