4

How i can change checkout steps Label in magento 2? http://prntscr.com/nr9rrr

3
  • Did you try my solution? Commented May 21, 2019 at 8:50
  • using custom module or theme ??? Commented May 21, 2019 at 9:06
  • yes in custom theme. i have tried below method but it didn't worked for me. might be there is something which i have missed. Commented May 21, 2019 at 10:04

2 Answers 2

0

Magento 2 having onepage 2 step checkout.

  1. Shiping
  2. Review & Payment

For changing Label for Shipping

copy a file /vendor/magento/module-checkout/frontend/web/js/view/shipping.js. create a new file in app/design/frontend/{vendorname}/{themename}/Magento_Checkout/web/js/view/shipping.js

change in function stepNavigator.registerStep 3rd argument shipping to custom label.

stepNavigator.registerStep( 'shipping', '', $t('Custom Label'), this.visible, _.bind(this.navigate, this), 10 );

same way we can change for review and payment step in payment.js file.

8
  • there is no such file exists. prntscr.com/nrppfs Commented May 22, 2019 at 5:43
  • check inside /vendor/magento/module-checkout/frontend/web/js/view folder. Commented May 22, 2019 at 5:44
  • show me all file inside view folder. Commented May 22, 2019 at 5:55
  • oky sorry, i got this file. for testing i changed the label directly in pub/..., as u said. prntscr.com/nrpz1t but it did not worked. prntscr.com/nrpzdm Commented May 22, 2019 at 6:13
  • run php bin/magetno cache:clean and cache:flush cmd, then after clear you browser history and check. Commented May 22, 2019 at 6:25
8

You can achieve this using a mixin.

Create a requirejs-config.js file in your design folder e.g. app/design/frontend/custom/theme/Magento_Checkout/requirejs-config.js

var config = { 'config': { 'mixins': { 'Magento_Checkout/js/view/shipping': { 'Magento_Checkout/js/view/checkout/shipping-mixin': true } } } }; 

Now create your mixin under the same directory e.g. app/design/frontend/custom/theme/Magento_Checkout/web/js/view/checkout/shipping-mixin.js

define([ 'jquery', 'ko', 'Magento_Checkout/js/model/step-navigator' ], function($, ko, stepNavigator) { 'use strict'; var mixin = { initialize: function() { this._super(); $.each(stepNavigator.steps(), function(index, step) { if (step.code === 'shipping') { step.title = 'Your step title'; } }); } }; return function(target) { return target.extend(mixin); } }); 
1
  • 1
    This works very well and doesn't rewrite any files. Thank you Commented Nov 29, 2019 at 11:46

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.