How to format WooCommerce prices

For reasons of design, presentation or to be consistent with the store or brand theme, we may often want to display our prices in different formats. In this post, you will learn how to format WooCommerce prices using the Settings option as well as the Code Editor.

The post covers the following three points:

1. Replacing Decimal Separators
2. Replacing Thousand Separators
3. Formatting Prices to apply styles such as bold, italics or underline

1. Replacing Decimal Separators:

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:

 

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. 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.
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.
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.

Another advantage is for when you want these changes done only for a specific product & not all products of your store. Using the code editor provides you that flexibility.

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.

Example: Adding an underline to the decimal portion of the price.

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

The above code snippet, when inserted in the functions.php file of the child theme, adds an underline to the decimal portion of the price:

 

You can use other HTML tags in the same way. If you would like to know how you can display the decimal value as a superscript or a subscript, read this post.

2. Replacing Thousand Separators:

Just like decimal separators are displayed differently in some countries, so is the case with thousand separators.

For instance, in countries such as Brazil, South Africa or Spain, thousand separators are denoted by a space or a dot/point. In these countries, thirteen thousand five hundred could be written as 13 500 or 13.500

When you are designing your store for this audience, you have to ensure that you edit the thousand separator accordingly.

Just as decimal separators, there are two ways of doing this, either through WooCommerce->Settings or through the code editor.
Changing the Thousand 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:

Changing the value in the Thousand separator text box to a space in place of a comma (“,”), will change the way thousand separator is displayed. Note that you have to enter a space in this box. Simply erasing the comma will not result in the thousand separator changing to a space.

Click on “Save changes” and view the product:

You can see that there is now a space in place of the thousand separator.

To avoid any confusion, you can set the decimal places as “0” through WooCommerce->Settings for prices in which there is no decimal value:

After entering the number of decimals here as “0”, click on “Save changes” and view the product again:

 

Changing the Thousand Separator through the code editor

Similarly, we can change the thousand separator using code snippets. As mentioned above in the decimal separator section, using the code editor always has more advantages as we can customise or style the price the way we want to, and even for a specific product if not the entire store.

Let us now try to change the thousand separator to a point (.) using a code snippet.

Note: A pre-requisite to this is that you must leave the thousand separator box blank in WooCommerce->Settings. No spaces either.

add_filter( 'wc_price', 'woo_format_thousand_separator', 10, 4 ); 
function woo_format_thousand_separator( $return, $price, $args, $unformatted_price) 
{ 
  $formatted_price=number_format($price,0,' ','.'); 
  return sprintf( '%s %s', get_woocommerce_currency_symbol(), $formatted_price); 
}

The number_format function is an in-built PHP function which accepts 4 arguments:

1. The number or in our case, the price.
2. Number of decimal places. We have set it to 0 as we do not wish to display any decimal values.
3. The decimal separator you wish to use. We have set this to a blank value.
4. The thousand separator. We have set this to a dot (.).

This code snippet, when added to the functions.php file of your child theme will display the thousand separator as a dot or point (.) as illustrated by the screenshot below:

3. Formatting WooCommerce Prices:

Now that you know how to format decimal values and thousand separators, the same applies to prices in general. While you cannot directly format these values using the Settings option, you can do so using the Code Editor by making slight modifications to the code above.

Example: Writing the product price in italics.

In default circumstances, the product price is displayed as follows:

What if you want to add a style to this, e.g. write it in italics?

You can achieve this by making slight modifications to the code snippets above.

Just copy this code to the functions.php file of your child theme:

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

Doing this will display the price, along with the decimal point, in italics:

 

A slight change in the code snippet will also keep the decimal portion from displaying:

add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
function woo_format_price_italics( $return, $price, $args, $unformatted_price ) { 
$unit = intval( $price ); 
return sprintf( '<i>%s %d</i>', get_woocommerce_currency_symbol(), $unit); 
}

As you can see, you can view the price in italics here, without the decimal portion:

Studying the snippet will enable you to easily format WooCommerce prices in your own ways.