cancel
Showing results for 
Search instead for 
Did you mean: 

Magento 2: Changing Checkout Payment Method Step Title Text

Magento 2: Changing Checkout Payment Method Step Title Text

Hi,

How do I change the "Payment Method:" step title on the checkout page? I just want to remove the "colon" mark. I looked through all the possible template files, layout files, and JS files, and also used translation CSV, still not working. Please help. Below is the screenshot. I'm using Magento 2.2.1 community edition. Thanks!

magento2_checkout_payment_methods.PNG

4 REPLIES 4

Re: Magento 2: Changing Checkout Payment Method Step Title Text

How did you go about trying translation files?

 

I can see it in the US translation file as this:

 

vendor/magento/module-sales/i18n/en_US.csv:"Payment Method:","Payment Method:"

----
If you've found one of my answers useful, please give "Kudos" or "Accept as Solution" as appropriate. Thanks!

Re: Magento 2: Changing Checkout Payment Method Step Title Text

Tried translate file, not working, at the end I found out that was coded in the JS file (vendor/magento/module-checkout/view/frontend/web/js/view/payment/list.js). It's the getGroupTitle function that always returns the title and the ":". I need to override this function.

 

magento2_checkout_payment_methods_js.PNG

Re: Magento 2: Changing Checkout Payment Method Step Title Text

Hi, I have tried the same thing but the title is still the same.

Re: Magento 2: Changing Checkout Payment Method Step Title Text

We had quite a similar problem, we needed to update the text "Payment method" instead of removing the colons.

 

We got it working by copying the js file from the magento-checkout module (/vendor/magento/module-checkout/view/frontend/web/js/model/payment/method-group.js) to our own module and created a mixin in the requirejs-config.js file to override the magento file with ours. 

 

var config = {
   map: {
       '*': {
           'Magento_Checkout/js/model/payment/method-group': 'YourModule_Checkout/js/model/payment/method-group'
       }
   },
};

 

Then in the file you copied over, you can change the function to remove the colons from the title.

 

In your case the file to override is Magento/Checkout/view/frontend/web/js/view/payment/list.js

 and the method "getGroupTitle".