Woocommerce Produkt Variation Auswahl mit Schaltflächen statt Dropdown-Menü?

Question

Ich bin neu in WordPress. Ich erstelle eine ecommerge Website mit Wordpress 4.5 (neueste) + woocommerge 2.5.5 (neueste) + Storefront Thema.

Ich habe ein Produkt mit 2 Variationen mit unterschiedlichen Preisen.

Wenn ich eine Variation aus dem Dropdown-Menü wähle Variationspreis unter Dropdown wählen.

Produktdetailseite mit 2 Variationen wie unten dargestellt:

Ich mag variantions mit Knöpfen statt Dropdown-Liste auswählen und aktualisiert Produktpreis auf Produktseite statt unter der Dropdown zeigen.

Wenn ich verschiedene Produkte für jede Variante erstellen und benutzerdefinierte HTML für Schaltflächen hinzufügen und jede Variation Produkte miteinander verknüpfen, funktioniert das aber sehr schmerzhaft.

Wie Variationen Auswahl mit Tasten statt Drop-Down gezeigt, wie unten Bild

Answer 1

ich gemacht variantion Auswahl mit Tasten statt Auswahlbox mit Javascript-Plugin zu machen.

Ich habe ein Plugin erstellt und eine js-Datei zur Produktseite hinzugefügt, die Schaltflächen für jede Variante auf der Produktseite erstellt und das Auswahlfeld ausblenden.

Vorteile:

Nicht jede Datei von Wordpress-Kern, WooCommerce und Schaufenster Thema geändert.

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/Variationen-Auswahl-mit-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);