Search the site:

How to replace decimal points with commas or spaces in WooCommerce prices

Often, you may have decimal values in your product prices. This is quite common in case of an online grocery store where prices are determined by the weight of the vegetables:

Replace decimal points with commas or spaces in WooCommerce - When the decimal separator is a dot or point

 

Decimal Separator:

In many countries, the decimal separator is represented by a dot (.). However, this is not true for a lot of other countries such as Spain, South Africa, Brazil, Sweden, China and 70 other countries where the decimal separator is a comma.

Countries like Brazil use the dot (.) to sometimes separate thousands. For example, twelve thousand and five hundred is written not as “12,500” but as “12.500” or even “12 500”.

Prices thus need to be displayed differently while designing a store for a particular audience or nationality. In this post, we will see how we can replace decimal points with commas or spaces in WooCommerce.

There are two ways of doing this in- either directly through WooCommerce Settings or through the code editor.

1. Changing the Decimal Separator through WooCommerce Settings

Hover your mouse over the WooCommerce label in your WordPress dashboard, and click on Settings. In WooCommerce->Settings, the General tab shows the following as you scroll down:

Replace decimal points with commas or spaces in WooCommerce - WooCommerce Settings

Here, you can change the value of “Decimal Separator” from “.” to “,”

Replace decimal points with commas or spaces in WooCommerce - Change decimal separator value in WooCommerce Settings

Doing this and clicking on “Save Changes” will display the decimal point as a comma:

Replace decimal points with commas or spaces in WooCommerce - Decimal separator changed to comma

In this way, you can use any separator of your choice.

2. Changing the Decimal Separator through the code editor

While WooCommerce provides a direct way to change the decimal separator, learning to do this via code is useful.

In this example, we will demonstrate how to replace the decimal point with  a space using the code editor.

There is a small code snippet that you can insert in the functions.php file of your child theme to do just this.

(To know why we edit the functions.php of the child theme and not directly the functions.php file, read this post.)

Code Snippet:

add_filter( 'wc_price', 'woo_hide_decimal_point', 10, 4 );
function woo_hide_decimal_point( $return, $price, $args, $unformatted_price ) {
$unit = intval( $price );
$decimal = sprintf( '%02d', ( $price-$unit ) * 100 );
return sprintf( '%s %d %s', get_woocommerce_currency_symbol(), $unit, $decimal );
}

And the result is that the decimal point is removed and replaced by a space:

Replace decimal points with commas or spaces in WooCommerce - Decimal separator changed to space

Note: The code will work only after you set the decimal separator to a “.” in WooCommerce->Settings.

You can replace the space with a comma in a similar way by changing the code just a little bit.

add_filter( 'wc_price', 'woo_replace_decimal_point', 10, 4 );
function woo_replace_decimal_point( $return, $price, $args, $unformatted_price ) {
$unit = intval( $price );
$decimal = sprintf( '%02d', ( $price-$unit ) * 100 );
return sprintf( '%s %d,%s', get_woocommerce_currency_symbol(), $unit, $decimal );
}

Replace decimal points with commas or spaces in WooCommerce - Decimal separator changed to comma through code - Slight difference in spaces

Why it’s better to use code snippets over WooCommerce->Settings to replace the decimal separator:

Using the code editor as opposed to WooCommerce->Settings to replace decimal points has many advantages.

One  is that you can format the price the way you want to. If you notice in the image above, the price has a space after the currency symbol. This space is missing in the first screenshot of this post where the decimal point has been replaced through WooCommerce->Settings.

By using code snippets, you can also display the decimal portion of the price in different styles by inserting HTML tags such as <b>,<u>,<i>,<sup>,<sub> and many more.

If you would like to know how you can display the decimal value as a superscript or a subscript, read this post.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments
from purchased

Subscribe for more offers

Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins and 50% OFF on Bundles
0
Would love your thoughts, please comment.x
()
x