add_action( 'wp_print_footer_scripts', function() {
// Require Woo
if( ! class_exists( 'WooCommerce' ) ) {
return;
}
// Single Products Only
if( ! is_product() ) {
return;
}
?>
<script type="text/javascript">
// DOM Loaded
document.addEventListener( 'DOMContentLoaded', function() {
// Loop Variations Forms
document.querySelectorAll( 'form.variations_form' ).forEach( function( variations_form ) {
// Get Variation Pricing Data
var data = variations_form.getAttribute( 'data-product_variations' );
if( data ) {
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;
}
// Create Radio
let radio = document.createElement( 'input' );
radio.type = 'radio';
radio.name = select.name;
radio.value = option.value;
radio.checked = option.selected;
radio.classList.add( 'wc-block-components-radio-control__input' );
// Radio Label Wrapper
let label = document.createElement( 'label' );
label.classList.add( 'wc-block-components-radio-control' );
label.appendChild( radio );
// Maybe Include Swatch
if( data.length ) {
data.forEach( function( row ) {
if( row.attributes[select.name] == option.value && row.image ) {
let thumb = document.createElement( 'img' );
thumb.alt = row.image.alt ? row.image.alt : '';
thumb.src = row.image.src ? row.image.src.replace( '.jpg', '-150x150.jpg' ) : '';
thumb.srcset = row.image.srcset ? row.image.srcset : '';
label.appendChild( thumb );
}
} );
}
// Label Text
label.appendChild( document.createTextNode( ' ' + option.text + ' ' ) );
// Insert Radio
select.closest( 'td' ).appendChild( label );
// 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 Variations Forms Loop
} ); // End Document Loaded
</script>
<?php
} );Recommended CSS
.wc-block-components-radio-control .wc-block-components-radio-control__input {
padding: 0 !important;
margin: 0 !important;
height: auto !important;
top: 1.2em !important;
left: 0 !important;
position: relative !important;
}