Woocommerce product variation selection with buttons instead dropdown menu? - wordpress

Question

I am new to wordpress.
I am creating a ecommerge website with wordpress 4.5(latest) + woocommerge 2.5.5(latest) + storefront theme.
I have a product with 2 variations with different prices.
When I select a variation from dropdown menu displaying variation price under dropdown.
Product detail page with 2 variations shown as below:
I want to select variantions with buttons instead dropdown, and update product price on product page instead show below of dropdown.
If I create different products for each variantion and add custom html for buttons and link each variation products with each other, this works but this is very painful.
How to make variations selection with buttons instead dropdown shown as below picture

Answer 1

I was made variantion selection with buttons instead select box with javascript plugin.
I created a plugin and included a js file to product page that creates buttons for each variant at product page and hide select box.
Pros:
Not changed any file of wordpress core, woocommerce and storefront theme.
myplugin.php
define('MYPLUGIN__VERSION', '1.0');
function variant_selection_with_buttons() {
if (is_product()) {
#TODO serve .min.js on production
$js_file = plugins_url('/js/variant-selection-with-buttons.js', __FILE__);
wp_register_script(
'variant_selection_with_buttons_js',
$js_file,
array('jquery'),
MYPLUGIN__VERSION,
true
);
wp_enqueue_script('variant_selection_with_buttons_js');
}
}
add_action( 'wp_enqueue_scripts', 'variant_selection_with_buttons');
js/variations-selection-with-buttons.js
;(function($, window, document, undefined){
var variations = $('.variations_form').data('product_variations'),
requiredVals = {},
selectedVariation;
$('.woocommerce-variation').remove();
$('table.variations').hide();
$(variations).each(function(i, item){
var variationSlug;
$.each(item['attributes'], function(key, value){
variationSlug = value;
return;
});
requiredVals[variationSlug] = {
'price_html': item['price_html'],
'variation_description': item['variation_description'],
};
});
var $variationChangerCon = $('<div/>', {
'id': 'variationChangerCon',
'style': 'margin-bottom:5px',
});
$variationChangerCon.append('<div class="variationBtns"/>');
$('table.variations').find('select option').each(function(index){
var $option = $(this);
if (!$option.val()) return;
if ($option.is(':selected')){
selectedVariation =$option.val();
}
var $button = $('<a/>', {
'class': 'variation-btn single_add_to_cart_button button btn-info PvariationLink',
'text': $option.text(),
'style': 'margin-right:2px;',
});
$button.attr('data-slug', $option.val());
$variationChangerCon.find('.variationBtns').append($button);
});
$variationChangerCon.append('<div class="variationDesc"/>');
$variationChangerCon.insertBefore('.entry-summary div[itemprop="description"]');
$('div.product').on('click', '.variation-btn', function(){
var $this = $(this),
item = requiredVals[$this.data('slug')];
itemDesc = requiredVals[$this.data('slug')];
$('.variation-btn').removeClass('disabled');
$this.addClass('disabled');
$('table.variations select').val($this.data('slug')).trigger('change')
$('.entry-summary div[itemprop="offers"] p.price')
.html(item['price_html'])
$variationChangerCon.find('.variationDesc').html(item['variation_description']);
});
if (selectedVariation) {
$('.variationBtns .variation-btn[data-slug="'+ selectedVariation +'"]').trigger('click');
} else {
/*
If default variation not selected in admin pane
`selectedVariation` become undefined . So select first variation/
*/
$('.variationBtns .variation-btn:eq(0)').trigger('click');
}
})( jQuery, window, document, undefined );