Format Woocommerce price in javascript according to the Woocommerce settings.
Tags: woocommerce, price, format, javascript
Published: 2023-11-05 04:43:51

---
title: Format Woocommerce price in javascript according to the Woocommerce settings.
published: true
description: How to format the price in JS according to Woocommerce settings.
tags: Woocommerce, price,format, js
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-10-23 08:27 +0000
---
Woocommerce plugin formats the price in javascript for **Filter Products by Price** widget. You may check out [the source](https://github.com/woocommerce/woocommerce/blob/b1b9e113232cf2e48c7b706a15dca504f123eb45/plugins/woocommerce/includes/widgets/class-wc-widget-price-filter.php).

Here, I will try to show you how we can achieve this feature.

Let's create a class named `PriceFomatterAsset` in `PriceFomatterAsset.php`
```php
<?php

use Automattic\Jetpack\Constants;

class PriceFomatterAsset {
	/**
	 * Constructor.
	 */
	public function __construct() {
        add_action('init', [ $this, 'register_scripts']);
		add_action( 'wp_enqueue_scripts', [$this, 'enqueue_front_scripts' ]);
    }

    /**
     * Register all Dokan scripts and styles.
     *
     * @return void
     */
    public function register_scripts() {
        $suffix                   = Constants::is_true( 'SCRIPT_DEBUG' ) ? '' : '.min';
		$version                  = Constants::get_constant( 'WC_VERSION' );
		wp_register_script( 'accounting', WC()->plugin_url() . '/assets/js/accounting/accounting' . $suffix . '.js', array( 'jquery' ), '0.4.2', true );
		wp_register_script( 'wc-jquery-ui-touchpunch', WC()->plugin_url() . '/assets/js/jquery-ui-touch-punch/jquery-ui-touch-punch' . $suffix . '.js', array( 'jquery-ui-slider' ), $version, true );

        // Replace according to your plugin and js file location.
		wp_register_script( 'welabs_script_price_formatter', your-plugin-url . '/assets/frontend/js/price-formatter.js', array( 'jquery-ui-slider', 'wc-jquery-ui-touchpunch', 'accounting' ), null, true );
		wp_localize_script(
			'welabs_script_price_formatter',
			'welabs_price_formatter_params',
			array(
				'currency_format_num_decimals' => 2,
				'currency_format_symbol'       => get_woocommerce_currency_symbol(),
				'currency_format_decimal_sep'  => esc_attr( wc_get_price_decimal_separator() ),
				'currency_format_thousand_sep' => esc_attr( wc_get_price_thousand_separator() ),
				'currency_format'              => esc_attr( str_replace( array( '%1$s', '%2$s' ), array( '%s', '%v' ), get_woocommerce_price_format() ) ),
			)
		);
    }

    /**
     * Enqueue front-end scripts.
     *
     * @return void
     */
    public function enqueue_front_scripts() {
         // You may apply logic to enqueue this script like did_action.
         wp_enqueue_script( 'welabs_script_price_formatter' );
    }
}

```

Now, let's create JS file named `price-formatter.js` where we will define a global function `welabs_price_format` to format the price according to Woocommerce settings. 

```js
window.welabs_price_format = function(price) {
    if ( typeof welabs_price_formatter_params === 'undefined' ) {
		return false;
	}

    return accounting.formatMoney( price, {
        symbol:    welabs_price_formatter_params.currency_format_symbol,
        decimal:   welabs_price_formatter_params.currency_format_decimal_sep,
        thousand:  welabs_price_formatter_params.currency_format_thousand_sep,
        precision: welabs_price_formatter_params.currency_format_num_decimals,
        format:    welabs_price_formatter_params.currency_format
    });
}

```

Now, you have to instantiate the `PriceFomatterAsset` class. For example

```
 function load_price_formatter_asset() {
    new PriceFomatterAsset();
}

add_action( 'plugins_loaded', 'load_price_formatter_asset' );
```

Now, You are ready to use `welabs_price_format` function in any javascript file.


![Browser console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gf4ytk4vsq1rm6574sff.png)