<?php

function add_variation_radio_buttons() {
    ?>
    <script type="text/javascript">
    document.addEventListener( 'DOMContentLoaded', function() {
        var variations_form = document.querySelector( 'form.variations_form' );
        var data = variations_form.getAttribute( 'data-product_variations' );
        data = JSON.parse( data );

        var selects = document.querySelectorAll( 'table.variations select' );
        selects.forEach( function( select ) {
            var options = select.querySelectorAll( 'option' );
            options.forEach( function( option ) {
                if( ! option.value ) {
                    return;
                }

                var pricing = '';
                data.forEach( function( row ) {
                    if( row.attributes[select.name] == option.value ) {
                        pricing = row.price_html;
                    }
                } );

                var radio = document.createElement( 'input' );
                radio.type = 'radio';
                radio.name = select.name;
                radio.value = option.value;
                radio.checked = option.selected;
                var label = document.createElement( 'label' );
                label.appendChild( document.createTextNode( ' ' + option.text + ' ' ) );
                var div = document.createElement( 'div' );
                div.classList.add('fb-woo-single-btn-variation');
                div.appendChild( radio );
                div.appendChild( label );

                // Check if variation has stock
                var variationData = data.find(function(row) {
                    return row.attributes[select.name] == option.value;
                });

                // Check if product has only one attribute
                var hasSingleAttribute = Object.keys(variationData.attributes).length === 1;

                if (variationData && !variationData.is_in_stock && hasSingleAttribute) {
                    div.classList.add('disable');
                }

                select.closest( 'td' ).appendChild( div );

                radio.addEventListener( 'click', function( event ) {
                    select.value = radio.value;
                    jQuery( select ).trigger( 'change' );
                } );
            } );

            select.style.display = 'none';
        } );
    } );
    </script>
    <?php
}

add_action( 'woocommerce_variable_add_to_cart', 'add_variation_radio_buttons' );



# SOURCE: https://codedcommerce.com/woo/change-variation-drop-downs-to-radio-buttons/
/*
add_action( 'woocommerce_variable_add_to_cart', function() {
 
    add_action( 'wp_print_footer_scripts', function() {
 
        ?>
        <script type="text/javascript">
 
        // DOM Loaded
        document.addEventListener( 'DOMContentLoaded', function() {
  
            // Get Variation Pricing Data
            var variations_form = document.querySelector( 'form.variations_form' );
            var data = variations_form.getAttribute( 'data-product_variations' );
            data = JSON.parse( data );
 
            // Loop Drop Downs
            document.querySelectorAll( 'table.variations select' )
                .forEach( function( select ) {
 
                // Loop Drop Down Options
                select.querySelectorAll( 'option' )
                    .forEach( function( option ) {
 
                    // Skip Empty
                    if( ! option.value ) {
                        return;
                    }
 
                    // Get Pricing For This Option
                    var pricing = '';
                    data.forEach( function( row ) {
                        if( row.attributes[select.name] == option.value ) {
                            pricing = row.price_html;
                        }
                    } );
 
                    // Create Radio
                    var radio = document.createElement( 'input' );
                        radio.type = 'radio';
                        radio.name = select.name;
                        radio.value = option.value;
                        radio.checked = option.selected;
                    var label = document.createElement( 'label' );
                   
                        label.appendChild( document.createTextNode( ' ' + option.text + ' ' ) );
                    var div = document.createElement( 'div' );
                        div.classList.add('fb-woo-single-btn-variation');
                        div.appendChild( radio );
                        div.appendChild( label );
 
                    // Insert Radio
                    select.closest( 'td' ).appendChild( div );
 
                    // Handle Clicking
                    radio.addEventListener( 'click', function( event ) {
                        select.value = radio.value;
                        jQuery( select ).trigger( 'change' );
                    } );
 
                } ); // End Drop Down Options Loop
 
                // Hide Drop Down
                select.style.display = 'none';
 
            } ); // End Drop Downs Loop
  
        } ); // End Document Loaded
 
        </script>
        <?php
 
    } );
 
} );

*/
?>