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

Posted 2023-05-08

【中文标题】使用按钮而不是下拉菜单的 Woocommerce 产品变体选择？

【英文标题】：Woocommerce product variation selection with buttons instead dropdown menu?

【发布时间】：2016-08-14 18:30:00

【问题描述】：

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

我的产品有 2 种不同价格的产品。

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

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

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

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

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

【参考方案1】：

我使用按钮进行了变体选择，而不是使用 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/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 );

【讨论】：

$variationChangerCon.insertBefore('.entry-summary div[itemprop="description"'); 行似乎缺少右方括号 (])？