diff --git a/packages/js/product-editor/src/components/editor/editor.tsx b/packages/js/product-editor/src/components/editor/editor.tsx
index a82fb62111790..dbddbbdd34627 100644
--- a/packages/js/product-editor/src/components/editor/editor.tsx
+++ b/packages/js/product-editor/src/components/editor/editor.tsx
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { createElement, StrictMode } from '@wordpress/element';
 import {
 	EditorSettings,
@@ -13,7 +12,6 @@ import { Product } from '@woocommerce/data';
 // @ts-ignore No types for this exist yet.
 // eslint-disable-next-line @woocommerce/dependency-group
 import { EntityProvider } from '@wordpress/core-data';
-
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore No types for this exist yet.
 // eslint-disable-next-line @woocommerce/dependency-group
@@ -32,9 +30,11 @@ import { BlockEditor } from '../block-editor';
 import { initBlocks } from './init-blocks';
 
 initBlocks();
+
 export type ProductEditorSettings = Partial<
 	EditorSettings & EditorBlockListSettings
 >;
+
 type EditorProps = {
 	product: Product;
 	settings: ProductEditorSettings | undefined;
@@ -50,11 +50,8 @@ export function Editor( { product, settings }: EditorProps ) {
 						<InterfaceSkeleton
 							header={
 								<Header
-									product={ product }
-									title={
-										product.name ||
-										__( 'Add new product', 'woocommerce' )
-									}
+									productId={ product.id }
+									title={ product.name }
 								/>
 							}
 							sidebar={ <Sidebar /> }
diff --git a/packages/js/product-editor/src/components/header/header.tsx b/packages/js/product-editor/src/components/header/header.tsx
index ac3f8d3ed1201..63a50961d0a3a 100644
--- a/packages/js/product-editor/src/components/header/header.tsx
+++ b/packages/js/product-editor/src/components/header/header.tsx
@@ -5,14 +5,15 @@ import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Product } from '@woocommerce/data';
 
 export type HeaderProps = {
-	product: Product;
+	productId: number;
 	title: string;
 };
 
-export function Header( { product, title }: HeaderProps ) {
+const DEFAULT_PRODUCT_NAME = 'AUTO-DRAFT';
+
+export function Header( { productId, title }: HeaderProps ) {
 	const { isProductLocked, isSaving } = useSelect(
 		( select ) => {
 			const { isSavingEntityRecord } = select( 'core' );
@@ -22,11 +23,11 @@ export function Header( { product, title }: HeaderProps ) {
 				isSaving: isSavingEntityRecord(
 					'postType',
 					'product',
-					product.id
+					productId
 				),
 			};
 		},
-		[ product.id ]
+		[ productId ]
 	);
 
 	const isDisabled = isProductLocked || isSaving;
@@ -34,7 +35,7 @@ export function Header( { product, title }: HeaderProps ) {
 	const { saveEditedEntityRecord } = useDispatch( 'core' );
 
 	function handleSave() {
-		saveEditedEntityRecord( 'postType', 'product', product.id );
+		saveEditedEntityRecord( 'postType', 'product', productId );
 	}
 
 	return (
@@ -44,7 +45,11 @@ export function Header( { product, title }: HeaderProps ) {
 			aria-label={ __( 'Product Editor top bar.', 'woocommerce' ) }
 			tabIndex={ -1 }
 		>
-			<h1 className="woocommerce-product-header__title">{ title }</h1>
+			<h1 className="woocommerce-product-header__title">
+				{ title === DEFAULT_PRODUCT_NAME
+					? __( 'Add new product', 'woocommerce' )
+					: title }
+			</h1>
 
 			<div className="woocommerce-product-header__actions">
 				<Button
diff --git a/plugins/woocommerce-admin/client/products/product-page.tsx b/plugins/woocommerce-admin/client/products/product-page.tsx
index 7f588b12d8a7b..b5e75947d60fa 100644
--- a/plugins/woocommerce-admin/client/products/product-page.tsx
+++ b/plugins/woocommerce-admin/client/products/product-page.tsx
@@ -22,7 +22,7 @@ declare const productBlockEditorSettings: ProductEditorSettings;
 const ProductEditor: React.FC< { product: Product | undefined } > = ( {
 	product,
 } ) => {
-	if ( ! product ) {
+	if ( ! product?.id ) {
 		return <Spinner />;
 	}