Prices with superscript decimal numbers

Prices with superscript decimal numbers

When displaying prices for products, it is common to hide the decimal character and make the numbers after the decimal character superscript. For example, $19.95 is displayed as $19⁹⁵. PrestaShop doesn't come with this option, but it can be modified to do it. Follow this guide to modify the default PrestaShop 1.6.1.7 theme to display prices this way. Other themes and PrestaShop versions may have different code.

Create the file override/classes/Tools.php with the following:

<?php

class Tools extends ToolsCore
{
    public static function displayPrice($price, $currency = null, $no_utf8 = false, Context $context = null)
    {
        if (!is_numeric($price)) {
            return $price;
        }

        $price = parent::displayPrice($price, $currency, $no_utf8, $context);

        if (!$context) {
            $context = Context::getContext();
        }
        if ($currency === null) {
            $currency = $context->currency;
        } elseif (is_int($currency)) {
            $currency = Currency::getCurrencyInstance((int)$currency);
        }

        if (is_array($currency)) {
            $c_format = $currency['format'];
        } elseif (is_object($currency)) {
            $c_format = $currency->format;
        } else {
            return false;
        }

        $decimal_char = '';

        switch ($c_format) {
            case 2:
            case 3:
                $decimal_char = ',';
                break;
            default:
                $decimal_char = '.';
        }

        $price = str_replace($decimal_char, '<sup>', $price);
        
        if (strpos($price, '<sup>') !== FALSE)
            $price .= '</sup>';
        
        return $price;        
    }
}

Remember to go to Advanced Parameters > Performance and click the "Clear cache" button (or manually delete cache/class_index.php) so PrestaShop can find the override. This will remove the decimal character from all prices and make the numbers after the decimal character superscript.

Unfortunately, it won't affect prices that are formatted using JavaScript. That will require more work. Change line 56 of js/tools.js from:

	return abs_val_string + virgule + (deci_string > 0 ? deci_string : '00');

to:

	return abs_val_string + '<sup>' + (deci_string > 0 ? deci_string : '00') + '</sup>';

This will add the superscript tag, but it will converted to text in product.js, so all the text() function calls need to be changed to html() function calls. There's a lot to change, but they are easy to change since the same change is being made to each line.

Change line 297 of themes/default-bootstrap/js/product.js from:

			$('#our_price_display').text(formatCurrency(parseFloat($('#our_price_display').attr('content')), currencyFormat, currencySign, currencyBlank));

to:

			$('#our_price_display').html(formatCurrency(parseFloat($('#our_price_display').attr('content')), currencyFormat, currencySign, currencyBlank));

and line 805 from:

      $('#our_price_display').text(findSpecificPrice()).trigger('change');

to:

      $('#our_price_display').html(findSpecificPrice()).trigger('change');

and line 808 from:

      $('#our_price_display').text(formatCurrency(priceWithDiscountsDisplay, currencyFormat, currencySign, currencyBlank)).trigger('change');

to:

      $('#our_price_display').html(formatCurrency(priceWithDiscountsDisplay, currencyFormat, currencySign, currencyBlank)).trigger('change');

and line 813 from:

		$('#our_price_display').text(formatCurrency(0, currencyFormat, currencySign, currencyBlank)).trigger('change');

to:

		$('#our_price_display').html(formatCurrency(0, currencyFormat, currencySign, currencyBlank)).trigger('change');

and line 821 from:

		$('#old_price_display span.price').text(formatCurrency(basePriceDisplay, currencyFormat, currencySign, currencyBlank));

to:

		$('#old_price_display span.price').html(formatCurrency(basePriceDisplay, currencyFormat, currencySign, currencyBlank));

and line 856 from:

		$('#ecotax_price_display').text(formatCurrency(ecotax * currencyRate, currencyFormat, currencySign, currencyBlank));

to:

		$('#ecotax_price_display').html(formatCurrency(ecotax * currencyRate, currencyFormat, currencySign, currencyBlank));

and line 804 from:

		$('#unit_price_display').text(formatCurrency(unit_price * currencyRate, currencyFormat, currencySign, currencyBlank));

to:

		$('#unit_price_display').html(formatCurrency(unit_price * currencyRate, currencyFormat, currencySign, currencyBlank));

and line 945 from:

			$(this).children('td').eq(1).text( formatCurrency(discountedPrice * currencyRate, currencyFormat, currencySign, currencyBlank) );

to:

			$(this).children('td').eq(1).html( formatCurrency(discountedPrice * currencyRate, currencyFormat, currencySign, currencyBlank) );

and line 946 from:

		$(this).children('td').eq(2).text(upToTxt + ' ' + formatCurrency(discountUpTo * currencyRate, currencyFormat,

to:

		$(this).children('td').eq(2).html(upToTxt + ' ' + formatCurrency(discountUpTo * currencyRate, currencyFormat,

Then all the JavaScript prices should have superscript numbers after the decimal character.