Quantity selector not adding to the price

LaFrenchToile
Visitor
2 0 0

Hello everyone. 

As said in the title, I am trying to make it so that when the quantity selector is being used in the product page it also adds up to the price, Here is a screenshot showing what I mean. 

 

 

widgets in question.png

So instead of showing 69.99 it should show 139.98.

 

I have already tried a code based on this thread (https://community.shopify.com/c/shopify-design/help-with-refresh-theme-refreshing-item-price-on-quan...).

 

Also tried looking at different other forum post but no solutions has really been found. 

Replies 3 (3)

CodingSolution4
Tourist
7 0 0

Hi, It needs to multiply price by quantity in js code of theme file. To achieve this functionality where the total price updates dynamically based on the quantity selected in the quantity selector on the product page, you'll need to use JavaScript to listen for changes in the quantity selector and update the total price accordingly.

document.getElementById('quantity').addEventListener('input', function() {
    // Get the quantity value
    var quantity = parseInt(this.value);
    
    // Get the price per item (you can fetch this from your product data or HTML)
    var pricePerItem = 19.99; // Example price per item
    
    // Calculate the total price
    var totalPrice = quantity * pricePerItem;
    
    // Update the total price in the HTML
    document.getElementById('total-price').textContent = '$' + totalPrice.toFixed(2);
});
Helpful? leave Coffee Tip ❤
Chat on WhatsApp: +923246370042
Need a Shopify developer? Hire us at noumanmasood64@gmail.com
LaFrenchToile
Visitor
2 0 0

Hello, thank you for your reply.

 

I tried copy and pasting it to my CSS files but it doesn't seems to be working, I am not sure what I am doing wrong as I have no coding experience. 

CodingSolution4
Tourist
7 0 0

Its not css code. Its a javascript code so you need to paste it in theme.js file. But I think you have no coding experience.

Helpful? leave Coffee Tip ❤
Chat on WhatsApp: +923246370042
Need a Shopify developer? Hire us at noumanmasood64@gmail.com