Update price on quantity change in Single Product Page – Woocommerce

Update price on quantity change in Single Product Page - Woocommerce


In a Woocommerce based online store wordpress, the price of a product may depend on the number of items a customer wants to purchase. For instance, a customer buying a single item may be charged at a different rate than someone buying multiple quantities of the same item.

To ensure that customers are billed correctly, it is necessary to update the price of the product on the single product page when a customer changes the quantity of the item they wish to purchase.

This functionality can be achieved through custom coding or by using a plugin specifically designed for this purpose in wordpress.

By updating the price on quantity change, customers can have a more accurate understanding of the cost of their purchase, making for a smoother shopping experience in wordpress site.

WooCommerce Calculate Subtotal On Quantity Increment in Single Product Page

Method 1: Use the “Woo Product Quantity Range Price” Plugin

The “Woo Product Quantity Range Price” plugin is a sophisticated tool created for the popular e-commerce platform WooCommerce. This plugin enables online store owners to create quantity-based pricing for their items, providing price flexibility based on order numbers.

With this plugin, retailers may create pricing ranges for certain product quantities, giving consumers discounted rates or special incentives when they buy in bulk. By promoting bulk purchases and encouraging users to spend more, the plugin improves the shopping experience.

Method 2: Programmatically (Without Plugin)

Get the sub-total amount as customers increase the number of products on the single product page by adding the following codes to your function.php file.

add_action( 'woocommerce_after_add_to_cart_button', 'cxc_product_price_recalculate_call_back' );

function cxc_product_price_recalculate_call_back() {
	global $product;
	$price = $product->get_price();
	$currency = get_woocommerce_currency_symbol();
	<div class="cxc-sub-totals">
		<span class="cxc-sub-head">Sub Total:</span><span class="cxc-app-price"></span>
	<style type="text/css">
		.cxc-sub-totals { display: inline-block; border: 1px solid #000; padding: 14px; letter-spacing: 1px; }
		.cxc-sub-totals span.cxc-sub-head { margin-right: 5px; }
	<script type="text/javascript">
		jQuery( document ).ready( function() {
			setTimeout( function() {
			}, 100 );
			jQuery(document).on('change', 'input[name=quantity]', function() { 
				var cxc_qty = jQuery(this).val();
				var price = '<?php echo esc_js( $price ); ?>';
				var cxc_currency = '<?php echo esc_js( $currency ); ?>';
				var cxc_price = ( price * cxc_qty ).toFixed(2);
				jQuery('.cxc-sub-totals > span.cxc-app-price').html( cxc_currency +''+cxc_price );
		} );

We’ve seen Solution dynamically alter the price automatically in this guidance on Codexcoach. If you have any queries about the solution, please leave them in the comments section below. We will love to assist you.

Also Read:

How to Embed Gravity Forms With or Without Shortcode in WordPress


Why isn’t the price updating when I change the quantity on the single product page?

You can achieve this by using jQuery and AJAX to dynamically update the price based on the selected quantity.

How do I test if the code to update the price on the Single Product Page in Woocommerce is working?

You can test the code by adding it to your website and then checking if the price is updating dynamically when you change the quantity on the Single Product Page.

Can I customize the code to update the price on the Single Product Page in Woocommerce?

Yes, you can customize the code to meet your specific requirements. For example, you can change the selectors or the AJAX endpoint to match your website’s setup.

Where should I add the code to update the price on the Single Product Page in Woocommerce?

You can add the code to your child theme’s functions.php file.

Was this article helpful?

Leave a comment

Your email address will not be published. Required fields are marked *