Custom Onsale Badge for Individual Variations

<?php

add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'cwpai_add_data_sale_to_variation_option', 10, 2 );
function cwpai_add_data_sale_to_variation_option( $html, $args ) {
    // Ensure that the product is a variable product
    if ( isset( $args['product'] ) && $args['product']->is_type( 'variable' ) ) {
        $product = $args['product'];
        $attribute = $args['attribute'];
        $variations = $product->get_available_variations();

        // Iterate over each variation
        foreach ( $variations as $variation ) {
            $variation_obj = wc_get_product( $variation['variation_id'] );

            // Check if the variation is on sale
            if ( $variation_obj->is_on_sale() ) {
                foreach ( $variation['attributes'] as $attr_name => $attr_value ) {
                    // Only add data-sale to the matching attribute options
                    if ( 'attribute_' . sanitize_title( $attribute ) === $attr_name ) {
                        // Use preg_replace to add data-sale="true" to the correct <option> element
                        $html = preg_replace(
                            '/<option value="' . preg_quote( esc_attr( $attr_value ), '/' ) . '"/',
                            '<option value="' . esc_attr( $attr_value ) . '" data-sale="true"',
                            $html
                        );
                    }
                }
            }
        }
    }
    return $html;
}


add_action( 'wp_footer', 'cwpai_add_sale_badge_script' );
function cwpai_add_sale_badge_script() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $("select").change(function() {
            var optionSelected = $(this).find('option:selected');
            setTimeout(function() {
                var priceElement = $(".price");
                var badgeElement = $(".on-sale-badge");
                if (optionSelected.data('sale')) {
                    if (!badgeElement.length) {
                        var newBadge = $('<span class="on-sale-badge">On Sale</span>');
                        newBadge.insertAfter(priceElement);
                        newBadge.hide().fadeIn(200);
                    }
                } else {
                    badgeElement.fadeOut(200, function() { $(this).remove(); });
                }
            }, 100);
        });
    });
    </script>
    <?php
}

add_action( 'woocommerce_after_single_product', 'cwpai_hide_default_sale_badge' );
function cwpai_hide_default_sale_badge() {
    global $product;
    if ( $product->is_type( 'variable' ) ) {
        $variations = $product->get_available_variations();
        $on_sale = false;
        foreach ( $variations as $variation ) {
            if ( $variation['display_price'] < $variation['display_regular_price'] ) {
                $on_sale = true;
                break;
            }
        }
        if ( $on_sale ) {
            ?>
            <style type="text/css">
            .onsale {
                display: none !important;
            }
            </style>
            <?php
        }
    }
}

add_action( 'wp_head', 'cwpai_add_on_sale_badge_styles' );
function cwpai_add_on_sale_badge_styles() {
    ?>
    <style type="text/css">
    .on-sale-badge {
        background-color: #77a464;
        color: #fff;
        padding: 2px 4px;
        margin-left: 5px;
        border-radius: 2px;
        display: inline-block;
        font-size: 0.8em;
    }
    </style>
    <?php
}