diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/deprecated.tsx b/plugins/woocommerce-blocks/assets/js/blocks/single-product/deprecated.tsx
new file mode 100644
index 00000000000..6b34e7e0532
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/deprecated.tsx
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+
+const v1 = {
+ attributes: metadata.attributes,
+ supports: metadata.supports,
+ save: () => {
+ const blockProps = useBlockProps.save();
+
+ return (
+
+ { /* @ts-expect-error: `InnerBlocks.Content` is a component that is typed in WordPress core*/ }
+
+
+ );
+ },
+};
+
+const deprecated = [ v1 ];
+
+export default deprecated;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/single-product/index.tsx
index 2aa3556604d..a2f9363ef2b 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/index.tsx
@@ -10,10 +10,12 @@ import { BLOCK_ICON } from './constants';
import metadata from './block.json';
import edit from './edit';
import save from './save';
+import deprecated from './deprecated';
// @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
registerBlockType( metadata, {
icon: BLOCK_ICON,
edit,
save,
+ deprecated,
} );
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx b/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx
index 4c8f4ef2973..d856b438b9a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx
@@ -4,6 +4,7 @@
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
const Save = () => {
+ // We add the `woocommerce` class to the wrapper to apply WooCommerce styles to the block.
const blockProps = useBlockProps.save( {
className: 'woocommerce',
} );
diff --git a/plugins/woocommerce/changelog/fix-deprectated_single_product_block_save b/plugins/woocommerce/changelog/fix-deprectated_single_product_block_save
new file mode 100644
index 00000000000..f6ce0f16e03
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-deprectated_single_product_block_save
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Deprecate single product block save #51153
diff --git a/plugins/woocommerce/client/legacy/css/woocommerce.scss b/plugins/woocommerce/client/legacy/css/woocommerce.scss
index 8c97759bf97..46c0d0405e4 100644
--- a/plugins/woocommerce/client/legacy/css/woocommerce.scss
+++ b/plugins/woocommerce/client/legacy/css/woocommerce.scss
@@ -1699,7 +1699,10 @@ p.demo_store,
* Buttons
*/
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)),
-:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce {
+:where(body:not(.woocommerce-block-theme-has-button-styles)):where(
+ :not(.edit-post-visual-editor *)
+ )
+ .woocommerce {
a.button,
button.button,
input.button,