Woodland product template that shows the compare at price

product.liquid

<style type="text/css">
del { font-size: 70%; color: #777 }
.disabled { -moz-opacity:0.50;opacity:.50;filter:alpha(opacity=50);cursor:default }
input[type="submit"].disabled:hover { background: {{ settings.button_color }} }
</style>

<div class="col-5 product">
  <h2>{{ product.title | escape }}</h2>
  {{ product.description }}   

  {% if product.available %}    

  {% if product.variants.size > 1 and product.options.size == 1  %}  
  <form action="/cart/add" method="post">
    <div id="product-variants">
      <div class="selector-wrapper clearfix"> 
        <label>{{ product.options.first }}</label>

        <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){ 
          var first_variant_price = $("ul li input[type='radio']:checked").attr("data-price");
          var first_variant_compare_at_price = $("ul li input[type='radio']:checked").attr("data-compare-at-price"); 
          $(".price-field span").text(first_variant_price);
          $(".price-field del").text(first_variant_compare_at_price);
          $("input[type='radio']").click(function() {
            var variant_price = $(this).attr("data-price");
            $(".price-field span").text(variant_price);
            var variant_compare_at_price = $(this).attr("data-compare-at-price") || '';
            $(".price-field del").text(variant_compare_at_price);
          });
        });
        </script>

        <ul>
          {% assign found_available_variant = false %}
          {% for variant in product.variants %}
          <li>{% if variant.available %}
            <input type="radio"{% if variant.compare_at_price > variant.price %} data-compare-at-price="{{ variant.compare_at_price | money_with_currency }}"{% endif %} data-price="{{ variant.price | money_with_currency }}" id="{{ variant.id }}" value="{{ variant.id }}" name="id"{% if found_available_variant == false  %}{% assign found_available_variant = true %} checked="checked"{% endif %} />
            <label for="{{ variant.id }}">{{ variant.title }}</label>{% else %}
            <input type="radio" class="out-of-stock" id="{{ variant.id }}" value="{{ variant.id }}" name="id" disabled="disabled" />
            <label for="{{ variant.id }}" class="out-of-stock">{{ variant.title }}</label>{% endif %}
          </li>
          {% endfor %}
        </ul>
      </div> 
    </div><!-- product variants -->  

    <p class="float-left">&lsaquo; See more {{ product.type | link_to_type }}.</p>
    <div class="price-field"><del></del> <span></span></div>  

    <input type="submit"  name="add" value="Add to cart" id="purchase" />

  </form>

  {% elsif product.variants.size > 1  %}     
  <form action="/cart/add" method="post">
    <div id="product-variants">
      <select id="product-select" name='id'>
        {% for variant in product.variants %}
        <option value="{{ variant.id }}">{{ variant.title }}</option>
        {% endfor %}
      </select>       
    </div><!-- product variants -->  
    <p class="float-left">&lsaquo; See more {{ product.type | link_to_type }}. </p>
    <div class="price-field"><del></del> <span></span></div>                  
    <input type="submit"  name="add" value="Add to cart" id="purchase" />
  </form>

  {% else %}  
  <form action="/cart/add" method="post">
    <div id="product-variants">
    </div><!-- product variants --> 
    <p class="float-left">&lsaquo; See more {{ product.type | link_to_type }}. </p>	 
    {% assign variant = product.variants.first %}        
    <div class="variant-price">{% if product.compare_at_price > product.price %}<del>{{ product.compare_at_price | money_with_currency }}</del>{% endif %} <span>{{ product.price | money_with_currency }}</span></div>  
    <input type="hidden" id="{{ variant.id }}" name="id" value="{{ variant.id }}" />
    <input type="submit"  name="add" value="Add to cart" id="purchase"  />
  </form>
  {% endif %}

  {% else %}
  <p><strong>This product is temporarily unavailable</strong></p>
  {% endif %}
</div><!-- .col-5 -->

<div class="col-7 product-images last">
  <div class="product-thumbs" > 
    <ul> 
      {% for image in product.images %}
      {% if forloop.first %}
      <li class="first-image">
        <a href="{{ image | product_img_url: 'grande' }}" rel="fancy_group" class="single_image" ><img src="{{ image | product_img_url: 'large' }}"  /></a>
      </li>
      {% else %}
      <li><a href="{{ image | product_img_url: 'grande' }}" rel="fancy_group" class="single_image" ><img  src="{{ image | product_img_url: 'small' }}" alt="{{ product.title | escape }}" /></a></li>
      {% endif %}
      {% endfor %} 
    </ul>
  </div>
</div><!-- .col-7 last -->


<script type="text/javascript">
// <![CDATA[  
var selectCallback = function(variant, selector) {
  if (variant && variant.available == true) {
    // selected a valid variant
    jQuery('#purchase').removeClass('disabled').removeAttr('disabled');
    jQuery('.price-field span').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}"));
    if (variant.compare_at_price > variant.price) {
      jQuery('.price-field del').html(Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}"));
    }
    else {
      jQuery('.price-field del').empty();
    }
  } else {
    // variant doesn't exist
    jQuery('#purchase').addClass('disabled').attr('disabled', 'disabled');
    var message = variant ? "Sold Out" : "Unavailable";    
    jQuery('.price-field span').text(message);
    jQuery('.price-field del').empty();
  }
};


// initialize multi selector for product      
{% if product.available and product.options.size > 1 and product.variants.size > 1 %}
jQuery(document).ready(function() {
  new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
  $('#product-variants div').addClass("selector-wrapper");
  $('#product-variants div label').css("float","left");  
  $('#product-variants div select').css("float","right");
  $('#product-variants div ').addClass("clearfix");
  // Select first available variant to avoid 'Sold Out' or 'Unavailable' text on page load.
  // Code by Caroline Hill. See http://forums.shopify.com/categories/2/posts/38738
  {% assign found_one_in_stock = false %}
  {% for variant in product.variants %}
    {% if variant.available and found_one_in_stock == false %}
      {% assign found_one_in_stock = true %}
      {% for option in product.options %}
        $('#product-select-option-' + {{ forloop.index0 }}).val('{{ variant.options[forloop.index0] }}').trigger('change');
      {% endfor %}
    {% endif %}
  {% endfor %}
});                         
{% endif %}

// ]]>
</script>