Using Our Plugins

Update 2017/08/03: This post has been updated for version 2.0 of the plugin.

We are in the midst of the holidays and we thought we should spend some time creating a product display that could be easily used for the holidays.

This example takes advantage of the display_format option within the shortcode so that the display on this particular page is uniquely different from the default.

[es1sc_prodlist sort="productname" prd_ids="18393778,18394389,18394274,18394138,18393579,18393992" display_format='<p>#ProductImage</p><h3>#ProductName</h3><p>SKU: #ProductSku<br />#ProductPrice#BuyNow<br />#TBMoreInfo</p>']

On the demonstration page, we have also included the CSS we used for this particular display should you want to copy and use it.

Click here or the image below to see a demonstration of that holiday display.

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>

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>

For all those 1ShoppingCart.com users that are struggling to display some of the POST variables sent from 1Shoppingcart.com to your WordPress pages, there is a easy way.

Jeremy Shapiro of Asandia has created a plugin called URL Params that is perfect for the job.

Once the plugin is installed you can use the following shortcode to display variables sent from a signup form and/or order/purchase form –

[urlparam param="{the post variable}" default="{a string to display if the variable is not found}]

Say for example you want to display the following on a page thanking people for purchasing access to your webinar and provide additional information about the event –

Thank you Customer Name for registering for our Online Webinar. Your purchase confirmation and event details have been sent to your email address, Email address. We look forward to seeing/hearing from you on the 15^th at 9:00am EST.

You would enter the following within the page –

Thank you <strong>[urlparam param="Name,name" default="Not on file" /]</strong> for registering for our <strong>Online Webinar</strong>. 
Your purchase confirmation and event details have been sent to your email address, <strong>"Email</strong>.
We look forward to seeing/hearing from you on the <strong>15<sup>th</sup> at 9:00am EST</strong>.

The default value in the shortcode is a nice feature because if the variable is not found in the query string, the default value will be displayed.

While working on this issue, I did learn that “name” (lower case) is a reserved word in WordPress which means WordPress blocks it (thanks earthtracker). Therefore using name in the query such as –

http://www.example.com/?name=Joe Smith&email1=me@example.com

will generate a 404 error. If your thank you page is being redirected to a 404 error rather than rendering, you can prevent the block by adding the following line to your wp-config.php file.

unset($_GET['name']);

If you follow this link https://www.equalserving.com/test-thank-you-page/?Name=Joe%20Smith&email1=joe@example.com, you will see a demonstration of this explanation. Please notice the items in green font are retrieved from the query string.