Question

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

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

当我从下拉菜单中选择一个变体显示下拉列表中的变化价格时。

产品详细信息页面，其中包含2种变体，如下所示：

我想选择带按钮的variantions而不是下拉列表，并在产品页面上更新产品价格，而不是在下拉列表中显示。

如果我为每个variantion创建不同的产品并为按钮添加自定义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 );

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

1 个答案: