I have an issue with the size attribute of configurable products. They are visible on the product page. The customer can select a color and a size, but when adding the product to the shopping cart, below the details, the color is shown as expected, but the size is not.
For example:
Product A
Details:
Color: White
Size:
As you can see, the size is empty. Customer can order and I will see the right product in backend, so the customer will also get the right product, but does anyone know how to solve this issue?
Hello @alexander_jorda
Open /vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html
OR
If you are using any theme, then follow the following path
/app/design/frontend/Vendor_Name/Theme_Name/Magento_Checkout/web/template/minicart/item//default.html, replace with below code:
<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 --> <span data-bind="html: $parent.getProductNameUnsanitizedHtml(product_name)"></span> <!-- /ko --> </strong> <!-- 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.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"> <label class="label" data-bind="i18n: 'Qty', attr: { for: 'cart-item-'+item_id+'-qty'}"></label> <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" size="4" class="item-qty cart-item-qty"/> <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> </li>
If you find our reply helpful, please give us kudos.
Thank You,
WebDesk Solution Support Team
Get a Free Quote | Email | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789
Location: 150 King St. W. Toronto, ON M5H 1J9
Did not solve the issue unfortunately.
Other ideas how to solve it?