Display the total price on the WooCommerce single product page with the original product price * minimum quantity

KuerbanAliye
November 6, 2020
241 views
2 votes
3 Answers

I’m looking to create a PHP code snippet that display the total price on the WooCommerce single product page with the original product price * minimum quantity

Based on WooCommerce – auto update total price when quantity changed answer code, this is what i have so far:

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>',__('Prezzo Totale:','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
}

The problem is that it shows the price for the quantity of one product when viewing the single product page. The change event occurs when the quantity has been changed, therefore no calculations are performed before this event has taken place.

I have a B2B website, so when customers view the single product page, they immediately see the minimum quantity, so how can I get the total price right away for the minimum quantity for each product?

Answers

The following code takes into account the product quantity when loading the page, then the price is updated when changing the product quantity.

Explanation via comment tags added in the code

function action_woocommerce_single_product_summary() {
    global $product;
    
    // Getters
    $price = $product->get_price();
    $currency_symbol = get_woocommerce_currency_symbol();
    
    // let's setup our div
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>', __('Product Total:','woocommerce'), '<span class="price">' . $currency_symbol . $price . '</span>' );
    ?>
    <script>
    jQuery(function($) {
        // jQuery variables
        var price = <?php echo $price; ?>, 
            currency = '<?php echo $currency_symbol; ?>',
            quantity =  $( '[name=quantity]' ).val();
            
        // Code to run when the document is ready
        var product_total = parseFloat( price * quantity );
        $( '#product_total_price .price' ).html( currency + product_total.toFixed( 2 ) );
            
        // On change
        $( '[name=quantity]' ).change( function() {
            if ( ! ( this.value < 1 ) ) {
                product_total = parseFloat( price * this.value );

                $( '#product_total_price .price' ).html( currency + product_total.toFixed( 2 ) );
            }
        });
    });
    </script>
    <?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', 'action_woocommerce_single_product_summary', 31, 0 );

$product->get_price() will return price for 1 product.

You can use get_min_purchase_quantity() and multiply into price for first time.

add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 31 );
function woocommerce_total_product_price() {
    global $woocommerce, $product; 
    // let's setup our divs 
$price = $product->get_price();
$min_qnty = $product->get_min_purchase_quantity();
$initial_price = floatval($price) * intval ($min_qnty);
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Prezzo Totale:','woocommerce'),'<span class="price">'.$initial_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
}

I had a similar issue, and found many answers around, but this one I wrote based on the previous answers and online sources is the only one that worked perfectly with minimum quantities and page reload issues not showing the right total price

// Priority 31 is placed below the 'add to cart' button
add_action( 'woocommerce_single_product_summary', 'action_woocommerce_single_product_summary', 31, 0 );

function action_woocommerce_single_product_summary() {
    global $product;
    
    $price = $product->get_price();
    $currency_symbol = get_woocommerce_currency_symbol();
    $min_qnty = $product->get_min_purchase_quantity();
    $initial_price = floatval($price) * intval ($min_qnty);
    
    // leave the span class 'prezzo' as it is or it won't render the price
    echo sprintf('<div id="product_total_price">%s %s</div>', __('Total:','woocommerce'), '<span class="prezzo">' . $currency_symbol . $initial_price . '</span>' );
    ?>
    <script>
    jQuery(function($) {
        // vars
        var price = <?php echo $price; ?>, 
            currency = '<?php echo $currency_symbol; ?>',
            quantity =  $( '[name=quantity]' ).val();
            
        var product_total = parseFloat( price * quantity );
        $( '#product_total_price .prezzo' ).html( currency + product_total.toFixed( 2 ) );
            
        // On change
        $( '[name=quantity]' ).change( function() {
            if ( ! ( this.value < 1 ) ) {
                product_total = parseFloat( price * this.value );

                $( '#product_total_price .prezzo' ).html( currency + product_total.toFixed( 2 ) );
            }
        });
    });
    </script>
    <?php
}

Please signup or login to give your own answer.

Click here to cancel reply.