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

Question

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 
}

Answer 1

There are some mistakes and missing things in your code, try the following instead:

add_action( 'woocommerce_before_add_to_cart_quantity', 'display_product_total_amount_html' );
function display_product_total_amount_html() {
    global $product;

    $meters_per_qty  = 0.5;
    $display_price   = wc_get_price_to_display($product);
    $formatted_price = '<span class="price-amount">'. number_format($display_price, 2) . '</span>';

    // Output product total price amount
    $price_string = sprintf( __('Add %s for %s', 'woocommerce'),  
        '<span class="qty-meters">' . $meters_per_qty . ' meter</span>',
        str_replace('0.00', $formatted_price, wc_price(0)) );

    // Output product total price amount
    echo '<div class="total-price_qty" style="margin-bottom:20px;">'.$price_string.'</div>'
    ?>
    <script>
    jQuery(function($){
        $('input[name=quantity]').on( 'input change', function(){
            const qty = $(this).val();
            if ( qty != 0 ) {
                const lengthTxt = qty > 2 ? ' meters' : ' meter';
                $('.total-price_qty .price-amount').html( parseFloat(<?php echo $display_price; ?> * qty).toFixed(2) );
                $('.total-price_qty .qty-meters').html( parseFloat(<?php echo $meters_per_qty; ?> * qty)+lengthTxt );
            }
        });
    });
    </script>
    <?php 
}

Code goes on functions.php file of your child theme (or in a plugin). Tested and works.