Woocommerce产品变体选择与按钮，而不是下拉菜单？

Question

我是新来的wordpress。 我正在用wordpress 4.5（最新）+ woocommerge 2.5.5（最新版）+店面主题创建一个ecommerge网站。

我有一个产品有2个不同价格的变化。

当我从下拉菜单中选择显示变化价格下拉菜单中的变体时。如下图所示，2种变化

商品详细页：

我要选择的按钮改为下拉菜单，然后更新产品价格产品页面上variantions，而不是出现如下图所示的下拉列表。

如果我为每个变体创建不同的产品并为按钮添加自定义html并将每个变体产品彼此链接，这可以工作，但这是非常痛苦的。

如何使变化与选择按钮，而不是下拉列表如下图所示画面

Answer 1

我作了variantion选择的按钮与JavaScript的插件，而不是选择框。

我创建了一个插件，并在产品页面包含一个js文件，为产品页面上的每个变体创建按钮并隐藏选择框。

优点：

不改变WordPress的核心，woocommerce和店面主题的任何文件。

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 /变化选择与 - 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);