Change Checkout Step Label in Magento 2

Question

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

Answer 1

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.

Answer 2

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);
    }
});