Woocommerce product variation selection with buttons instead dropdown menu?

1 comment

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 );
   

Comments are closed.