Introduction
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.
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.
<?php
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>
</div>
<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; }
</style>
<script type="text/javascript">
jQuery( document ).ready( function() {
setTimeout( function() {
jQuery('input[name=quantity]').change();
}, 100 );
jQuery(document).on('change', 'input[name=quantity]', function() {
var cxc_qty = jQuery(this).val();
var price = '<?php echo esc_js( $price ); ?>';
var comman_price = '<?php echo esc_js( $price ); ?>';
var cxc_currency = '<?php echo esc_js( $currency ); ?>';
if( jQuery(this).closest( '.entry-summary' ).find('.cart').hasClass('variations_form') ){
var variation_arr = jQuery.parseJSON(jQuery(this).closest( '.entry-summary' ).find('.cart').attr('data-product_variations'));
var v_id = jQuery(this).closest( '.entry-summary' ).find('.cart .variation_id').val();
if( variation_arr !== undefined && variation_arr.length > 0 ){
jQuery(variation_arr).each(function (key, value) {
if( v_id == value.variation_id ){
price = value.display_price;
}
});
}
if( v_id == '' || v_id == 0 || v_id === undefined ){
price = comman_price;
}
}
var cxc_price = ( price * cxc_qty ).toFixed(2);
jQuery('.cxc-sub-totals > span.cxc-app-price').html( cxc_currency +''+cxc_price );
});
jQuery(document).on('change', '.variations select', function() {
setTimeout( function() {
jQuery('input[name=quantity]').change();
}, 100 );
});
} );
</script>
<?php
}
?>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
FAQs
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.
For variation product it’s not working, it’s picking up the first variation price always and makes the whole calculation with it.
Thank you for bringing this to our attention. Our technical team worked diligently to address the problem, and we can now confirm that the correct prices for all product variations are being accurately displayed.
I confirm that your code takes the lowest price of all variations of a product and multiplies that price with the quantity selected. So it doesn’t take the price of the selected variation as it should do. Maybe you could revise the code? Thx, Frank