Weirdly this can be completed in one script added to the functions.php file. Although changing Woocommerce Dropdowns to Radio Buttons looks complex to do, and there are certainly plugins to do this, it’s straight forward to complete!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
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( radio ); label.appendChild( document.createTextNode( ' ' + option.text + ' ' ) ); var span = document.createElement( 'span' ); span.innerHTML = pricing; label.appendChild( span ); var div = document.createElement( 'div' ); 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 } ); } ); |
