How to Display/Fix Indian Currency Symbol in WooCommerce?

Indian Currency symbol was officially announced in 2010 and thereafter operating systems, word processors and websites started to use the new rupee symbol. Particularly for websites, the webrupee api set the tone (for some reason, the webrupee api does not seem to work now – but Jagadesh Boopathi has an archive of JavaScript and font.css files (link given below)). Thankfully, WooCommerce officially supports Indian currency symbol (you can check this out under WooCommerce > Settings > Currency), but not all browsers support Indian currency symbol and that’s the reason you see those empty square box in place of rupee symbol (₹). For example, I see this issue in Chrome browser on Windows 7. So I just googled around and found the below solution.

The fix involves in:

• Replacing the new indian currency symbol (which is now empty square box) back to age old style (Rs)
• Next step is to replace ‘Rs‘ with the new currency symbol (using WP Webrupee WordPress plugin)

Replace the new indian currency symbol to Rs.

Simply copy and paste the below code in functions.php file (credits).

add_filter('woocommerce_currency_symbol', 'change_existing_currency_symbol', 10, 2);

function change_existing_currency_symbol( $currency_symbol, $currency ) {
switch( $currency ) {
case 'INR': $currency_symbol = 'Rs.'; break;
}
return $currency_symbol;
}

Set the Currency in WooCommerce

Go to WooCommerce > Settings > Currency and set ‘INR (Rs)’ (you’ll see the empty square replaced with Rs)

Install WP Webrupee WordPress Plugin

Download WP Webrupee plugin. Once activated, the plugin will replace ‘Rs‘ with the new Indian Currency Symbol on all pages.

Update: The plugin refers to webrupee CDN which is not available right now. So essentially, the plugin is useless.

Instead follow the below steps:

1. Let’s make this plugin complete. After extracting, go to wp-webrupee plugin directory.
2. Create a directory called ‘js‘ under ‘plugins/wp-webrupee/‘
3. Download font.css from Jagadesh Boopathi Blog and place it under ‘plugins/wp-webrupee/js/‘
4. Download the font resource files from the below link and place it under  ‘plugins/wp-webrupee/js/‘
   1. http://cdn.jagansindia.in/WebRupee.V2.0.eot
   2. http://cdn.jagansindia.in/WebRupee.V2.0.ttf
   3. http://cdn.jagansindia.in/WebRupee.V2.0.woff
   4. http://cdn.jagansindia.in/WebRupee.V2.0.svg
5. Open font.css file (downloaded in step 3) and make sure you refer the font resources URLs properly. Once done, save it.
6. Download webrupee api from the below link and save it under ‘plugins/wp-webrupee/js/‘
   1. http://cdn.jagansindia.in/webrupee
7. Open ‘webrupee‘ file downloaded in above step,  lookout for ‘href‘ and change the font.css URL to your local copy.
8. Open ‘wp-webrupee.php‘ and replace the URL of ‘wp-webrupee-script‘ with your local copy (example as below).

   • add_action( 'wp_enqueue_scripts', 'wp_webrupee_js' );

     function wp_webrupee_js() {
      wp_enqueue_script( 'wp-webrupee-script', 'http://yourwebsite.com/plugins/wp-webrupee/js/webrupee' );
     }

9. Activate the plugin and you should see ‘Rs.‘ replaced with the new Indian Currency Symbol on all pages.

Note: The plugin use JavaScript to replace ‘Rs.‘ with the rupee symbol, so the pages will initially display price as ‘Rs.‘ before replacing it with the rupee symbol.

Update: Ah! I see this solution working on all pages except Checkout page? Any idea?