WooCommerce display total price when quantity selection change

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

This worked for me on a page with product variety

//allow this particular AJAX function for logged in users
add_action('wp_ajax_myajax', 'woocommerce_total_product_price');

//allow this particular AJAX function for non-logged in users
add_action('wp_ajax_nopriv_myajax', 'woocommerce_total_product_price');

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:20px auto;">%s %s</div>',__('Product Total:','woocommerce'),'<span class="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 price = jQuery('.single_variation_wrap .woocommerce-Price-amount.amount bdi').first().contents().filter(function() {
                            return this.nodeType == 3;
                        }).text().replace(',','');

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

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

                    }
                });
            });
            
            function addCommas(nStr) {
                nStr += '';
                var x = nStr.split('.');
                var x1 = x[0];
                var x2 = x.length > 1 ? '.' + x[1] : '';
                var rgx = /(\d+)(\d{3})/;
                while (rgx.test(x1)) {
                    x1 = x1.replace(rgx, '$1' + ',' + '$2');
                }
                return x1 + x2;
            }
        </script>
    <?php
}