Question

是否有可能在WooCommerce中将变体下拉列表更改为单选按钮而无需使用插件？我想在变体部分进行以下设置：

1升（10€）
2升（20€）
3公升（25欧元）

选择选项时，应自动更改底部的价格。

谢谢

Answer 1

我不知道如何在没有插件的情况下执行此操作，但我建议您放弃该要求，并使用Woocommerce Radio Buttons插件。这完全符合您的要求：

引用：

这是一个简单轻巧的插件，一旦安装并激活，就会将您的Woocommerce变体从下拉菜单转换为单选按钮。让您的消费者无需访问下拉菜单即可查看所有变体（可选）确保您使用的是产品和产品的变体设置要在编辑产品页面中选择的默认变体自动显示添加到购物车按钮。

Answer 2

我设法做到这一点的最好方法是在选择下拉列表之后直接添加单选按钮标记，然后使用CSS隐藏选择下拉列表。您还需要一些自定义JS来触发隐藏的选择值更改，以便您的价格根据您选择的单选按钮而更改。

这是我添加标记的方式：

function variation_radio_buttons($html, $args) {
  $args = wp_parse_args(apply_filters('woocommerce_dropdown_variation_attribute_options_args', $args), array(
    'options'          => false,
    'attribute'        => false,
    'product'          => false,
    'selected'         => false,
    'name'             => '',
    'id'               => '',
    'class'            => '',
    'show_option_none' => __('Choose an option', 'woocommerce'),
 ));

  if(false === $args['selected'] && $args['attribute'] && $args['product'] instanceof WC_Product) {
    $selected_key     = 'attribute_'.sanitize_title($args['attribute']);
    $args['selected'] = isset($_REQUEST[$selected_key]) ? wc_clean(wp_unslash($_REQUEST[$selected_key])) : $args['product']->get_variation_default_attribute($args['attribute']);
  }

  $options               = $args['options'];
  $product               = $args['product'];
  $attribute             = $args['attribute'];
  $name                  = $args['name'] ? $args['name'] : 'attribute_'.sanitize_title($attribute);
  $id                    = $args['id'] ? $args['id'] : sanitize_title($attribute);
  $class                 = $args['class'];
  $show_option_none      = (bool)$args['show_option_none'];
  $show_option_none_text = $args['show_option_none'] ? $args['show_option_none'] : __('Choose an option', 'woocommerce');

  if(empty($options) && !empty($product) && !empty($attribute)) {
    $attributes = $product->get_variation_attributes();
    $options    = $attributes[$attribute];
  }

  $radios = '<div class="variation-radios">';

  if(!empty($options)) {
    if($product && taxonomy_exists($attribute)) {
      $terms = wc_get_product_terms($product->get_id(), $attribute, array(
        'fields' => 'all',
      ));

      foreach($terms as $term) {
        if(in_array($term->slug, $options, true)) {
          $radios .= '<input type="radio" name="'.esc_attr($name).'" value="'.esc_attr($term->slug).'" '.checked(sanitize_title($args['selected']), $term->slug, false).'><label for="'.esc_attr($term->slug).'">'.esc_html(apply_filters('woocommerce_variation_option_name', $term->name)).'</label>';
        }
      }
    } else {
      foreach($options as $option) {
        $checked    = sanitize_title($args['selected']) === $args['selected'] ? checked($args['selected'], sanitize_title($option), false) : checked($args['selected'], $option, false);
        $radios    .= '<input type="radio" name="'.esc_attr($name).'" value="'.esc_attr($option).'" id="'.sanitize_title($option).'" '.$checked.'><label for="'.sanitize_title($option).'">'.esc_html(apply_filters('woocommerce_variation_option_name', $option)).'</label>';
      }
    }
  }

  $radios .= '</div>';

  return $html.$radios;
}
add_filter('woocommerce_dropdown_variation_attribute_options_html', 'variation_radio_buttons', 20, 2);

这是我使用的JS：

$(document).on('change', '.variation-radios input', function() {
  $('select[name="'+$(this).attr('name')+'"]').val($(this).val()).trigger('change');
});

Answer 3

您可以使用Variation Swatches for WooCommerce插件。它对我有用。

作为单选按钮的WooCommerce变奏曲

3 个答案: