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:

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:

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

Doing this and clicking on “Save Changes” will display the decimal point as a 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:

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 );
}

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.