All Collections
Website Builder
Online Store
Website Builder: How to Change the Price Format in the Online Store
Website Builder: How to Change the Price Format in the Online Store

Learn how to change the format of product prices in your online store created with Hostinger AI Builder

Austėja Baranauskaitė avatar
Written by Austėja Baranauskaitė
Updated over a week ago

This article explains how to change the format of product prices in the online store created with Hostinger Website Builder.

The changes will be visible in product list sections, on product pages, and in the shopping bag. The default prices will still be shown in the checkout, invoices, and store management area 💡

Copy the Code

<script>
const currency = 'USD';
const thousandsSeparator = ',';
const cents = '';
let fullPrice;
function addCommaToPrice(price) {
fullPrice = price.innerText.split(/([^\d.,]+)/)[2];
if (fullPrice.slice(-3) === '.00') {
fullPrice = fullPrice.slice(0, -3) + `${cents}\n`;
}
else {
fullPrice = fullPrice + '\n';
}
fullPrice = fullPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
fullPrice = currency + fullPrice;
price.innerText = fullPrice;
};
function priceChanged(price) {
if (price.innerHTML.indexOf('<br>') > -1) {
return true;
}
else {
return false;
}
};
setInterval(() => {
/*Product pages*/
if (document.querySelector('.block-product__price') && !priceChanged(document.querySelector('.block-product__price'))) {
document.querySelectorAll('.block-product__price').forEach(price => {
addCommaToPrice(price);
});
}
/*Cart*/
if (document.querySelector('.cart__price') && !priceChanged(document.querySelector('.cart__price'))) {
document.querySelectorAll('li.cart__list-item').forEach(product => {
if (product.contains(product.querySelector('.cart__sale-price'))) { addCommaToPrice(product.querySelector('.cart__price'));
addCommaToPrice(product.querySelector('.cart__sale-price'));
}
else { addCommaToPrice(product.querySelector('.cart__price'));
}
})
if (document.querySelector('.cart__title span').innerText.slice(-1) !== currency) {
addCommaToPrice(document.querySelector('.cart__title span'));
}
}
/*Section*/
if (document.querySelector('.product-list-item__price-wrapper span') && !priceChanged(document.querySelector('.product-list-item__price-wrapper span'))) {
document.querySelectorAll('.product-list-item').forEach(product => {
if (product.querySelector('p.product-list-item__price-content')) {
addCommaToPrice(product.querySelector('.product-list-item__price-wrapper span'));
addCommaToPrice(product.querySelector('p.product-list-item__price-content'));
}
else {
addCommaToPrice(product.querySelector('.product-list-item__price-wrapper span'));
}
})
}
}, 500);
</script>

Customize the Code

Make the following edits in the code depending on what you'd like to change 👇

Currency

For example, to show USD instead $

let currency = 'USD';

Thousands separator

To show $20000

const thousandsSeparator = ''; 

To show $20,000

const thousandsSeparator = ', ';

Cents

To show $20000

const cents = ''; 

To show $20000.00

const cents = '.00';

Paste the Code

Within the builder, go to your website's SettingsIntegrations, and paste the code in the Custom code field. Then, save the changes and update your website.

Did this answer your question?