diff --git a/packages/js/product-editor/changelog/fix-47788 b/packages/js/product-editor/changelog/fix-47788
new file mode 100644
index 00000000000..7d655be14e4
--- /dev/null
+++ b/packages/js/product-editor/changelog/fix-47788
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix the variations image block placeholder to show only one image
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/images/edit.tsx
index 2971ef471cb..791a9a17b4e 100644
--- a/packages/js/product-editor/src/blocks/product-fields/images/edit.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/images/edit.tsx
@@ -270,7 +270,7 @@ export function ImageBlockEdit( {
) ) }
) : (
-
+
) }
);
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/imgs/product.tsx b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/imgs/product.tsx
new file mode 100644
index 00000000000..7321644cee7
--- /dev/null
+++ b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/imgs/product.tsx
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+export function Product( { ...props }: React.SVGProps< SVGSVGElement > ) {
+ return (
+
+ );
+}
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/index.tsx b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/index.tsx
index caad452ed85..dbe529f76d9 100644
--- a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/index.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/index.tsx
@@ -1 +1,2 @@
export * from './place-holder';
+export * from './types';
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/place-holder.tsx b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/place-holder.tsx
index 462f83b97d4..1e744ea3b98 100644
--- a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/place-holder.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/place-holder.tsx
@@ -8,16 +8,23 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import { Products } from './imgs/products';
+import { Product } from './imgs/product';
+import { PlaceHolderProps } from './types';
-export function PlaceHolder() {
+export function PlaceHolder( { multiple = true }: PlaceHolderProps ) {
return (
-
+ { multiple ? : }
- { __(
- 'For best results, offer a variety of product images, like close-up details, lifestyle scenes, and color variations.',
- 'woocommerce'
- ) }
+ { multiple
+ ? __(
+ 'For best results, offer a variety of product images, like close-up details, lifestyle scenes, and color variations.',
+ 'woocommerce'
+ )
+ : __(
+ 'Add an image which displays the unique characteristics of this variation.',
+ 'woocommerce'
+ ) }
);
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/types.ts b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/types.ts
new file mode 100644
index 00000000000..8a0e7e9901c
--- /dev/null
+++ b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/types.ts
@@ -0,0 +1,3 @@
+export type PlaceHolderProps = {
+ multiple?: boolean;
+};