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

Written by Tommy
Posted on Thu, 06/10/2021 - 14:44
7 views

Share Everywhere

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.
If you don’t want any decimal value in your price, just set the ‘Number of Decimals’ value to 0.

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.

The product page will look like this –

The product page will look like this –

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
Profile picture for user Tommy
Câu nói tâm đắc: “Điều tuyệt với nhất trong cuộc sống là làm được những việc mà người khác tin là không thể!”