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 = '€';
const thousandsSeparator = '.';
const removeCents = false;
const priceInTheEnd = false;
let fullPrice;
const addCommaToPrice = (price, currency) => {
/* currency at the end */
if (price.innerText.slice(0, currency.length) !== currency) {
fullPrice = price.innerText.substring(0, price.innerText.indexOf(currency));
}
/* currency in front */
else {
fullPrice = price.innerText.slice(currency.length);
}
/* if cents exist */
if (removeCents) {
fullPrice = fullPrice.slice(0, -3);
}
fullPrice = fullPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
if (priceInTheEnd) {
fullPrice = `${fullPrice} ${currency}\n`;
}
else {
fullPrice = `${currency} ${fullPrice}\n`;
}
price.innerText = fullPrice;
};
const 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, currency);
});
}
/*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'), currency);
addCommaToPrice(product.querySelector('.cart__sale-price'), currency);
}
else {
addCommaToPrice(product.querySelector('.cart__price'), currency);
}
})
if (!priceChanged(document.querySelector('.cart__title span'))) {
addCommaToPrice(document.querySelector('.cart__title span'), currency);
}
}
/*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'), currency);
addCommaToPrice(product.querySelector('p.product-list-item__price-content'), currency);
}
else {
addCommaToPrice(product.querySelector('.product-list-item__price-wrapper span'), currency);
}
})
}
}, 500);
</script>
Customize the Code
Make the following edits in the code depending on what you'd like to change 👇
Currency
Copy and paste the currency symbol from your store:
let currency = '$';
It's crucial that you insert the exact value you see next to your product price:
Thousands separator
To show $20000 (thousands not separated)
const thousandsSeparator = '';
To show $20,000 (thousands separated by a comma)
const thousandsSeparator = ', ';
Cents
To show $20000 (no cents)
const removeCents = true;
To show $20000.00 (cents)
const removeCents = false;
Currency position
To show $20000
const currencyInTheEnd = false;
To show 20000$
would show € 20000 const currencyInTheEnd = true;
Paste the Code
Within the builder, go to your website's Settings → Integrations, and paste the code in the Custom code field. Then, save the changes and update your website.