You Are Here
PHPStackoverflow

WooCommerce Calculate Subtotal On Quantity Increment

PHP, Woocommerce, Wordpress

A great website User Experience improves your customer experience. So, you must always put efforts towards it being a developer. Your aim should be to make website experience better & better for visiting customers. In this article, we will learn one such functionality. It is known as Calculate Subtotal on WooCommerce Quantity Increment functionality.

E-commerce customers will enjoy an update in WooCommerce single product page. It will bring ease in their online shopping. This feature will enrich their experience. Customers add one product to the cart. After that, they tend to surf further on the website. 

So, while they add another product, it would be great if the pre-existing cart price gets recalculated. This is how your customers will see a recalculated product price. Or else, it would be nice if a ‘Total’ line appears telling how much quantity is added.

You will get a better perspective looking at the screenshot below. This will help in implementing WooCommerce Quantity Increment feature.

Image of improved UX after enabling WooCommerce Calculate Subtotal On Quantity Increment @ Single Product feature

PHP Snippet: Calculate Total On Quantity Increment @ Single Product

/**
 * @snippet       Calculate Subtotal Based on Quantity - WooCommerce Single Product
 * @author        PHP - Stackoverflow
 * @compatible    WooCommerce 4.1
 */

add_action( 'woocommerce_after_add_to_cart_button', 'phpsof_product_price_recalculate' );

function phpsof_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);
		}).change();
	" );
}

So, as WooCommerce Quantity Increment will boost UX, customers will stay for longer. Ultimately, this will benefit e-commerce store. Moreover, a great UX is good to boost Search Engine Optimization ranking.

Where can you add this snippet?

So, you can add this PHP snippet at your child theme function.php file’s bottom. It should be placed before “?>”, if you have it there. Apart from this, CSS goes in your child theme style.css file. 

Is this snippet still valid?  

So, enable this WooCommerce calculate subtotal on quantity increment @ single product function. I have applied this code on the Storefront theme and WordPress friendly hosting PHP 7+. Let me know if everything works as expected. Share it further if this snippet has saved your time.  

Also Read, A Tutorial to Display WooCommerce Product Category Dropdown Widget

Add WooCommerce Order Status Dropdown Filter

Important links: WooCommerce – https://woocommerce.com/

Related Posts