Este artículo explica cómo cambiar el formato de los precios de los productos en la tienda online creada con Hostinger Website Builder.

Los cambios serán visibles en las secciones de la lista de productos, en las páginas de productos y en la bolsa de la compra. Los precios predeterminados se seguirán mostrando en la caja, las facturas y el área de gestión de la tienda 💡.

Copia el código

<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>

Personalizar el código

Realiza las siguientes modificaciones en el código dependiendo de lo que quieras cambiar 👇

Moneda

Copie y pegue el símbolo de moneda de su tienda:

let currency = '$';

Es crucial que insertes el valor exacto que ves junto al precio de tu producto:

Separador de miles

Para mostrar 20000 $ (miles sin separar)

const thousandsSeparator = '';

Para mostrar $20,000 (miles separados por una coma)

const thousandsSeparator = ', ';

Céntimos

Para mostrar 20000 $ (sin céntimos)

const removeCents = true;

Para mostrar $20000.00 (centavos)

const removeCents = false;

Posición en divisas

Para mostrar $20000

const currencyInTheEnd = false;

Para mostrar 20000$

 would show € 20000 const currencyInTheEnd = true;

Pegue el código

Dentro del constructor, ve a Configuración → Integraciones de tu sitio web, y pega el código en el campo Código personalizado. A continuación, guarda los cambios y actualiza tu sitio web.