In Magento 2, product SKUs (Stock Keeping Units) play a vital role in order management and product identification. However, by default, SKUs are not shown in the minicart or order summary section, which can create confusion for customers and store admins. In case you are asking yourself how to display SKU in Minicart & Order Summary Section in Magento 2, this tutorial will help you to customize your Magento theme so that SKUs are displayed throughout the checkout process. This will assist you to show product SKU in Magento 2 minicart and include SKU in Magento 2 order summary to make it more transparent and enhance shopping experience.
So, let us go through the entire solution.
Step-by-Step Guide to Display Product SKU in Magento 2 Minicart & Order Summary
Step 1: Create registration.php
First, create the registration.php file to register your custom module with Magento. Place this file in the app/code/Vendor/Module directory.
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vendor_Module',
__DIR__
);Step 2: Create module.xml
Next, create the module.xml file inside the etc folder to define the module configuration. Place this file in app/code/Vendor/Module/etc.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_Module" setup_version="1.0.0">
</module>
</config>Step 3: Create requirejs-config.js
Create the requirejs-config.js file to map the default Magento templates to your custom templates. Place this file in app/code/Vendor/Module/view/frontend.
var config = {
map: {
'*': {
'Magento_Checkout/template/minicart/item/default.html': 'Vendor_Module/template/minicart/item/default.html',
'Magento_Checkout/template/summary/item/details.html': 'Vendor_Module/template/summary/item/details.html'
}
}
};Step 4: Customize default.html for Minicart
To display the SKU in the minicart, create the default.html file with the following content. Place this file in app/code/Vendor/Module/view/frontend/web/template/minicart/item.
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<li class="item product product-item" data-role="product-item">
<div class="product">
<!-- ko if: product_has_url -->
<a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
<!-- ko foreach: $parent.getRegion('itemImage') -->
<!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
<!-- /ko -->
</a>
<!-- /ko -->
<!-- ko ifnot: product_has_url -->
<span class="product-item-photo">
<!-- ko foreach: $parent.getRegion('itemImage') -->
<!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
<!-- /ko -->
</span>
<!-- /ko -->
<div class="product-item-details">
<strong class="product-item-name">
<!-- ko if: product_has_url -->
<a data-bind="attr: {href: product_url}, html: $parent.getProductNameUnsanitizedHtml(product_name)"></a>
<!-- /ko -->
<!-- ko ifnot: product_has_url -->
<!-- ko text: $parent.getProductNameUnsanitizedHtml(product_name) --><!-- /ko -->
<!-- /ko -->
</strong>
<div class="product-sku">SKU:<a data-bind="attr: {href: product_sku}, text: product_sku"></a></div>
<!-- ko if: options.length -->
<div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
<span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="product options list">
<!-- ko foreach: { data: options, as: 'option' } -->
<dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
<dd class="values">
<!-- ko if: Array.isArray(option.value) -->
<span data-bind="html: $parents[1].getOptionValueUnsanitizedHtml(option.value.join('<br>'))"></span>
<!-- /ko -->
<!-- ko if: (!Array.isArray(option.value) && ['file', 'html'].includes(option.option_type)) -->
<span data-bind="html: $parents[1].getOptionValueUnsanitizedHtml(option.value)"></span>
<!-- /ko -->
<!-- ko if: (!Array.isArray(option.value) && !['file', 'html'].includes(option.option_type)) -->
<span data-bind="text: option.print_value || option.value"></span>
<!-- /ko -->
</dd>
<!-- /ko -->
</dl>
</div>
</div>
<!-- /ko -->
<div class="product-item-pricing">
<!-- ko if: canApplyMsrp -->
<div class="details-map">
<span class="label" data-bind="i18n: 'Price'"></span>
<span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
</div>
<!-- /ko -->
<!-- ko ifnot: canApplyMsrp -->
<!-- ko foreach: $parent.getRegion('priceSidebar') -->
<!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<div class="details-qty qty qty-controls-wrap">
<label class="label" data-bind="i18n: 'Qty', attr: {
for: 'cart-item-'+item_id+'-qty'}"></label>
<a class="icon-minus qty-minus"></a>
<input data-bind="attr: {
id: 'cart-item-'+item_id+'-qty',
'data-cart-item': item_id,
'data-item-qty': qty,
'data-cart-item-id': product_sku
}, value: qty"
type="number"
min="0"
size="4"
class="item-qty cart-item-qty"/>
<a class="icon-plus qty-plus"></a>
<button data-bind="attr: {
id: 'update-cart-item-'+item_id,
'data-cart-item': item_id,
title: $t('Update')
}"
class="update-cart-item"
style="display: none">
<span data-bind="i18n: 'Update'"></span>
</button>
</div>
</div>
<div class="product actions">
<!-- ko if: is_visible_in_site_visibility -->
<div class="primary">
<a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
<!-- /ko -->
<div class="secondary">
<a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
class="action delete">
<span data-bind="i18n: 'Remove'"></span>
</a>
</div>
</div>
</div>
</div>
<div class="message notice" if="$data.message">
<div data-bind="text: $data.message"></div>
</div>Step 5: Customize details.html for Order Summary
To show the SKU in the order summary section, create the details.html file with the following content. Place this file in app/code/Vendor/Module/view/frontend/web/template/summary/item.
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<!-- ko foreach: getRegion('before_details') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<div class="product-item-details">
<div class="product-item-inner">
<div class="product-item-name-block">
<strong class="product-item-name" data-bind="html: getNameUnsanitizedHtml($parent)"></strong>
<!-- ko foreach: window.checkoutConfig.quoteItemData -->
<!-- ko if: item_id == $parents[1].item_id -->
<span class="label" data-bind="i18n: 'SKU:'"></span>
<!-- ko text: sku --><!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<div class="details-qty">
<span class="label"><!-- ko i18n: 'Qty' --><!-- /ko --></span>
<span class="value" data-bind="text: $parent.qty.toLocaleString(window.LOCALE)"></span>
</div>
</div>
<!-- ko foreach: getRegion('after_details') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: (JSON.parse($parent.options).length > 0)-->
<div class="product options" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">
<span data-role="title" class="toggle"><!-- ko i18n: 'View Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="item-options">
<!--ko foreach: JSON.parse($parent.options)-->
<dt class="label" data-bind="text: label"></dt>
<!-- ko if: ($data.full_view)-->
<!-- ko with: {full_viewUnsanitizedHtml: $data.full_view}-->
<dd class="values" data-bind="html: full_viewUnsanitizedHtml"></dd>
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: ($data.full_view)-->
<!-- ko with: {valueUnsanitizedHtml: $data.value}-->
<dd class="values" data-bind="html: valueUnsanitizedHtml"></dd>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</dl>
</div>
</div>
<!-- /ko -->
</div>
<!-- ko foreach: getRegion('item_message') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->Step 6: Run Magento Commands
After creating the necessary files, run the following Magento commands to upgrade, compile, and deploy the changes:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean
php bin/magento cache:flushAfter successfully following the steps, your minicart and order summary will clearly display the SKU for each item:
This enhancement ensures accuracy for customers during checkout and aids store owners in better order tracking.
Implementing this customization is a smart way to improve clarity and customer satisfaction. Now that you know how to show SKU in Minicart & Order Summary Section in Magento 2, you can offer a more transparent shopping experience. Whether you’re trying to display product SKU in Magento 2 minicart or add SKU to Magento 2 order summary, this approach ensures consistency and ease across your store’s buying journey.
Share Post
Leave a Reply