I'm use Magento 2.4 and I need to change the format of the final price. I need to add a class for decimals. I want to add some css style to the decimals in the price. For example decimals must be much smaller than other numbers in the price. How I can make my final price to be like this:

enter image description here

Thank you


I'm found something maybe will help to find the solution much quick. How I can use this for example in the product list?

$first_amount = 29.95;
$my_array = explode(".", $first_amount);
echo $my_array[0];
echo $my_array[1];

also I found this solution, but the same I don't know how I can implement this for magento 2

$float        = 12.054;
$parts        = explode('.', (string)$float);
$whole_number = $parts[0];
$numerator    = trim($parts[1], '0');
$denominator  = pow(10, strlen(rtrim($parts[1], '0')));

1 Answer 1


I assuming you already know where to edit the price in PDP. So is simple CSS

<span class="price-test">
$60<small class="price-decimals">99
    <small class="price-decimal-text">


small.price-decimals {
    display: flex;
    font-size: 1.5rem;
    flex-direction: column;
    /* line-height: 14px; */

span.price {
    display: flex;
    font-size: 3rem;

span.price-test {
    display: flex;
    font-size: 3rem;
    font-weight: 700;

small.price-decimal-text {
    font-size: 1.4rem;
    margin-top: 1px;

This is how it looks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.