Show Variation Options as Buttons

add_action( 'wp_footer', function () {
    if ( ! function_exists( 'is_product' ) || ! is_product() ) {
        return;
    }
    ?>
    <style>
    .wpide-var-buttons{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
    .wpide-var-buttons button{padding:.45em .9em;border:1px solid #c3c4c7;background:#fff;color:inherit;border-radius:4px;cursor:pointer;font:inherit;line-height:1.2}
    .wpide-var-buttons button[aria-pressed="true"]{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor;font-weight:600}
    .wpide-var-buttons button:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
    .wpide-var-buttons button:focus-visible{outline:2px solid #2271b1;outline-offset:2px}
    .variations select.wpide-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip:rect(0 0 0 0)}
    </style>
    <script>
    jQuery( function ( $ ) {
        $( 'form.variations_form' ).each( function () {
            var form = $( this );
            function build() {
                form.find( '.variations select' ).each( function () {
                    var select = $( this ), wrap = select.siblings( '.wpide-var-buttons' );
                    if ( ! wrap.length ) {
                        wrap = $( '<div class="wpide-var-buttons" role="group"></div>' ).attr( 'aria-label', $( 'label[for="' + this.id + '"]' ).text() );
                        select.addClass( 'wpide-hidden' ).attr( 'tabindex', '-1' ).after( wrap );
                    }
                    wrap.empty();
                    select.find( 'option' ).each( function () {
                        if ( ! this.value ) { return; }
                        var option = this;
                        $( '<button type="button"></button>' ).text( option.text ).attr( 'aria-pressed', select.val() === option.value ? 'true' : 'false' ).prop( 'disabled', ! option.classList.contains( 'enabled' ) && option.disabled ).on( 'click', function () {
                            select.val( select.val() === option.value ? '' : option.value ).trigger( 'change' );
                        } ).appendTo( wrap );
                    } );
                } );
            }
            form.on( 'woocommerce_update_variation_values reset_data', function () { setTimeout( build, 0 ); } );
            build();
        } );
    } );
    </script>
    <?php
}, 30 );