3

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

3
  • Did you try my solution? May 21, 2019 at 8:50
  • using custom module or theme ??? 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.
    – sudo55
    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
    – sudo55
    May 22, 2019 at 5:43
  • check inside /vendor/magento/module-checkout/frontend/web/js/view folder. May 22, 2019 at 5:44
  • show me all file inside view folder. 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
    – sudo55
    May 22, 2019 at 6:13
  • run php bin/magetno cache:clean and cache:flush cmd, then after clear you browser history and check. May 22, 2019 at 6:25
5

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
  • This works very well and doesn't rewrite any files. Thank you
    – Zankar
    Nov 29, 2019 at 11:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.