Magento 2: How to Display Swatches instead of Swatch Label in Checkout Order Summary

Hello Magento Friends,

By default, Magento 2 displays the swatch label (like “Red”, “Large”, etc.) in the checkout order summary for configurable products.

While this works, it’s not the most user-friendly or visually appealing experience — especially when your product swatches are images or colors.

In this blog, we’ll walk you through how to show swatch visuals instead of plain text labels in the Magento 2 checkout order summary. This not only enhances the UI but also reduces confusion for customers about the selected product variation.

Steps to Display Swatches instead of Swatch Label in Magento2 Checkout Order Summary:

Step 1: First, we need to create a di.xml file inside our extension at the following path

app\code\Vendor\Extension\etc\frontend\di.xml

Then add the code as follows

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Vendor\Extension\Model\Swatches\LayoutProcessor">
        <arguments>
            <argument name="session" xsi:type="object">Magento\Checkout\Model\Session\Proxy</argument>
        </arguments>
    </type>
     <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="vendor_extension_plugin"
            type="Vendor\Extension\Plugin\Block\LayoutProcessor"
            sortOrder="10"/>
    </type>
</config>

Step 2: Now, we need to create a model file inside our extension at the following path.

\app\code\Vendor\Extension\Model\Swatches\LayoutProcessor.php

Now include the below-mentioned code

<?php

namespace Vendor\Extension\Model\Swatches;

use Magento\ConfigurableProduct\Model\Product\Type\Configurable;
use Magento\Framework\Serialize\Serializer\Json;
use Magento\Quote\Api\Data\CartItemInterface;
use Magento\Swatches\Block\Product\Renderer\ConfigurableFactory;
use Magento\Checkout\Model\Session;

class LayoutProcessor
{
    private Json $jsonSerializer;
    private ConfigurableFactory $configurableBlockFactory;
    private Session $checkoutSession;

    public function __construct(
        Json $jsonSerializer,
        ConfigurableFactory $configurableBlockFactory,
        Session $checkoutSession
    ) {
        $this->jsonSerializer = $jsonSerializer;
        $this->configurableBlockFactory = $configurableBlockFactory;
        $this->checkoutSession = $checkoutSession;
    }

    public function getJsLayout(): array
    {
        $jsLayout = [];

        foreach ($this->checkoutSession->getQuote()->getItems() as $quoteItem) {
            $isConfigurableProduct = $quoteItem->getProductType() === Configurable::TYPE_CODE;

            $jsLayout[$quoteItem->getItemId()] = [
                'jsonConfig'       => $isConfigurableProduct ? $this->getConfigurableJson($quoteItem) : null,
                'jsonSwatchConfig' => $isConfigurableProduct ? $this->getFilteredSwatchJson($quoteItem) : null,
            ];
        }

        return $jsLayout;
    }

    private function getConfigurableJson(CartItemInterface $quoteItem): string
    {
        $configurableBlock = $this->configurableBlockFactory->create()
            ->setProduct($quoteItem->getProduct());

        return $configurableBlock->getJsonConfig();
    }

    private function getFilteredSwatchJson(CartItemInterface $quoteItem): string
    {
        $configurableBlock = $this->configurableBlockFactory->create()
            ->setProduct($quoteItem->getProduct());

        $originalSwatchJson = $configurableBlock->getJsonSwatchConfig();
        return $this->filterSwatchJsonBySelectedOptions($originalSwatchJson, $quoteItem);
    }

    private function getSelectedOptionLabels(CartItemInterface $quoteItem): array
    {
        $selectedLabels = [];

        $orderOptions = $quoteItem->getProduct()
            ->getTypeInstance()
            ->getOrderOptions($quoteItem->getProduct());

        if (!empty($orderOptions['attributes_info'])) {
            foreach ($orderOptions['attributes_info'] as $attributeInfo) {
                $selectedLabels[] = $attributeInfo['value'];
            }
        }

        return $selectedLabels;
    }

    private function filterSwatchJsonBySelectedOptions(string $swatchJson, CartItemInterface $quoteItem): string
    {
        $filteredSwatch = [];
        $selectedLabels = $this->getSelectedOptionLabels($quoteItem);

        $decodedSwatch = $this->jsonSerializer->unserialize($swatchJson);
        foreach ($decodedSwatch as $attributeId => $attributeOptions) {
            foreach ($attributeOptions as $optionId => $optionData) {
                if (is_array($optionData) && in_array($optionData['label'], $selectedLabels)) {
                    $filteredSwatch[$attributeId][$optionId] = $optionData;
                }
            }
        }

        return $this->jsonSerializer->serialize($filteredSwatch);
    }
}

Step 3: Now, we need to create a plugin file inside our extension at the following path.

\app\code\Vendor\Extension\Plugin\Block\LayoutProcessor.php

Then add the code as given below

<?php

namespace Vendor\Extension\Plugin\Block;

use Vendor\Extension\Model\Swatches\LayoutProcessor as SwatchesLayoutProcessor;
use Magento\Checkout\Block\Checkout\LayoutProcessor as CheckoutLayoutProcessor;

class LayoutProcessor
{

    private $swatchesLayoutProcessor;

    public function __construct(SwatchesLayoutProcessor $swatchesLayoutProcessor)
    {
        $this->swatchesLayoutProcessor = $swatchesLayoutProcessor;
    }

    public function afterProcess(CheckoutLayoutProcessor $subject, array $result): array
    {
        $result['components']['checkout']['children']['sidebar']['children']['summary']['children']['cart_items']
            ['children']['details']['config']['swatchesJsLayout'] = $this->swatchesLayoutProcessor->getJsLayout();

        return $result;
    }
}

Step 4: Now, we need to create a layout file inside our extension at the following path.

\app\code\Vendor\Extension\view\frontend\layout\checkout_index_index.xml

Now add the below given piece of code

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <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="children" xsi:type="array">
                                                    <item name="cart_items" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="details" xsi:type="array">
                                                                <item name="config" xsi:type="array">
                                                                    <item name="template"
                                                                        xsi:type="string">Vendor_Extension/summary/item/item-details</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </referenceBlock>
        </referenceContainer>
    </body>
</page>

Step 5: Now, we need to create a requirejs-config file inside our extension at the following path.

\app\code\Vendor\Extension\view\frontend\requirejs-config.js

After that, add the following code snippet

var config = {
    config: {
        'mixins': {
            'Magento_Checkout/js/view/summary/item/details': {
                'Vendor_Extension/js/view/summary/item/details': true
            }
        }
    }
};

Step 6: Now, we need to create a details js file inside our extension at the following path.

\app\code\Vendor\Extension\view\frontend\web\js\view\summary\item\details.js

Thenafter, add the below-mentioned code

define([], function () {
    'use strict';

    const mixin = {
        defaults: {
            template: 'Vendor_Extension/checkout/summary/item-details'
        },
        getSwatchesJsLayoutByItemId(itemId) {
            return this.swatchesJsLayout?.[itemId] || null;
        }
    };

    return function (Component) {
        return Component.extend(mixin);
    };
});

Step 7: Now, we need to create a template file inside our extension at the following path.

\app\code\Vendor\Extension\view\frontend\web\template\summary\item\item-details.html

Then include the code as given below

<!-- 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: $parent.name"></strong>
            <div class="details-qty">
                <span class="label" data-bind="i18n: 'Qty'"></span>
                <span class="value" data-bind="text: $parent.qty"></span>
            </div>
        </div>

        <!-- ko if: (getSwatchesJsLayoutByItemId($parent.item_id)) -->
            <div class="product options" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">
                <span data-role="title" class="toggle" data-bind="i18n: 'View Details'"></span>
                <div data-role="content" class="content">
                    <strong class="subtitle" data-bind="i18n: 'Options Details'"></strong>
                    <div data-bind='mageInit: {
                        "Magento_Swatches/js/swatch-renderer": {
                            "jsonConfig": JSON.parse(getSwatchesJsLayoutByItemId($parent.item_id).jsonConfig),
                            "jsonSwatchConfig": JSON.parse(getSwatchesJsLayoutByItemId($parent.item_id).jsonSwatchConfig)
                        }
                    }'></div>
                </div>
            </div>
        <!-- /ko -->
    </div>
</div>

Output:

Conclusion:

With this enhancement, you turn a plain, text-heavy order summary into a more visually engaging and intuitive experience. Your customers will love the extra clarity — and you’ll likely see fewer order mistakes related to variations like color or size.

Drop your questions in the comments below.

Happy Reading!