How to Hide The Decimal Point On Product and Service Blocks with CSS

How To Hide The Decimal Point on Prices for Product and Service Blocks

Overview

This article shows you how to remove the trailing “.00” from prices displayed in Product and Service blocks on your PhotoBiz website. You will add a small script in your Global CSS/JS settings that automatically updates price formatting across your site. This helps create cleaner, more professional-looking pricing for your visitors.

Prerequisites

Before you begin, make sure:

You have access to the PhotoBiz Website Builder
Your products/services are already set up and active
You are comfortable copying and pasting a short snippet of CSS

STEP ONE

Log into your PhotoBiz account and click WEBSITE in the left-side menu.

STEP TWO

Open the Global CSS/JS settings.

In the Website Builder, click DESIGN at the top center of the control panel.

Then click EDIT DESIGN SETTINGS to open your global design settings.

In the right-side panel, click Global CSS/JS. This section allows you to apply custom code across your entire website.

STEP THREE

Add the custom CSS to hide the decimal on prices.

Paste the following code into the CSS BODY field:

Copy & Paste Code:

<script>
(function () {
  var SELECTOR = '.service-block__price, .product-block__price, .service-detail__price, .product-detail__price';
  var scheduled = false;

  function fixPrices() {
    scheduled = false;

    document.querySelectorAll(SELECTOR).forEach(function (el) {
      var raw = (el.textContent || "").replace(/\u00A0/g, " "); // normalize NBSP
      // Only work if it still has trailing .00 (prevents endless rewriting)
      if (!/\.00\s*$/.test(raw)) return;

      el.textContent = raw.trim().replace(/\.00(?=\s*$)/, "");
    });
  }

  function scheduleFix() {
    if (scheduled) return;
    scheduled = true;
    requestAnimationFrame(fixPrices); // throttle to once per frame max
  }

  // Initial passes
  scheduleFix();
  setTimeout(scheduleFix, 200);
  setTimeout(scheduleFix, 800);

  // Watch for late-injected content, but throttled
  var obs = new MutationObserver(scheduleFix);
  obs.observe(document.body, { childList: true, subtree: true, characterData: true });
})();
</script>

This CSS targets the logo container in the website header and hides it from view across all pages.

FINAL STEP

Click Save to apply your changes.

Once saved, the “.00” decimal will no longer appear in prices shown in your Product and Service blocks. You should see cleaner price formatting across your website.

Additional Options or Helpful Notes

This update only affects Product and Service blocks in the Website Builder

The script runs automatically and updates prices even if content loads later on the page

No changes are made to your actual product pricing, this only affects display

This does not effect client galleries events

Troubleshooting or FAQs

The decimal is still showing
Clear your browser cache and refresh the page. Then confirm the code is saved in the Global CSS/JS section and that it was pasted exactly as shown.

Previous Post Next Post

How To Customize Service Detail Layout

May 31, 2024

How To Change Products Block Layout

July 30, 2025

How To Change Services Block Layout

July 30, 2025

How To Add Custom CSS To The Website

September 4, 2025