{"id":58,"date":"2023-12-15T12:24:01","date_gmt":"2023-12-15T12:24:01","guid":{"rendered":"https:\/\/blog.hostinger.io\/es\/support\/2023\/12\/15\/8343753-hostinger-creador-de-sitios-web-como-cambiar-el-formato-del-precio-en-la-tienda-online\/"},"modified":"2025-08-26T20:48:03","modified_gmt":"2025-08-26T20:48:03","slug":"8343753-hostinger-creador-de-sitios-web-como-cambiar-el-formato-del-precio-en-la-tienda-online","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/es\/support\/8343753-hostinger-creador-de-sitios-web-como-cambiar-el-formato-del-precio-en-la-tienda-online\/","title":{"rendered":"Hostinger Creador de Sitios Web: C\u00f3mo Cambiar el Formato del Precio en la Tienda Online"},"content":{"rendered":"

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

\n

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

\n<\/p>

Copia el código<\/h1>
<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> <\/code><\/pre>
\n<\/p>
Personalizar el código<\/h1>
Realiza las siguientes modificaciones en el código dependiendo de lo que quieras cambiar 👇<\/p>
\n<\/p>
Moneda <\/h2>
Copie y pegue el símbolo de moneda de su tienda:<\/p>
let currency = '$';<\/code><\/pre>
Es crucial<\/b> que insertes el valor exacto que ves junto al precio de tu producto:<\/p>
<\/div>
\n<\/p>
Separador de miles<\/h2>
Para mostrar 20000 $ (miles sin separar)<\/p>
const thousandsSeparator = ''; <\/code><\/pre>
Para mostrar $20,<\/b>000 (miles separados por una coma)<\/p>
const thousandsSeparator = ', ';<\/code><\/pre>
\n<\/p>
Céntimos<\/h2>
Para mostrar 20000 $ (sin céntimos)<\/p>
const removeCents = true;<\/code><\/pre>
Para mostrar $20000.00 <\/b>(centavos)<\/p>
const removeCents = false;<\/code><\/pre>
\n<\/p>
Posición en divisas<\/h2>
Para mostrar $20000<\/p>
const currencyInTheEnd = false;<\/code><\/pre>
Para mostrar 20000$<\/p>
 would show € 20000 const currencyInTheEnd = true; <\/code><\/pre>
\n<\/p>
Pegue el código<\/h1>
Dentro del constructor, ve a Configuración<\/b> → Integraciones<\/b> de tu sitio web, y pega el código en el campo Código personalizado<\/a><\/b>. A continuación, guarda los cambios<\/b> y actualiza tu sitio web<\/b>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Aprenda a cambiar el formato de los precios de los productos en su tienda online creada con Hostinger AI Builder<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[262],"tags":[],"class_list":["post-58","post","type-post","status-publish","format-standard","hentry","category-tienda-online"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/8343753-hostinger-website-builder-how-to-change-the-price-format-in-the-online-store\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/8343753-hostinger-creador-de-sitios-web-como-cambiar-el-formato-del-precio-en-la-tienda-online\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts\/58","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts\/58\/revisions"}],"predecessor-version":[{"id":982,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts\/58\/revisions\/982"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/categories?post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/tags?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}