Hostinger AI Builder: How to change the price format in the online store in manual mode

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

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)
      );
    } else {
      /* currency in front */
      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);
      }
    }

    const priceSelector =
      ".product-list-item__price-wrapper span:not(.product-list-item__price-range)";

    /*Section*/
    if (
      document.querySelector(priceSelector) &&
      !priceChanged(document.querySelector(priceSelector))
    ) {
      document.querySelectorAll(".product-list-item").forEach((product) => {
        if (product.querySelector("p.product-list-item__price-content")) {
          addCommaToPrice(product.querySelector(priceSelector), currency);
          addCommaToPrice(
            product.querySelector("p.product-list-item__price-content"),
            currency
          );
        } else {
          addCommaToPrice(product.querySelector(priceSelector), currency);
        }
      });
    }
  }, 500);
</script>

Customize the code

Make the preferred edits in the code depending on what you’d like to change. For example, change the currency symbol.

Paste the code

Within the builder manual mode, go to your website’s Settings → Integrations, and paste the code in the Custom code field. Then, save the changes and update your website.