Show Product Price times Selected Quantity on WooCommerce Product Page

The goal is to show the total price of a purchase of a particular product based on the quantity ordered. Example if you wish to buy 3 mugs for $50, then a “Total: $150” ¬†will be shown. If you wish to changed it to something like quantity of 5, then it will display¬†“Total: $250”, and so on..

Now. which hook to use? I particularly choose “woocommerce_single_product_summary”.

You can see it on in content-single-product.php in the templates folder of woocommerce. It’s something like below:

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * woocommerce_single_product_summary hook
 *
 * @hooked woocommerce_template_single_title - 5
 * @hooked woocommerce_template_single_rating - 10
 * @hooked woocommerce_template_single_price - 10
 * @hooked woocommerce_template_single_excerpt - 20
 * @hooked woocommerce_template_single_add_to_cart - 30
 * @hooked woocommerce_template_single_meta - 40
 * @hooked woocommerce_template_single_sharing - 50
 */
do_action( 'woocommerce_single_product_summary' );

The numbers there will be it’s position. I don’t have to explain everything in there. You should get a hint by now of what it’s doing.

So our code would be like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
// we are going to hook this on priority 31, so that it would display below add to cart button.
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;display:none">%s %s</div>',__('Product Total:','woocommerce'),'<span class="price">'.$product->get_price().'</span>');
    echo sprintf('<div id="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 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(price * this.value),
                        cart_total = parseFloat(product_total + current_cart_total);
 
                        $('#product_total_price .price').html( currency + product_total.toFixed(2));
                        $('#cart_total_price .price').html( currency + cart_total.toFixed(2));
                    }
                    $('#product_total_price,#cart_total_price').toggle(!(this.value <= 1));
 
                });
            });
        </script>
    <?php
}
?>

Paste this in your functions.php and you will have something like this image below:
Product total price

Please take note that this will only work on Simple Product page. Also price calculation may not be exact with other plugins changing the price. If you need an accurate calculation that will work with other product types, try my listed plugin below.
If you have questions, let me know in comments below.

UPDATE

By popular requests, here’s a plugin that can do more than this tutorial.
WooCommerce Product Price x Quantity Preview. This is compatible with WooCommerce Dynamic Pricing & Discounts.

You may also like...

10 Responses

  1. Daniel says:

    Hi Reigel,

    Thanks for the easy snippet of code. It’s working great on the site, but I’m having one very minor issue. I’m using WooCommerce Dynamic Pricing plugin and I have set MIN/MAX/STEP quantities, with a drop down selection box. Right now, the first quantity “25” is selection on loading the page. However, the price does not automatically reflect this quantity with your code. Instead, I have to manually select a quantity to make it update.

    Is there any quick adjustment to your code that could be made to allow it to show the right price from first page load, without having to manually select a quantity?

    Thanks a lot!

    Daniel

  2. Daniel says:

    Thanks for the quick reply!

    I tried your suggestion and it worked perfectly. Thanks a lot.

  3. Edward says:

    This is what I search!

    Is it possible to just paste end of theme’s ‘function.php’?
    It broke my site because of starting of ” <?php "

    Thanks!

    • Reigel Gallarde says:

      you can remove “< ?php" and "?>” if you are going to paste it on your functions.php

  4. jake says:

    Hi reigel gallarde I’m having the same problem as daniel. I am using dynamic pricing as well and based on the quantity they get a fixed price discount your plugin is not showing the discount price just multiplying by the original price.