{"id":1889,"date":"2021-09-03T04:46:44","date_gmt":"2021-09-03T04:46:44","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/set-price-format-using-javascript-in-magento-2\/"},"modified":"2025-05-22T10:02:29","modified_gmt":"2025-05-22T04:32:29","slug":"set-price-format-using-javascript-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/set-price-format-using-javascript-in-magento-2\/","title":{"rendered":"How to Set Price Format using JavaScript in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Magento 2 price format at checkout can sometimes be confusing in case of any additional charges such as VAT, surcharge, payment fee, etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Earlier, I had offered a php-based solution to&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/get-formatted-price-with-currency-in-magento-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">get&nbsp;formatted price with currency in Magento 2<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Today, I am here with a JS-based solution for the same!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The default Magento 2 will not bother about displaying the currency symbol or decimal values but simply display the numbers. It will look something like this:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So if you would want to display $20.99, instead it will show 2099. The meaning will entirely change in such cases.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/09\/Annotation-on-2021-08-20-at-16-05-20-1.png\" alt=\"How to Set Price Format using JavaScript in Magento 2 1\" class=\"wp-image-16209\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">However, after applying the solution to&nbsp;<em><strong>set price format using Javascript in Magento 2<\/strong><\/em>, it will display the additional charges as below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/09\/Annotation-on-2021-08-20-at-16-07-41-1.png\" alt=\"How to Set Price Format using JavaScript in Magento 2 2\" class=\"wp-image-16210\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Check the solution for the same:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Set Price Format Using Javascript in Magento 2:<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">define(\n    [\n        'ko',\n        'jquery',\n        'Magento_Checkout\/js\/view\/summary\/abstract-total',\n        'Magento_Checkout\/js\/model\/quote',\n        'Magento_Catalog\/js\/price-utils'\n    ],\n    function (ko,$,Component,quote,priceUtils) {\n        \"use strict\";\n        return Component.extend({\n            getPrice : function () {\n                var price = 20; \/\/  You can giv date\n                return priceUtils.formatPrice(price, quote.getBasePriceFormat());\n            } \n        });\n    }\n);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do share the post with the Magento Community via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Magento 2 price format at checkout can sometimes be confusing in case of any additional charges such as VAT, surcharge, payment fee, etc. Earlier,&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1889","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1889"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1889\/revisions"}],"predecessor-version":[{"id":14236,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1889\/revisions\/14236"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}