diff --git a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss
index 7b8987a4f3a..9ff1b017c70 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss
@@ -34,3 +34,15 @@
 		display: block;
 	}
 }
+
+
+.wp-block-woocommerce-classic-template__placeholder-wireframe {
+	display: flex;
+	flex-direction: column;
+}
+
+.wp-block-woocommerce-classic-template__placeholder-migration-button-container {
+	justify-content: center;
+	align-items: center;
+	margin: 0 auto;
+}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/index.tsx
index 4ac5d7acae9..75ce26ebaeb 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/index.tsx
@@ -1,12 +1,16 @@
 /**
  * External dependencies
  */
-import { registerBlockType } from '@wordpress/blocks';
-import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
+import { createBlock, registerBlockType } from '@wordpress/blocks';
+import {
+	isExperimentalBuild,
+	WC_BLOCKS_IMAGE_URL,
+} from '@woocommerce/block-settings';
 import { useBlockProps } from '@wordpress/block-editor';
-import { Placeholder } from '@wordpress/components';
+import { Button, Placeholder } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { box, Icon } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -20,9 +24,12 @@ interface Props {
 		template: string;
 		align: string;
 	};
+	clientId: string;
 }
 
-const Edit = ( { attributes }: Props ) => {
+const Edit = ( { clientId, attributes }: Props ) => {
+	const { replaceBlock } = useDispatch( 'core/block-editor' );
+
 	const blockProps = useBlockProps();
 	const templateTitle =
 		TEMPLATES[ attributes.template ]?.title ?? attributes.template;
@@ -60,6 +67,27 @@ const Edit = ( { attributes }: Props ) => {
 					</p>
 				</div>
 				<div className="wp-block-woocommerce-classic-template__placeholder-wireframe">
+					{ isExperimentalBuild() && (
+						<div className="wp-block-woocommerce-classic-template__placeholder-migration-button-container">
+							<Button
+								isPrimary
+								onClick={ () => {
+									replaceBlock(
+										clientId,
+										// TODO: Replace with the blockified version of the Product Grid Block when it will be available.
+										createBlock( 'core/paragraph', {
+											content:
+												'Instead of this block, the new Product Grid Block will be rendered',
+										} )
+									);
+								} }
+								text={ __(
+									'Use the blockified Product Grid Block',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+						</div>
+					) }
 					<img
 						className="wp-block-woocommerce-classic-template__placeholder-image"
 						src={ `${ WC_BLOCKS_IMAGE_URL }template-placeholders/${ templatePlaceholder }.svg` }