Commit fed930e99bb for woocommerce
commit fed930e99bbadffddcfbc1ed28dfc86d92190263
Author: Sanket Parmar <sanket.parmar11@gmail.com>
Date: Mon Oct 19 14:07:43 2026 +0530
Show add-to-cart errors for the Cart block's default cross-sells (#69978)
Show default cross-sell add-to-cart errors in Cart
diff --git a/plugins/woocommerce/changelog/69816-fix-cart-cross-sells-notice-template b/plugins/woocommerce/changelog/69816-fix-cart-cross-sells-notice-template
new file mode 100644
index 00000000000..19a5996b220
--- /dev/null
+++ b/plugins/woocommerce/changelog/69816-fix-cart-cross-sells-notice-template
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Show an error when a product from the Cart block's default cross-sells list cannot be added to the cart.
diff --git a/plugins/woocommerce/client/blocks/assets/js/utils/render-parent-block.tsx b/plugins/woocommerce/client/blocks/assets/js/utils/render-parent-block.tsx
index 40d34b5740a..93cf9f3da11 100644
--- a/plugins/woocommerce/client/blocks/assets/js/utils/render-parent-block.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/utils/render-parent-block.tsx
@@ -186,6 +186,21 @@ const renderInnerBlocks = ( {
return parsedElement;
}
+ // Template markup lives in `content`, not `childNodes`, so copy it over as HTML.
+ if ( node instanceof HTMLTemplateElement ) {
+ return cloneElement(
+ parsedElement as React.ReactElement<
+ Record< string, unknown >
+ >,
+ {
+ key: componentKey,
+ ...( parsedElement?.props || {} ),
+ children: undefined,
+ dangerouslySetInnerHTML: { __html: node.innerHTML },
+ }
+ );
+ }
+
const renderedChildren = node.childNodes.length
? renderInnerBlocks( {
block,
diff --git a/plugins/woocommerce/client/blocks/assets/js/utils/test/render-parent-block.test.tsx b/plugins/woocommerce/client/blocks/assets/js/utils/test/render-parent-block.test.tsx
new file mode 100644
index 00000000000..ec6d95f6118
--- /dev/null
+++ b/plugins/woocommerce/client/blocks/assets/js/utils/test/render-parent-block.test.tsx
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { act } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { renderParentBlock } from '../render-parent-block';
+
+describe( 'renderParentBlock', () => {
+ afterEach( () => {
+ document.body.innerHTML = '';
+ } );
+
+ it( 'keeps the markup inside template elements', async () => {
+ document.body.innerHTML =
+ '<div class="test-parent"><div class="inner"><template data-wp-each="state.items"><p class="item">Item</p></template></div></div>';
+
+ await act( async () => {
+ renderParentBlock( {
+ Block: ( { children } ) => <div>{ children }</div>,
+ selector: '.test-parent',
+ blockName: 'woocommerce/test-parent',
+ blockMap: {},
+ getProps: () => ( {} ),
+ options: { multiple: true },
+ } );
+ } );
+
+ const template = document.querySelector( 'template' );
+
+ expect( template?.getAttribute( 'data-wp-each' ) ).toBe(
+ 'state.items'
+ );
+ expect( template?.innerHTML ).toBe( '<p class="item">Item</p>' );
+ } );
+} );