Display formated WooCommerce product total based on quantity above add to cart button

General
1

I have a Fabric store which i need it to clearly state to customers the amount they are adding to the basket. The product is set at 1/2 meter prices. So 1 quantity of stock is half a meter of fabric.

https://thefabricboutique.co.uk/product/jennifer-cotton/

I need it to say above the add to cart.

Add (X) meters for (Price).

(x) - Half of what the quantity states. (3 quantity = 1.5 Meters) (Price) - Increase price as the quantity increases. (3 quantity at £7 = £21)

This is an attempt at getting the price so for but i’m just struggling to complete it! Any help would be amazing thank you.

I tried this code and it works with the price but seems to drop of the currency symbol before quantity is changed.

add_action( 'woocommerce_before_add_to_cart_quantity', 'qty_front_add_cart' );
 
function qty_front_add_cart() {
    global $woocommerce, $product;
    // let's setup our divs
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Total price:','woocommerce'),'<span class="price">'.wc_get_price_to_display($product).'</span>');
    ?>
        <script>
            jQuery(function($){
                var price = <?php echo wc_get_price_to_display($product); ?>,
                    currency = '<?php echo get_woocommerce_currency_symbol(); ?>';

                $('[name=quantity]').change(function(){
                    if (!(this.value < 1)) {

                        var product_total = parseFloat(price * this.value);

                        $('#product_total_price .price').html( currency + product_total.toFixed(2));

                    }
                });
            });
        </script>
    <?php 
}