Wordpress 用按钮代替下拉菜单选择产品变体？

我是wordpress的新手。 我正在创建一个以wordpress 4.5（最新）+WooCommerce 2.5.5（最新）+店面为主题的电子商务网站

我有两种不同价格的产品

当我从下拉菜单中选择变体时，在下拉菜单下显示变体价格

产品详细信息页面，有2个变体，如下所示：

我想用按钮而不是下拉菜单选择差异，并在产品页面上更新产品价格，而不是在下拉菜单下方显示

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

如何使用按钮而不是下拉菜单进行变体选择，如下图所示

---

我用按钮选择变量，而不是用javascript插件选择框

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

优点：

未更改wordpress core、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/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 );

；（函数（$，窗口，文档，未定义）{
变量变量=$（'.variations\u form'）。数据（'product\u variations'），
requiredVals={}，
选择性变异；
$（'.com'）.remove（）；
$（'table.variations'）.hide（）；
$（变体）。每个（功能（i，项目）{
变量段塞；
$.each（项['attributes'，函数（键，值）{
变量slug=值；
返回；
});
所需VAL[变量SLAG]={
'price_html'：项目['price_html']，
“变体描述”：项目[“变体描述”]，
};
});
变量$variationChangerCon=$（''{
'id'：'variationChangerCon'，
'style'：'margin bottom:5px'，
});
$variationChangerCon.append（“”）；
$（'table.variations'）。查找（'select option'）。每个（函数（索引）{
var$选项=$（此选项）；
如果（！$option.val（））返回；
如果（$option.is（':selected'））{
selectedVariation=$option.val（）；
}
变量$button=$（''{
“类”：“变体btn单个添加到购物车按钮btn信息PvariationLink”，
“text”：$option.text（），
'style'：'margin right:2px；'，
});
$button.attr（'data-slug'，$option.val（））；
$variationChangerCon.find（'.variationBtns'）.append（$button）；
});
$variationChangerCon.append（“”）；
$variationChangerCon.insertBefore（'.entry summary div[itemprop=“description”]”）；
$（'div.product'）。在（'click'，'variation btn'，function（）上{
变量$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（项目['price_html']）
$variationChangerCon.find（'.variationDesc'）.html（项['variation_description']）；
});
如果（已选择的变体）{
$（'.variationBtns.variationbtn[data slug=“'+selectedVariation+'”）。触发器（'click'）；
}否则{
/*
如果在管理窗格中未选择默认变量
`selectedVariation`未定义。因此选择第一个变体/
*/
$（'.variationBtns.variationbtn:eq（0）'）。触发器（'click'）；
}
})（jQuery、窗口、文档，未定义）；

行

$variationChangerCon.insertBefore（'.entry summary div[itemprop=“description””）；

似乎缺少一个结束方括号（

]

）？