Loading...

How to dynamically modify the product prices in BigCommerce

Daniel C. Published on 22 September, 2011

A lot of clients have asked for a way to dynamically calculate product prices on the product page based on the quantity that is selected. BigCommerce does not offer this feature, so the only workaround is to modify the template files and use a little bit of Javascript to make it happen.

Maybe you want the customer to instantly see what the order total will be if he chooses the quantity on the product page. Just copy-paste the code below at the end of the ProductDetails.html template file.


<script type="text/javascript">
//<![CDATA[
$('#qty_').change(function(){

var a = '%%GLOBAL_ProductPrice%%'; a = a.replace("$","");

a = a.replace(",",""); var c = $('#qty_').val();

var ci = parseInt(c); var ai = parseInt(a);

var cis = ci * ai; var v = formatCurrency(cis);

$('.ProductPrice').text(v); });

function formatCurrency(num){

num = num.toString().replace(/$|,/g,''); if(isNaN(num)) num = "0";

sign = (num == (num = Math.abs(num)));

num = Math.floor(num*100+0.50000000001); cents = num%100;

num = Math.floor(num/100).toString(); if(cents<10) cents = "0" + cents;

for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)

num = num.substring(0,num.length-(4i+3))+','+num.substring(num.length-(4i+3));

return (((sign)?'':'-') + '$' + num + '.' + cents);

} //]]></script>


NOTE: this will work if the quantity box is set to be a drop down menu.

Test it yourself!
Select the quantity from the drop-down and see how the price changes. (base price is $20)

Select the quantity:

$20.00


Remember to always make a back up of your BigCommerce templates by downloading them before making this customization just in case something goes wrong.

Daniel C. Published on 22 September, 2011