Hướng dẫn Decimals as Superscript without decimal separator trong Woocommerce

There are many ways in which you can customize your WooCommerce store. We saw one such request on Facebook where the member asked how he can stylise the decimal values on the WooCommerce price.

WooCommerce > Settings has some currency options where you can set the decimal separator, thousands separator, as well as the number of decimal points to be displayed in the price.

If you don’t want any decimal value in your price, just set the ‘Number of Decimals’ value to 0.

In this post, I will explain 5 different ways in which you can display the decimals in the WooCommerce prices on your store.

Let’s see how we can remove the decimal symbol and make the decimal display as superscript.

We will use a WooCommerce filter called ‘formatted_woocommerce_price‘ which is defined in the function wc_price() in the file ‘wc-formatting-functions.php‘.

We first need to find what the decimal is, in the product price. Let’s look at the code snippet:

<?php

add_filter( 'formatted_woocommerce_price', 'ts_woo_decimal_price', 10, 5 );
function ts_woo_decimal_price( $formatted_price, $price, $decimal_places, $decimal_separator, $thousand_separator ) {
    $unit = number_format( intval( $price ), 0, $decimal_separator, $thousand_separator );
    $decimal = sprintf( '%02d', ( $price - intval( $price ) ) * 100 );
    return $unit . '<sup>' . $decimal . '</sup>';
}

In the above example, we calculate the decimal from the price. We use the <sup> HTML tag to display the decimal as superscript and then return the formatted price. The price will be displayed in this format everywhere – product page, shop page, cart & checkout page as well.