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.
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 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 –
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 –
Increase WooCommerce Store Sales
"Tyche’s Softwares are amazing developers. Their plugin, Abandon Cart is a great plugin that recovers sales with WooCommerce. Before buying the plugin, the admin demo was great for testing purpose! The after sale support by Vishal and regular updates help a lot. The documentation is very clear and to point which also helps. I highly recommend plugins from Tyche Softwares!" - Kamlesh Vidhani
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 –
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 –
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 –
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.