Change Variant Selector to Buttons

When to use:

When the product page should display buttons instead of dropdowns.

First used on first-aid-kit-uk.myshopify.com

Create a new snippet named "product-variant-buttons.liquid" and add the following code

{% if product.variants.size > 1 %} 

  <div id="product-variants">

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

  {% else %}

  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />

  {% endif %}



<style type="text/css">
  #product-variants li {
      list-style: none !important;
  }
  #product-variants ul li input[type=radio] {
      position: absolute;
      visibility: hidden;
  }
  #product-variants ul {
    padding-left: 0 !important; 
  }
  #product-variants ul li label {
      font-weight: 300;
      padding: 25px 25px 25px 80px;
      margin: 10px 4px;
      z-index: 9;
      cursor: pointer;
      border: 1px solid black;
      -webkit-transition: all 0.25s linear;
      padding: 10px;
      list-style: none !important;
      float: left;
  }    
  #product-variants ul li:hover label{
    background: black;
    color: #FFFFFF;
  }

  #product-variants ul li .check{
    display: block;
    position: absolute;
    border: 5px solid #AAAAAA;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    top: 30px;
    left: 20px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
  }

  #product-variants ul li:hover .check {
    border: 5px solid #FFFFFF;
  }

  #product-variants ul li .check::before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 15px;
    width: 15px;
    top: 5px;
    left: 5px;
    margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
  }

  #product-variants input[type=radio]:checked ~ .check {
    color: #fff;
    background-color: black;
  }

  #product-variants input[type=radio]:checked ~ .check::before{
    color: #fff;
    background-color: black;
  }

  #product-variants input[type=radio]:checked ~ label{
    color: #fff;
    background-color: black;
  }  

</style>

  Open product-add-to-cart-form.liquid and comment out the first <select></select>.

and add the following code.

{% include 'product-variant-buttons' %}