Custom Select Box Replacements for Woocommerce Variations

custom-variations-select.css

.woocommerce.single-product .product .summary .variations {
  width: 100%;
}
.woocommerce.single-product .product .summary .variations td {
  display: block;
  width: 100%;
}
.woocommerce.single-product .product .summary .variations td label {
  font-family: 'Nunito', Helvetica, Arial, sans-serif;
  letter-spacing: 0px;
  font-weight: normal;
  font-style: normal;
  text-transform: uppercase;
  font-size: 1.2em;
  text-align: left;
  display: block;
  margin-top: 20px;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer input {
  visibility: hidden;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer > select {
  display: none;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer > label {
  display: inline-block;
  margin: 5px 5px 0 0;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer > label > span {
  font-family: 'Oswald', 'Nunito', Helvetica, Arial, sans-serif;
  letter-spacing: 0px;
  text-transform: uppercase;
  font-style: normal;
  font-weight: normal;
  font-size: .8em;
  padding: 17px 11px;
  text-align: center;
  display: block;
  white-space: nowrap;
  cursor: pointer;
  background-color: #cdcdcd;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer > label > span:hover {
  background-color: #000000;
  color: #ffffff;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer > label > input {
  position: absolute;
  top: -20px;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer > label > .checked {
  background-color: #000000;
  color: #ffffff;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer.pa_flavor {
  max-height: 220px;
  overflow-y: scroll;
}
.woocommerce.single-product .product .summary .variations .reset_variations {
  margin-top: 15px;
  display: block !important;
}

custom-variations-select.jquery.js

$('.variations select').each(function (selectIndex, selectElement) {

    var select = $(selectElement);
    buildSelectReplacements(selectElement);

    select.parent().on('click', '.radioControl', function(){
        var selectedValue,
        currentlyChecked = $(this).hasClass('checked');
        $(this).parent().parent().find('.radioControl').removeClass('checked');
        if(!currentlyChecked){
            $(this).addClass('checked');
            selectedValue = $(this).data('value');
        } else {
            selectedValue = '';
        }

        select.val(selectedValue);
        select.find('option').each(function(){
            $(this).prop('checked', ($(this).val()==selectedValue) ? true : false);
        });
        select.trigger('change');
    });
    $('.reset_variations').on('mouseup', function(){
        $('.radioControl.checked').removeClass('checked');        
    });

});

$('.variations_form').on('woocommerce_update_variation_values', function(){
    selectValues = {};
    $('.variations_form select').each(function(selectIndex, selectElement){
        var id = $(this).attr('id');
        selectValues[id] = $(this).val();
        $(this).parent().find('label').remove();

        //Rebuild Select Replacement Spans
        buildSelectReplacements(selectElement);

        //Reactivate Selectd Values
        $(this).parent().find('span').each(function(){
            if(selectValues[id]==$(this).data('value')){
                $(this).addClass('checked');
            }
        });
    });
});

function buildSelectReplacements(selectElement){
    var select = $(selectElement);
    var container = select.parent().hasClass('radioSelectContainer') ? select.parent() : $("<div class='radioSelectContainer' />");
    select.after(select.parent().hasClass('radioSelectContainer') ? '' : container);
    container.addClass(select.attr('id'));
    container.append(select);

    select.find('option').each(function (optionIndex, optionElement) {
        if($(this).val()=="") return;
        var label = $("<label />");
        container.append(label);

        $("<span class='radioControl' data-value='"+$(this).val()+"'>" + $(this).text() + "</span>").appendTo(label);
    });
}

custom-variations-select.less

.variations {
  width:100%;
  td {
      display: block;
      width: 100%;
      label {
          .Nunito();
          text-transform: uppercase;
          font-size: 1.2em;
          text-align: left;
          display: block;
          margin-top:20px;
      }
  }
  /* http://jsfiddle.net/496c9/ */
  .radioSelectContainer {
      input {
          visibility: hidden;
      }
      > select {
          display: none;
      }
      > label {
          display: inline-block;
          margin: 5px 5px 0 0;
      }
      > label > span {
          .Oswald();
          font-weight: normal;
          font-size: .8em;
          padding: 17px 11px;
          text-align: center;
          display: block;
          white-space: nowrap;
          cursor: pointer;
          background-color: @mediumbg;
          .transition(all 250ms linear);
          &:hover {
              background-color: @blackbg;
              color: @lighttext;
              .transition(all 250ms linear);
          }
      }
      > label > input {
          position: absolute;
          top: -20px;
      }
      > label > span.checked {
          background-color: @blackbg;
          color: @lighttext;
          .transition(all 250ms linear);
      }
      &.pa_flavor {
          max-height:220px;
          overflow-y: scroll;
      }
  }
  .reset_variations {
      margin-top:15px;
      display:block !important;
  }

}

This is beautifull, thanks

Thanks!

Awesome, it works!

how do i integrate this script on my website?

I also wonder how to integrate this?

i am facing a serious issue regarding displaying the different products option (variable products)
please if anyone can guide
also, I have tried the above CSS in the custom CSS section from customizer but it's not changing
attaching a screenshot for reference