EqualServing

WooCommerce, ActiveCampaign, 1ShoppingCart, Infusionsoft Expertise.

Blog Archive

You are here: Home / Blog Archive

Blog Archive

WooCommerce – State Drop Down White Font on White Background

by

I spent way too much time this morning trying to figure out which piece of CSS was causing the moused-over element in the Country and State drop downs on my checkout page to disappear. By default, the font color for the moused-over elements is white (#ffffff). When rendered on a white background, the moused-over (or highlighted) element disappears.

WooCommerce uses the Chosen jQuery plugin for both of these drop downs. I am also using the Genesis framework and found to correct the problem I had to add the following to my theme’s style sheet.

#content ul.chzn-results li.highlighted {
    color: #E8192E;
}

I hope this helps someone else in the future.

Holiday Deal Product Display

by

You have seen many sites offer 10 Days or 24 Days of Christmas offers using holiday graphics and colors.

I thought I would create a product deal display using the 1ShoppingCart Plugin for WordPress. The snapshot below shows the format that I chose which mimics the Daily Deals that SitePoint.com is offering during the 2012 Holiday Season.

<div id="holiday-deal">
<div class="inner">
<div id="inner-left">
<div class="inner">
<img class="prodimg" src="https://www.mcssl.com/[es1sc_product_field prd_id='1000001' field='#ProductImage']">
<h2>[es1sc_product_field prd_id='1000001' field='#ProductName']</h2>
[es1sc_product_field prd_id='1000001' field='#LongDescription']
</div>
</div>
<div id="inner-middle">
<div class="inner">
<span class="regular">Was [es1sc_product_field prd_id='1000001' field='#ProductPrice']</span>
<span class="sale">Now [es1sc_product_field prd_id='1000001' field='#SalePrice']</span>
</div>
</div>
<div id="inner-right">
<div class="inner">
[es1sc_product_field prd_id='1000001' field='#ShortDescription']
<p>Product #: [es1sc_product_field prd_id='1000001' field='#ProductId'] - SKU: [es1sc_product_field prd_id='1000001' field='#ProductSku']</p>
<p>[es1sc_product_field prd_id='1000001' field='#ProductName'] <strike>Was [es1sc_product_field prd_id='1000001' field='#ProductPrice']</strike> -> Now [es1sc_product_field prd_id='1000001' field='#SalePrice']</p>
<p style="text-align:center;"><a class="button" href="[es1sc_product_field prd_id='1000001' field='#BuyNowURL']">Buy Now!</a></p>
</div>
</div>
</div>
</div>

The style sheet I used follows:

<style type="text/css">
#holiday-deal {background: url("/wp-content/themes/minimum/images/holiday-bg.png") no-repeat scroll 20px -155px #208245;height:680px;}
#holiday-deal .inner {padding: 12px;}
#holiday-deal p, #holiday-deal span {font-size:12px;}
#holiday-deal #inner-left, #holiday-deal #inner-right {background: none repeat scroll 0 0 #FFFFFF; border-radius: 7px 7px 7px 7px; float: left; margin-left: 0; width: 40%}
#holiday-deal #inner-middle {float:left; margin: 20px 2.5% 2.5%; width: 15%;text-align:center;}
#holiday-deal #inner-middle span {border-radius: 7px 7px 7px 7px; margin-bottom: 40px; padding:10px; text-align:center;font-size:22px;color:#fff;display:block;}
#holiday-deal #inner-middle span.regular {text-decoration:line-through;font-weight:bold; background:none repeat scroll 0 0 #666666;}
#holiday-deal #inner-middle span.sale{font-decoration:strike;font-weight:bold;background:none repeat scroll 0 0 #E2414E;}
#holiday-deal a.button {-moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #E2414E;
   border-radius: 5px; color: #fff; font-size: 24px; padding: 11px 30px 10px; text-align: center;
   width:80%; display:block; }
</style>

Product Display Possibility For Holidays

by

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.


es1sc holiday screenshot

Create Another Price Comparison Table With Plugin

by

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>

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>

Conditional Testing Now Available in Premium 1ShoppingCart.com Plugin for WordPress

by

You can now test whether the following conditions are enabled –

  • HasShippingCalculation
  • IsTaxable
  • IsFeaturedProduct
  • IsDiscountEnabled
  • IsValid
  • UseSalePrice
  • IsActive

If any of the fields are on (checked or enabled), you can added special formatting to the product list or product detail display.

This feature is helpful if you want to add special CSS to a product if it is on sale or a featured item in your catalog.

More details can be found on our support site – conditional testing.

Sending POST variables to WordPress based Thank-You pages

by

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 15th 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&amp;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.