Sticky Product Options(Variation Attributes) on the woocommerce product page

I want to show the product variation options at the bottom of the screen on the product page in a woocoommerce store. It’ll be a sticky section which will show product options and the add to cart button.

Here is the screenshot of the section I want :

Here is the reference website link.

Here is the code I tried, it added the price and the add to cart button. But Instead of price I want to show the product options and add to cart button.

The Code I have tried:

add_action( 'wp_footer', 'sticky_add_to_cart_button' );
    
function sticky_add_to_cart_button() {
    if ( ! is_product() ) {
        return;
    }
    global $product;
    
    if ( $product->is_type( 'variable' ) ) {
        $variation_attributes = $product->get_variation_attributes();
        $add_to_cart_url = esc_url( $product->add_to_cart_url() );
        $price = $product->get_price_html();
        ?>
        <style>
        .sticky-add-to-cart-section {
            position: fixed;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 9999;
            display: flex;
            align-items: center;
            padding: 5px 20px;
            background-color: white;
            box-shadow: 0px 2px 10px #27272780;
            -webkit-box-shadow: 0px 2px 10px #27272780;
            transition: 0.6s;
            -moz-box-shadow: 0px 2px 10px #27272780;
        }
        .sticky-add-to-cart-button {
            width: 50%;
            padding: 10px 0px;
        }
        .sticky-add-to-cart-price {
            width: 50%;
            text-align: center;
            font-size: 1em;
            color: #313131;
            padding: 18px 0px;
        }
        .sticky-variation-attributes {
            width: 100%;
            text-align: center;
            padding: 10px 0px;
        }
        </style>
        <script>
        jQuery(document).ready(function($) {
            var addToCartButton = jQuery('button.single_add_to_cart_button, button[name="checkout"]');
            if (!isElementInViewport(addToCartButton)) {
                var stickySection = jQuery('<div class="sticky-add-to-cart-section">');
                var stickyButton = addToCartButton.clone();
                stickyButton.addClass('sticky-add-to-cart-button');
                var stickyPrice = jQuery('<div class="sticky-add-to-cart-price">').html('<?php echo $price; ?>');
                var variationAttributes = '<div class="sticky-variation-attributes">';
                $.each(<?php echo json_encode($variation_attributes); ?>, function(key, value) {
                    variationAttributes += '<span>' + key + ': ' + value + '</span>';
                });
                variationAttributes += '</div>';
                stickySection.append(variationAttributes);
                stickySection.append(stickyPrice);
                stickySection.append(stickyButton);
                jQuery('body').append(stickySection);
        
                stickyButton.click(function() {
                    addToCartButton.click();
                });
            }
        
            function isElementInViewport(el) {
                var rect = el[0].getBoundingClientRect();
                return (
                    rect.top >= 0 &&
                    rect.left >= 0 &&
                    rect.bottom <= jQuery(window).height() &&
                    rect.right <= jQuery(window).width()
                );
            }
        });
        </script>
        <?php
    }
}