---
title: "How to Set Price Format using JavaScript in Magento 2"
url: "https://dolphinwebsolution.com/set-price-format-using-javascript-in-magento-2"
date: "2021-09-27T07:39:28+05:30"
modified: "2023-08-25T09:45:01+05:30"
author:
  name: "Jigar Patel"
categories:
  - "Magento"
word_count: 355
reading_time: "2 min read"
summary: "Sometimes during Magento 2 development, When you pass price value phtml to js at that time, you need to display price with currency from js or you may have some cases where you need to format price..."
description: "Sometimes during Magento 2 development, When you pass price value phtml to js at that time, you need to display price with currency from js or you may have s..."
keywords: "set price format,set price format using javascript,set price format for magento 2,set price format for magento, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to add owl carousel slider in Magento 2"
    url: "https://dolphinwebsolution.com/how-to-add-owl-carousel-slider-in-magento-2"
  - title: "Declarative Schema in Magento 2.3.x or later"
    url: "https://dolphinwebsolution.com/declarative-schema-in-magento-2-3-x-or-later"
  - title: "Get All Payment Methods in Magento 2"
    url: "https://dolphinwebsolution.com/get-all-payment-methods-in-magento-2"
---

# How to Set Price Format using JavaScript in Magento 2

_Published: September 27, 2021_  
_Author: Jigar Patel_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/02/Javascript-in-magento2-1024x536.png)

Sometimes during [Magento 2 development](https://dolphinwebsolution.com/magento-2-development), When you pass price value phtml to js at that time, you need to display price with currency from js or you may have some cases where you need to format price using javascript. Convert a plain number into a price format with a currency symbol using any one of the solutions given below.

Magento is able to operate with a variety of prices, taxes, and product types.

**The following is a shortlist of Magento prices:**

- Special Price.
- Tier Price.
- Grouped Price.
- Minimum price of composite products
- The price range of composite products
- Manufacturer price (MSRP)

Magento represents these prices as price types (e.g. final price, minimum price, maximum price, regular price) and are separate from the actual price in the code. For example, Special Price is represented by the final price type in the code.

**Magento handles taxes as price adjustments and has 3 generic types of taxes:**

- Tax
- Fixed Product Tax
- Tax for Fixed Product Tax

I am explaining the easiest way to do it.

## How to set price format using JavaScript in Magento 2
You have to use ‘**Magento\_Catalog/js/price-utils**‘ priceUtils Js Object in your javascript file to set format a price. then, you can just add **getFormattedPrice**() function in your file and add ‘**Magento\_Catalog/js/price-utils**’ Js Object.

You also like to read: [Add custom Js in Magento 2](https://dolphinwebsolution.com/how-to-include-add-custom-js-in-magento-2)

**priceUtils.formatPrice(price, priceFormat,showSign)** has 3 arguments. You can check **reference** : vendor/magento/module-catalog/view/base/web/jsprice-utils.js

**price**:- Field is required

**priceFormat**:- Field is required

**showSign**:- Field is optional.It shows signs like (+) or (-) (positive+/negative-).

```
define([
    'ko',
    'Magento_Catalog/js/price-utils'
], function (
    ko,
    priceUtils
) {
    'use strict';
    return {
        /**
         * Formats the price with currency format
         *
         * @param {number}
         * @return {string}
         */
        getFormattedPrice: function (price) {
            var priceFormat = {
                decimalSymbol: '.',
                groupLength: 3,
                groupSymbol: ",",
                integerRequired: false,
                pattern: "₹%s",
                precision: 2,
                requiredPrecision: 2
            };
            return priceUtils.formatPrice(price, priceFormat);
        }
    }
});
```

You can call **getFormattedPrice()** function from template or js file with pass price.

**var price=100;**

**getFormattedPrice(price);**

You can change priceFormat object based on your requirement.

### Output :
₹100.00

If you have any queries regarding this post, use the comment section below!

Happy Coding!


---

_View the original post at: [https://dolphinwebsolution.com/set-price-format-using-javascript-in-magento-2](https://dolphinwebsolution.com/set-price-format-using-javascript-in-magento-2)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:53:27 UTC_