Create a custom module:
We need to use our custom component and template.
Vendor/Module/view/frontend/layout/checkout_index_index.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="summary" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/view/summary</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_Module/summary</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Vendor/Module/view/frontend/web/js/view/summary.js
define([
'Magento_Checkout/js/view/summary',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/step-navigator'
], function (Component, quote, stepNavigator) {
'use strict';
return Component.extend({
/**
* @return {Boolean}
*/
isVisible: function () {
return !quote.isVirtual() && stepNavigator.isProcessed('shipping');
}
});
});
Our custom script should extend from the original summary script and we need to check the shipping step is processed or not.
Vendor/Module/view/frontend/web/template/summary.html
<!-- ko if: isVisible() -->
<div class="opc-block-summary" data-bind="blockLoader: isLoading">
<span data-bind="i18n: 'Order Summary'" class="title"></span>
<!-- ko foreach: elems() -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
Try to clear your Magento cache and see the result.