Rounding the Price in Product Cards

In the template code for displaying product prices, you typically encounter the following structure:

<p class="plan-price"><span>#{currency.symbol}#</span>#{price}#</p>

<p class="font-normal no-margin priceCurrency">#{currency.text}#/#{billingPeriod}#</p>

<div class="button-wrapper">

   <button class="btn btn-primary" data-bind="click: select">SELECT</button>

</div>

In the first line, you find a dynamic price variable #{price}#. To format this price to always display two decimal places, replace the #{price}# variable with a formatted number line like so:

<g:formatNumber number="#{price}#" format="###,##0.00"/>

With this adjustment, the price will be displayed with two decimal places, enhancing clarity and consistency in price presentation across product cards.