1

I'm trying to convert the variation select from dropdown to an inline list of radio inputs in the single product template of my woocommerce page.
I'm using WooCommerce version 2.5 and, as far as i've searched, there isn't any updated snippet of how it's done.

I've located wc_dropdown_variation_attribute_options function which is responsive of producing the drop down and tryied to alter it in:

    <?php
function wc_dropdown_variation_attribute_options( $args = array() ) {
    $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' )
    ) );

    $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'];

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

    $html = '<form id="' . esc_attr( $id ) . '" class="' . esc_attr( $class ) . '" name="' . esc_attr( $name ) . '" data-attribute_name="attribute_' . esc_attr( sanitize_title( $attribute ) ) . '">';

    if ( $args['show_option_none'] ) {
        $html .= '<option value="">' . esc_html( $args['show_option_none'] ) . '</option>';
    }

    if ( ! empty( $options ) ) {
        if ( $product && taxonomy_exists( $attribute ) ) {
            // Get terms if this is a taxonomy - ordered. We need the names too.
            $terms = wc_get_product_terms( $product->id, $attribute, array( 'fields' => 'all' ) );

            foreach ( $terms as $term ) {
                if ( in_array( $term->slug, $options ) ) {
                    $html .= '<input type="radio" value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $args['selected'] ), $term->slug, false ) . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $term->name ) ) . '</input>';
                }
            }
        } else {
            foreach ( $options as $option ) {
                // This handles < 2.4.0 bw compatibility where text attributes were not sanitized.
                $selected = sanitize_title( $args['selected'] ) === $args['selected'] ? selected( $args['selected'], sanitize_title( $option ), false ) : selected( $args['selected'], $option, false );
                $html .= '<input type="radio" value="' . esc_attr( $option ) . '" >' . esc_html( apply_filters( 'woocommerce_variation_option_name', $option ) ) . '</input>';
            }
        }
    }

    $html .= '</form>';

    echo apply_filters( 'woocommerce_dropdown_variation_attribute_options_html', $html, $args );
}

As you imagine with no luck at all.

In the above code i've altered the select parameters with input fields and although it displays normal, jquery and add to cart does not work. I suppose that because of invalid handlers in assets/js/add-to-cart-variation.js.

Can anyone help?
Is this the right way?

Another though is to hide the generated select and produce a ul on the fly with jquery to manipulate the "hidden" select of woocommerce, but that doesn't sound very efficient.

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
sarakinos
  • 666
  • 11
  • 28
  • Possible duplicate of [Converting Woo Commerce dropdowns into Radio Buttons](https://stackoverflow.com/questions/12374110/converting-woo-commerce-dropdowns-into-radio-buttons) – omukiguy Dec 12 '17 at 11:27

0 Answers0