Adding The Local Currency In Text (CAD) After Price On WooCommerce Product Page

Recently, I was browsing the WooCommerce Support forum to keep up to date on any reported issues with the latest release of WooCommerce V. 9.6 when I came across someone looking for support on displaying currency as a text value suffix.

In the forum, user ‘@y0universe’ writes,

The currency type (USD$) on my shop does not display alongside the product cost, which has lead to confusion in our customers.

Please help us display the currency type (Woocommerce)

The user posted a follow-up to explain how she had configured currency to be USD in her WooCommerce shop, but because it was not displaying the text value of “USD,” apparently some of her customers were confused. The currency symbol ‘$’ is the same symbol for the dollar used in a variety of countries, including the USA, Canada, Australia, and perhaps other countries, but the ‘$’ is in of itself, not helpful to denote whether it is the currency of the US, Canada, or Australia that the price is in.

We came across this same issue some years ago when developing two websites for a client; one website had product pricing in USD while the other website had products listed for sale in CAD (Canadian Dollars). How to ensure everyone is clear on what the currency precisely is being used?

Out of the box, WooCommerce does not display the text value on product pages or other pages. There may be a plugin to make this work, but if you are selling products in only one currency, and you want to be clear with a text value suffix, you can easily do this yourself if you don’t mind working with your child theme’s functions.php file.

Let’s say you want the product price to show up with the suffix of ‘CAD’ so that it is clear the price is in Canadian Dollars. This code snippet works fine. I tend to comment all my code snippets as well as date them so I or anyone else coming along later can understand what the code below the comment is doing. So, for ‘CAD’ to display, I put this snippet in the child theme’s functions.php file:

// ADD CAD CURRENCY SUFFIX <--- This is a comment with two slashes preceding. The slashes tell PHP to ignore this line add_filter( 'woocommerce_get_price_suffix', 'isg_price_suffix_add_price_suffix', 99, 4 ); function isg_price_suffix_add_price_suffix( $html, $product, $price, $qty ){ $html .= ' CAD'; return $html; }

This snippet of code is a WordPress filter that adds a suffix (CAD) to WooCommerce product prices. Now, if instead of CAD, and you wanted to append USD, you'd replace the CAD above with USD. Same with for example, AUD. Leave the space between the ' and the CAD so that the Country Currency text is not jammed up against the price.

Here's a detailed explanation of what it does (and read on for other considerations including multi-currency:

Breakdown of the Code:

1. Hook into woocommerce_get_price_suffix:

   add_filter( 'woocommerce_get_price_suffix', 'isg_price_suffix_add_price_suffix', 99, 4 );
               

   This attaches the custom function isg_price_suffix_add_price_suffix to the woocommerce_get_price_suffix filter.

   • The filter is responsible for modifying the price suffix (anything appended to the product price) in WooCommerce.
   • The 99 here is the priority, meaning this function runs late compared to other functions hooked to the same filter.
   • The 4 is the number of arguments passed to the callback function.
2. The Callback Function:

   function isg_price_suffix_add_price_suffix( $html, $product, $price, $qty ){
       $html .= 'CAD';
       return $html;
   }
               

   This function takes four parameters:

   • $html: The current price suffix (if any).
   • $product: The product object being processed.
   • $price: The product price.
   • $qty: The quantity of the product.

   The code appends CAD to the existing $html, which might already have a suffix (e.g., "incl. tax").

   The function then returns the modified suffix.

3. Purpose of the Code:

   This code ensures that all product prices displayed in WooCommerce have the currency suffix CAD appended to them.

   For example, if the price is 50, it would be displayed as 50 CAD.

Issues to Consider

1. Potential Overwriting:

   If your WooCommerce store is already configured to display a price suffix (e.g., tax info or custom text), this will overwrite or append to it. Ensure that this doesn't result in duplicated or messy price suffixes.

2. Localization:

   If you have a multi-currency setup or localization, hardcoding CAD may not work for users from other regions. You might want to use a dynamic approach to append the correct currency based on the user's location.

3. Better Approach for Multi-Currency:

   If you're using a multi-currency plugin, the following code ensures the correct currency suffix dynamically:

   function isg_price_suffix_add_price_suffix( $html, $product, $price, $qty ){
       $currency = get_woocommerce_currency(); // Gets the active currency.
       $html .= ' ' . $currency; // Adds the currency code dynamically.
       return $html;
   }
               

   This would display prices with the correct suffix based on the WooCommerce settings, e.g., 50 CAD or 50 USD.