How to show Total Product Price w.r.t Quantity in WooCommerce

PressTigers

How to show Total Product Price w.r.t Quantity in WooCommerce

October 29, 2015
Leave a comment

WooCommerce (the best shopping cart plugin) gives store owners a complete control of all the customizable features to add strength to their online product stores/business. In products detail page, a user may require to show total price of the product on detail page when he/she orders a product with more than 1 quantity.

For instance, if you want to buy 2 watches for $100 each then the total cost will be $200. Similarly if you change the quantity of the product more than 2, then it will show the total cost according to the selected quantity of the product.

To achieve this functionality, use the Hook of WooCommerce “woocommerce_single_product_summary”. You can see this hook in content-single-product.php template file. Many functions bind with this hook and it is called on product detail page.

When a function is added in this hook , a priority has been assigned to that function. Function with a high priority will call first. For adding the functionality, add this particular function after “woocommerce_template_single_add_to_cart” which has a hook priority of 30 and the function will be called after this.

Paste the following code in functions.php file of your Theme or Child Theme:

<?php
 
// We Hook this on the priority after 30 , for example on 35
add_action('woocommerce_single_product_summary', 'pt_woocommerce_product_total_price', 35);
 
function pt_woocommerce_product_total_price() {
    global $woocommerce, $product;
    // Setup our Html to show the totoal price
    echo sprintf('<div id="pt-product-total-price" style="margin-bottom:20px;display:none">%s %s</div>', __('Product Total:', 'woocommerce'), '<span class="price">' . $product->get_price() . '</span>');
    echo sprintf('<div id="pt-cart-total-price" style="margin-bottom:20px;display:none">%s %s</div>', __('Cart Total:', 'woocommerce'), '<span class="price">' . $product->get_price() . '</span>');
    ?>
    <script>
        jQuery(function ($) {
            var product_price = <?php echo $product->get_price(); ?>,
                    current_cart_total = <?php echo $woocommerce->cart->cart_contents_total; ?>,
                    currency = '<?php echo get_woocommerce_currency_symbol(); ?>';
 
            $('[name=quantity]').change(function () {
                if (!(this.value < 1)) {
                    var product_total = parseFloat(product_price * this.value),
                            cart_total = parseFloat(product_total + current_cart_total);
 
                    $('#pt-product-total-price .price').html(currency + product_total.toFixed(2));
                    $('#pt-cart-total-price .price').html(currency + cart_total.toFixed(2));
                }
                $('#pt-product-total-price,#pt-cart-total-price').toggle(!(this.value <= 1));
 
            });
        });
    </script>
    <?php
}
?>

<?php

// We Hook this on the priority after 30 , for example on 35

add_action('woocommerce_single_product_summary', 'pt_woocommerce_product_total_price', 35);

function pt_woocommerce_product_total_price() {

global $woocommerce, $product;

// Setup our Html to show the totoal price

echo sprintf('<div id="pt-product-total-price" style="margin-bottom:20px;display:none">%s %s</div>', __('Product Total:', 'woocommerce'), '<span class="price">' . $product->get_price() . '</span>');

echo sprintf('<div id="pt-cart-total-price" style="margin-bottom:20px;display:none">%s %s</div>', __('Cart Total:', 'woocommerce'), '<span class="price">' . $product->get_price() . '</span>');

jQuery(function ($) {

var product_price = <?php echo $product->get_price(); ?>,

current_cart_total = <?php echo $woocommerce->cart->cart_contents_total; ?>,

currency = '<?php echo get_woocommerce_currency_symbol(); ?>';

$('[name=quantity]').change(function () {

if (!(this.value < 1)) {

var product_total = parseFloat(product_price * this.value),

cart_total = parseFloat(product_total + current_cart_total);

$('#pt-product-total-price .price').html(currency + product_total.toFixed(2));

$('#pt-cart-total-price .price').html(currency + cart_total.toFixed(2));

}

$('#pt-product-total-price,#pt-cart-total-price').toggle(!(this.value <= 1));

});

</script>

<?php

}

17 thoughts on “How to show Total Product Price w.r.t Quantity in WooCommerce”

Mihaela says:

March 29, 2016 at 12:50 pm

It is not working for me… I get a 500 error… “is currently unable to handle this request.” What should I do? I pasted the code in child theme

Support Department says:

March 30, 2016 at 11:38 am

Hi Mihaela,

We have tested this code in our shopping cart and it’s working fine. No error was found due to this code snippet.

Kindly re-check your code. You might have made some other changes in WooCommerce.

Thanks,

—
Yours truly,
Sehrish Iftikhar
Level lll Support

Kyle Lynn says:

May 18, 2016 at 4:16 pm

Would this type of thing work with a variable product?

I’ve been looking for a solution that shows the total price when selecting multiple quantities of a variable product.

When using this code it calculates the total based on the minimum price of the variable product as a whole.

Support Department says:

May 31, 2016 at 12:29 pm

Dear Kyle,

Yes, your are right! It will not work with variable products.

Actually this code snippet is only workable for simple products. But you can customize this code for variable products.

Good Luck!

Thanks,

—

Yours truly,
Sehrish Iftikhar
Level lll Support
Email: support@presstigers.com | URL: https://presstigers.com

Paul says:

September 20, 2016 at 12:12 am

Looked for a solution to..

I tried with:

[quote]
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(‘%s %s’,__(‘Totaal Prijs:’,’woocommerce’),’‘.$product->get_price().’‘);
?>

jQuery(function($){
var price =
console.log(price);
var currency = ”;

$(‘[name=quantity]’).change(function(){
var product_total = parseFloat(price * this.value);
$(‘#product_total_price .price’).html( currency + product_total.toFixed(2));

});
});

<?php
}
[/quote]

But I don't get the current selected variation product price -.-..

ashu says:

June 21, 2017 at 4:57 am

can you please provide code which will work for variable product also.

Thanks in advance

PressTigers says:

June 21, 2017 at 10:53 am

Hello Ashu,

This code only works for simple products not for variable products. You can explore WooCommerce plugin to get the variable product price w.r.t quantity.

Thanks & Regards,
Abdullah | WP Plugin Developer
Email: support@presstigers.com

ashu says:

June 28, 2017 at 9:53 am

I don’t think there are any plugin with that functionality. I would like to purchase extension if any.

PressTigers says:

June 29, 2017 at 9:45 am

Hello Ashu,

Current, there is no extension available but our WP specialists can review your modifications and these efforts will be paid at cost 18/hours.

Let us know if you want to proceed then accordingly we will provide you an estimate for your custom task.

Thank you!

Regards,
—
Sehrish | WP Plugin Developer
Email: support@presstigers.com

Vigneshraja K says:

March 27, 2018 at 1:53 pm

please give me the customized code for variable product

Dave Ackermann says:

March 21, 2017 at 4:37 pm

This article just saved my life! Thanks so much to the authors for making it SOOOO easy to implement. It works flawlessly and literally, all i had to do was copy and paste the code! Well done! Thanks so much!

PressTigers says:

March 27, 2017 at 7:11 am

Hello Dave,

No problem, you are very welcome! Glad to hear you got things working!

Regards,
—
Sehrish | WP Plugin Developer
Email: support@presstigers.com

Vigneshraja K says:

March 27, 2018 at 1:52 pm

i need code snippet for variable products

PressTigers says:

March 27, 2018 at 2:55 pm

Hello Vigneshraja,

This code snippet only works for simple products, not for variable products. You can write on WooCommerce support forum hopefully volunteers will help you.

You can also avail our services which will cost $24/hour.

Thanks & Regards,
Abdullah | WP Plugin Developer
Email: support@presstigers.com

kien says:

April 18, 2020 at 9:16 am

2020, still works

Swapnil Thakkar says:

June 1, 2020 at 11:21 am

Thank you very much. This code works for me. But the cart total shows wrong. I removed the cart total and kept only the product total in my site.
Thank you

PressTigers says:

June 4, 2020 at 7:43 am

Hello Swapnil,

Good to know that it helped you. Thank you for visiting us.

Regards,
PressTigers Support Team