Convert WooCommerce variation dropdowns into radio buttons

I had an eCommerce project where the client wanted to display options for their products as selectable radio buttons rather than the default select dropdowns.

To achieve this, we need to write two functions: 1 will grab the selected options for the product, and for each variation available, write them to a radio button input instead of the select. And the 2nd will check if there are variations and products in stock, then if so, pulls in our first function to display the radio buttons in place of the default dropdown.

Here’s what I did, adding this to the themes’ functions.php file or inside a standalone plugin file:

// turn variation dropdowns into radios
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 = '
';
  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 .= '
'.esc_html(apply_filters('woocommerce_variation_option_name', $term->name)).'
';
        }
      }
    } 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    .= '
'.esc_html(apply_filters('woocommerce_variation_option_name', $option)).'
';
      }
    }
  }
  $radios .= '
';
  return $html.$radios;
}
add_filter('woocommerce_dropdown_variation_attribute_options_html', 'variation_radio_buttons', 20, 2);
function variation_check($active, $variation) {
  if(!$variation->is_in_stock() && !$variation->backorders_allowed()) {
    return false;
  }
  return $active;
}
add_filter('woocommerce_variation_is_active', 'variation_check', 10, 2);

Useful post? Share it

Leave a Reply

Your email address will not be published. Required fields are marked *