Display product total and cart subtotal on quantity change in WooCommerce product page

Question

The idea is simple. On the WooCommerce product page, as the customer changes quantity, display the product total (increase or decrease in price) price and the cart subtotal.

I'm stuck right now. I get no errors even with debug turned on. Nothing shows on the product page.

add_action( 'woocommerce_after_add_to_cart_form', 'total_product_and_subotal_price' );
function total_product_and_subotal_price() {
    global $product;
    // the div section
    echo sprintf('',__('Product Total:','woocommerce'),''.$product->get_price().'');
    echo sprintf('',__('Cart Total:','woocommerce'),''.$product->get_price().'');
    ?>
        <script>
            jQuery(function($){
                var price = get_price(); ?>,
                    current_cart_total = cart->cart_contents_total; ?>,
                    currency = '';
                $('[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
}

LoicTheAztec LoicTheAztec · Accepted Answer · 2020-06-08T22:06:38

There are some mistakes in your code, try the following that will display dynamically:

The product total amount from product price multiplied by the selected quantity
The sum of the Cart subtotal and the product total amount.

The code based on yours:

add_action( 'woocommerce_after_add_to_cart_form', 'total_product_and_subotal_price' );
function total_product_and_subotal_price() {
    global $product;

    $product_price = (float) wc_get_price_to_display( $product );
    $cart_subtotal = (float) WC()->cart->subtotal + $product_price;

    $price_0_html  = wc_price( 0 ); // WooCommmerce formatted zero price (formatted model)
    $price_html    = '<span class="amount">'.number_format($product_price, 2, ',', ' ').'</span>';
    $subtotal_html = '<span class="amount">'.number_format($cart_subtotal, 2, ',', ' ').'</span>';

    // Display formatted product price total and cart subtotal amounts
    printf('<div id="totals-section"><p class="product-total">%s</p><p class="cart-subtotal">%s</p></div>',
        str_replace([' amount','0,00'], ['',$price_html], $price_0_html), // formatted html product price
        str_replace([' amount','0,00'], ['',$subtotal_html], $price_0_html) // Formatted html cart subtotal
    );
    ?>
    <script>
    jQuery( function($){
        var productPrice      = <?php echo $product_price; ?>,
            startCartSubtotal = <?php echo $cart_subtotal; ?>;

        function formatNumber( floatNumber ) {
            return floatNumber.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ').replace('.', ',');
        }

        $('input[name=quantity]').on( 'input change', function(){
            var productQty   =  $(this).val() == '' ? 1 : $(this).val(),
                productTotal = parseFloat(productPrice * productQty),
                cartSubtotal = productTotal + startCartSubtotal - productPrice;

            cartSubtotal = $(this).val() > 1 ? parseFloat(cartSubtotal) : parseFloat(startCartSubtotal);

            $('#totals-section > .product-total .amount').html( formatNumber(productTotal) );
            $('#totals-section > .cart-subtotal .amount').html( formatNumber(cartSubtotal) );
        });
    });
    </script>
    <?php
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

Display product total and cart subtotal on quantity change in WooCommerce product page

1 Answers