From a UX point of view, ecommerce customers may enjoy a little improvement on the WooCommerce single product page. As soon as they increase the add to cart quantity, it’d be nice if product price could be recalculated or maybe if a “TOTAL” line could appear so that users always know how much they are about to add to cart.

Honestly, this is hard to explain it this way, so the best is if you look at the screenshot. Enjoy!

Product price is $34 and quantity is 10, therefore the “Total” is now $340. Whenever quantity changes, “Total” updates its value.

PHP Snippet: Calculate Total Price Upon Quantity Increment @ WooCommerce Single Product Page

 * @snippet       Calculate Subtotal Based on Quantity - WooCommerce Single Product
 * @how-to        Get FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 4.1
 * @donate $9

add_action( 'woocommerce_after_add_to_cart_button', 'bbloomer_product_price_recalculate' );

function bbloomer_product_price_recalculate() {
	global $product;
	echo '<div id="subtot" style="display:inline-block;">Total: <span></span></div>';
	$price = $product->get_price();
	$currency = get_woocommerce_currency_symbol();
	wc_enqueue_js( "		
		$('[name=quantity]').on('input change', function() { 
			var qty = $(this).val();
			var price = '" . esc_js( $price ) . "';
			var price_string = (price*qty).toFixed(2);
			$('#subtot > span').html('" . esc_js( $currency ) . "'+price_string);
	" );

Leave a Reply