WooCommerce display total price when quantity sele

Question

I'm in need of displaying the total price in product page when quantity changes.
This is the same as line price in the cart if you add quantity of products in the cart.
I'm still new with WooCommerce so I'm not sure where to start. But if someone could help me to the right direction, I think I can manage on my own.

So here's my thoughts on how should I do it.

I'm thinking my jquery would be like this.

jQuery(document).ready(function($){
    $('.qty').on('change',function(){
         // grab the price
         var price = $('[itemprop="price"]').attr('content');
         var total_price = price * this.value;
         console.log(price, this.value, total_price);
    });
})

this works when pasted on the console. But I'm not sure where to put this code on WooCommerce.

Answer 1

You're almost there... try this, paste this in your functions.php

add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 31 );
function woocommerce_total_product_price() {
    global $woocommerce, $product;
    // let's setup our divs
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Product Total:','woocommerce'),'<span class="price">'.$product->get_price().'</span>');
    ?>
        <script>
            jQuery(function($){
                var price = <?php echo $product->get_price(); ?>,
                    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
}

source: http://reigelgallarde.me/programming/show-product-price-times-selected-quantity-on-woocommecre-product-page/

Answer 2

You need to keep in mind initial price value.

Because when you decrease quantity (after increasing it), your code returns wrong result.

A more complete code here:

jQuery(document).ready(function($){

  // grab the price
  var initial_price = $('[itemprop="price"]').attr('content');

  $('.qty').on('change',function(){
     var total_price = initial_price * this.value;
     console.log(initial_price, this.value, total_price);
  });

})

Also you need to format price before printing it on the page:

• add currency symbol after (or before) price;
• set count of decimals (e.g. $99.9 or $99.99) (you might use toFixed() method for this);
• etc.

It depends from your task.

Hope it helps.