Search the site:

Home Blog How to stylise the decimal values in prices in WooCommerce

How to stylise the decimal values in prices in 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.

stylise the decimal values in WooCommerce through settings

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.

1. Decimals as Superscript without decimal separator:

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:

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 –

.stylise the decimal values in WooCommerce in superscript

2. Decimals as Superscript with decimal separator:

If you want the decimal separator in the superscript, you can easily do that too. If you look at our filter, it has an argument called $decimal_separator. This is the same separator which we have set in the WooCommerce settings. We just have to include that in our final result. Here is an example –

Whatever text we add inside the <sup> tags will be displayed as superscript. Here is the screenshot of the product page –

stylise the decimal values in WooCommerce in superscript

3. Decimals as Subscript without decimal separator:

You can use the subscript tag ‘<sub>’ in place of the superscript tag ‘<sup>‘  in the above example, and the decimals will be displayed at the bottom.

Here is how the product page will look like –

4. Decimals as Subscript with decimal separator:

You can display the decimals in the subscript with decimal separator in the same way as we displayed the superscript. You just need to add the variable $decimal_separator in the return value. Here is the code snippet –

The price will be displayed like this –

stylise the decimal values in WooCommerce in subscript

5. Decimals in small font:

If you want to display the decimals in a small font, you can do that using the HTML tag called ‘<small>‘. Here is the code snippet –

The price on the product page will look like –

stylise the decimal values in WooCommerce in small font

The prices will be displayed in the same way on the shop page and cart page as well. Here is how the prices in the shop & cart page will be displayed if we stylise the decimals as superscript –

stylise the decimal values in WooCommerce on cart page stylise the decimal values in WooCommerce on shop page

The code for calculating the decimals will be same. You just have to change the final return value to match your needs. If you have any other needs to stylise the decimals in WooCommerce prices, do let us know.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Bri Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest
Notify of
Bri
Guest
Bri

Hi, I love this idea and for a while had it on my site. However, it seems that for some odd reason it subtracts 1p from my shipping price when active. So, £2.95 becomes £2.94

If you are able to fix this issue then I will add the function back to my site in a flash, otherwise it is unusable in its current form.

from purchased

Subscribe Now