Product page quantity for variable product

Question

In WordPress, I just want to add variable product types to the cart because I'm adding quantities

to the variable products. It works for simple products, but for variable products, it's functioning the same as simple products on the product page

this is the code am using in code snippets

add_filter('woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2);
function qty_add_to_cart_selector($html, $product) {
    if ($product && $product->is_purchasable() && $product->is_in_stock() && !$product->is_sold_individually()) {
        // Get the necessary classes
        $class = implode(' ', array_filter(array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports('ajax_add_to_cart') ? 'ajax_add_to_cart' : '',
        )));

        // Embedding the quantity field to Ajax add to cart button
        $quantity_input = woocommerce_quantity_input(array(), $product, false);

        if ($product->is_type('variable')) {
            $html = sprintf(
                '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s disabled" disabled>%s</a>',
                $quantity_input,
                esc_url($product->add_to_cart_url()),
                esc_attr(isset($quantity) ? $quantity : 1),
                esc_attr($product->get_id()),
                esc_attr($product->get_sku()),
                esc_attr($class),
                esc_html(__('Add to cart', 'woocommerce'))
            );
        } else {
            $html = sprintf(
                '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
                $quantity_input,
                esc_url($product->add_to_cart_url()),
                esc_attr(isset($quantity) ? $quantity : 1),
                esc_attr($product->get_id()),
                esc_attr($product->get_sku()),
                esc_attr($class),
                esc_html($product->add_to_cart_text())
            );
        }
    }
    return $html;
}
add_action('wp_footer', 'archives_quantity_fields_script');
function archives_quantity_fields_script() {
    ?>
    <script type='text/javascript'>
jQuery(function($) {
    // Handle variation selection
    $(document).on('click', '.cfvsw-swatches-option', function() {
        var $this = $(this);
        var productContainer = $this.closest('.product');
        var addToCartButton = productContainer.find('.add_to_cart_button');

        // Mark the selected variation
        $this.siblings().removeClass('cfvsw-selected-swatch');
        $this.addClass('cfvsw-selected-swatch');

        // Enable the add to cart button
        addToCartButton.removeClass('disabled').removeAttr('disabled');

        // Update the variation data in the button
        var variationID = $this.data('slug');
        var variationName = $this.text().trim();
        var variationAttributes = $this.data('title'); // Assuming this contains the variation type (e.g., size)
        var variationPrice = parseFloat($this.data('price')); // Assuming this contains the variation price

        addToCartButton.attr('data-variation_id', variationID);
        addToCartButton.attr('data-variation_name', variationName);
        addToCartButton.attr('data-variation_attributes', variationAttributes); // Pass the variation type
        addToCartButton.attr('data-variation_price', variationPrice); // Pass the variation price
    });

    // Add to cart with AJAX for variable products
    $(document.body).on('click', '.add_to_cart_button', function(e) {
        e.preventDefault();
        var button = $(this);
        if (button.hasClass('disabled')) {
            return false;
        }
        var productID = button.data('product_id');
        var variationID = button.data('variation_id');
        var variationName = button.data('variation_name');
        var variationAttributes = button.data('variation_attributes'); // Get the variation type
        var variationPrice = button.data('variation_price'); // Get the variation price
        var quantity = button.siblings('.quantity').find('input.qty').val();

        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.ajax_url,
            data: {
                action: 'woocommerce_add_to_cart',
                product_id: productID,
                quantity: quantity,
                variation_id: variationID,
                variation_name: variationName,
                variation_attributes: variationAttributes, // Pass the variation type
                variation_price: variationPrice // Pass the variation price
            },
            success: function(response) {
                if (response.error & response.product_url) {
                    window.location = response.product_url;
                    return;
                }
                $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, button]);
            }
        });
    });
});


    </script>
    <?php
}

This is what I'm experiencing: the variable product is not being added to the cart. enter image description here

I want the cart to look like this enter image description here