diff --git a/client/my-sites/hosting/staging-site-card/card-content/new-staging-site-card-content.tsx b/client/my-sites/hosting/staging-site-card/card-content/new-staging-site-card-content.tsx
index 67e4c557e0838..018bc62a9d29e 100644
--- a/client/my-sites/hosting/staging-site-card/card-content/new-staging-site-card-content.tsx
+++ b/client/my-sites/hosting/staging-site-card/card-content/new-staging-site-card-content.tsx
@@ -1,12 +1,33 @@
 import config from '@automattic/calypso-config';
 import { Button } from '@automattic/components';
 import { useHasEnTranslation } from '@automattic/i18n-utils';
+import styled from '@emotion/styled';
 import { useTranslate } from 'i18n-calypso';
 import { HostingCardDescription } from 'calypso/components/hosting-card';
 import InlineSupportLink from 'calypso/components/inline-support-link';
+import { useSelector } from 'calypso/state';
+import isSiteStore from 'calypso/state/selectors/is-site-store';
 import { ExceedQuotaErrorContent } from './exceed-quota-error-content';
 
+const WarningContainer = styled.div( {
+	marginTop: '16px',
+	padding: '16px',
+	marginBottom: '24px',
+	border: '1px solid #f0c930',
+	borderRadius: '4px',
+} );
+
+const WarningTitle = styled.p( {
+	fontWeight: 500,
+	marginBottom: '8px',
+} );
+
+const WarningDescription = styled.p( {
+	marginBottom: '8px',
+} );
+
 type CardContentProps = {
+	siteId: number;
 	onAddClick: () => void;
 	isButtonDisabled: boolean;
 	showQuotaError: boolean;
@@ -14,6 +35,7 @@ type CardContentProps = {
 };
 
 export const NewStagingSiteCardContent = ( {
+	siteId,
 	onAddClick,
 	isButtonDisabled,
 	showQuotaError,
@@ -23,6 +45,7 @@ export const NewStagingSiteCardContent = ( {
 		const translate = useTranslate();
 		const hasEnTranslation = useHasEnTranslation();
 		const stagingSiteSyncWoo = config.isEnabled( 'staging-site-sync-woo' );
+		const isSiteWooStore = !! useSelector( ( state ) => isSiteStore( state, siteId ) );
 
 		return (
 			<>
@@ -51,10 +74,10 @@ export const NewStagingSiteCardContent = ( {
 								}
 						  ) }
 				</HostingCardDescription>
-				{ stagingSiteSyncWoo && (
-					<div>
-						<p>{ translate( 'WooCommerce Site' ) }</p>
-						<p>
+				{ stagingSiteSyncWoo && isSiteWooStore && (
+					<WarningContainer>
+						<WarningTitle>{ translate( 'WooCommerce Site' ) }</WarningTitle>
+						<WarningDescription>
 							{ translate(
 								'Syncing staging database to production overwrites posts, pages, products and orders. {{a}}Learn more{{/a}}.',
 								{
@@ -65,8 +88,8 @@ export const NewStagingSiteCardContent = ( {
 									},
 								}
 							) }
-						</p>
-					</div>
+						</WarningDescription>
+					</WarningContainer>
 				) }
 				{ isDevelopmentSite && (
 					// Not wrapped in translation to avoid request unconfirmed copy
diff --git a/client/my-sites/hosting/staging-site-card/card-content/staging-sync-card.tsx b/client/my-sites/hosting/staging-site-card/card-content/staging-sync-card.tsx
index 5f3af6db89f1f..c168bd6aa3ad4 100644
--- a/client/my-sites/hosting/staging-site-card/card-content/staging-sync-card.tsx
+++ b/client/my-sites/hosting/staging-site-card/card-content/staging-sync-card.tsx
@@ -116,6 +116,28 @@ const OptionsTreeTitle = styled.p( {
 	marginBottom: '16px',
 } );
 
+const SyncWarningContainer = styled.div( {
+	display: 'flex',
+	flexDirection: 'column',
+	border: '1px solid #D63638',
+	borderRadius: '4px',
+	maxWidth: '807px',
+	padding: '16px',
+	marginBottom: '16px',
+} );
+
+const SyncWarningTitle = styled.p( {
+	fontWeight: 600,
+	marginTop: '0px',
+	marginBottom: '8px',
+	color: '#D63638',
+} );
+
+const SyncWarningContent = styled.p( {
+	marginTop: '0px',
+	marginBottom: '0px',
+} );
+
 interface SyncCardProps {
 	type: 'production' | 'staging';
 	onPull: ( ( items?: string[] ) => void ) | ( () => void );
@@ -139,16 +161,24 @@ const StagingToProductionSync = ( {
 	onConfirm,
 	showSyncPanel,
 	isSqlsOptionDisabled,
+	isSiteWooStore,
+	databaseSyncConfirmed,
+	setdatabaseSyncConfirmed,
+	isSqlSyncOptionChecked,
 }: {
 	disabled: boolean;
 	siteSlug: string;
 	isSyncInProgress: boolean;
 	onSelectItems: ( items: CheckboxOptionItem[] ) => void;
+	databaseSyncConfirmed: boolean;
+	setdatabaseSyncConfirmed: ( value: boolean ) => void;
 	selectedItems: CheckboxOptionItem[];
 	isSyncButtonDisabled: boolean;
 	onConfirm: () => void;
 	showSyncPanel: boolean;
 	isSqlsOptionDisabled: boolean;
+	isSiteWooStore?: boolean;
+	isSqlSyncOptionChecked?: boolean;
 } ) => {
 	const [ typedSiteName, setTypedSiteName ] = useState( '' );
 	const translate = useTranslate();
@@ -221,6 +251,10 @@ const StagingToProductionSync = ( {
 						disabled={ disabled }
 						onChange={ onSelectItems }
 						isSqlsOptionDisabled={ isSqlsOptionDisabled }
+						databaseSyncConfirmed={ databaseSyncConfirmed }
+						setdatabaseSyncConfirmed={ setdatabaseSyncConfirmed }
+						isSiteWooStore={ !! isSiteWooStore }
+						isSqlSyncOptionChecked={ !! isSqlSyncOptionChecked }
 					></SyncOptionsPanel>
 				</>
 			) }
@@ -242,15 +276,15 @@ const StagingToProductionSync = ( {
 									return <li key={ item.name }>{ item.label }</li>;
 								} ) }
 							</ConfirmationModalList>
-							{ stagingSiteSyncWoo && (
-								<div>
-									<p>{ translate( 'Warning' ) }</p>
-									<p>
+							{ stagingSiteSyncWoo && isSiteWooStore && isSqlSyncOptionChecked && (
+								<SyncWarningContainer>
+									<SyncWarningTitle>{ translate( 'Warning:' ) }</SyncWarningTitle>
+									<SyncWarningContent>
 										{ translate(
 											'We do not recommend syncing or pushing data from a staging site to live production news sites or sites that use eCommerce plugins, such as WooCommerce, without proper planning and testing. Keep in mind that data on the destination site could have newer transactions, such as customers and orders, and would be lost when overwritten by the staging site’s data.'
 										) }
-									</p>
-								</div>
+									</SyncWarningContent>
+								</SyncWarningContainer>
 							) }
 							<ConfirmationModalInputTitle>
 								{ translate( "Enter your site's name {{span}}%(siteSlug)s{{/span}} to confirm.", {
@@ -444,9 +478,11 @@ export const SiteSyncCard = ( {
 		[] as CheckboxOptionItem[]
 	);
 	const [ selectedOption, setSelectedOption ] = useState< string | null >( null );
+	const [ databaseSyncConfirmed, setdatabaseSyncConfirmed ] = useState< boolean >( false );
 	const siteSlug = useSelector(
 		type === 'staging' ? ( state ) => getSiteSlug( state, productionSiteId ) : getSelectedSiteSlug
 	);
+
 	const isSiteWooStore = !! useSelector( ( state ) => isSiteStore( state, productionSiteId ) );
 	const {
 		progress,
@@ -488,10 +524,25 @@ export const SiteSyncCard = ( {
 		}
 	}, [ resetSyncStatus, dispatch, type, onPull, transformSelectedItems, selectedItems ] );
 
+	const isSqlSyncOptionChecked = selectedItems.some( ( item ) => item.name === 'sqls' );
+
+	useEffect( () => {
+		if ( ! isSqlSyncOptionChecked && databaseSyncConfirmed ) {
+			setdatabaseSyncConfirmed( false );
+		}
+	}, [ isSqlSyncOptionChecked, databaseSyncConfirmed, setdatabaseSyncConfirmed ] );
+
+	const disallowWooCommerceSync =
+		config.isEnabled( 'staging-site-sync-woo' ) &&
+		isSiteWooStore &&
+		isSqlSyncOptionChecked &&
+		! databaseSyncConfirmed;
+
 	const isSyncButtonDisabled =
 		disabled ||
 		( selectedItems.length === 0 && selectedOption === actionForType ) ||
-		selectedOption === null;
+		selectedOption === null ||
+		disallowWooCommerceSync;
 
 	let siteToSync: 'production' | 'staging' | null = null;
 	if ( targetSite ) {
@@ -512,6 +563,8 @@ export const SiteSyncCard = ( {
 		}
 	}, [ dispatch, selectedOption, status, syncError ] );
 
+	const stagingSiteSyncWoo = config.isEnabled( 'staging-site-sync-woo' );
+
 	return (
 		<SyncCardContainer
 			currentSiteType={ type }
@@ -571,7 +624,11 @@ export const SiteSyncCard = ( {
 					selectedItems={ selectedItems }
 					isSyncButtonDisabled={ isSyncButtonDisabled }
 					onConfirm={ selectedOption === 'push' ? onPushInternal : onPullInternal }
-					isSqlsOptionDisabled={ isSiteWooStore }
+					isSqlsOptionDisabled={ stagingSiteSyncWoo ? false : isSiteWooStore }
+					isSiteWooStore={ isSiteWooStore }
+					databaseSyncConfirmed={ databaseSyncConfirmed }
+					setdatabaseSyncConfirmed={ setdatabaseSyncConfirmed }
+					isSqlSyncOptionChecked={ isSqlSyncOptionChecked }
 				/>
 			) }
 			{ selectedOption !== actionForType && (
diff --git a/client/my-sites/hosting/staging-site-card/index.js b/client/my-sites/hosting/staging-site-card/index.js
index 379e7d9a1fda8..a5ab15f8ab34a 100644
--- a/client/my-sites/hosting/staging-site-card/index.js
+++ b/client/my-sites/hosting/staging-site-card/index.js
@@ -503,6 +503,7 @@ export const StagingSiteCard = ( {
 	} else if ( showAddStagingSiteCard ) {
 		stagingSiteCardContent = (
 			<NewStagingSiteCardContent
+				siteId={ siteId }
 				onAddClick={ onAddClick }
 				isDevelopmentSite={ isDevelopmentSite }
 				isButtonDisabled={
diff --git a/client/my-sites/hosting/staging-site-card/sync-options-panel.tsx b/client/my-sites/hosting/staging-site-card/sync-options-panel.tsx
index 2eb7eef9a1840..c212d970a12de 100644
--- a/client/my-sites/hosting/staging-site-card/sync-options-panel.tsx
+++ b/client/my-sites/hosting/staging-site-card/sync-options-panel.tsx
@@ -1,9 +1,8 @@
 import config from '@automattic/calypso-config';
 import styled from '@emotion/styled';
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl, CheckboxControl } from '@wordpress/components';
 import { translate } from 'i18n-calypso';
 import { useState, useEffect, useMemo } from 'react';
-import InlineSupportLink from 'calypso/components/inline-support-link';
 
 const DangerousItemsContainer = styled.div( {
 	marginTop: '16px',
@@ -23,6 +22,11 @@ const DangerousItemsTitle = styled.p( {
 	color: '#D63638',
 } );
 
+const WooCommerceOverwriteWarning = styled.p( {
+	color: '#D63638',
+	marginTop: '1.5em',
+} );
+
 const ToggleControlWithHelpMargin = styled( ToggleControl )( {
 	'.components-base-control__help': {
 		marginLeft: '44px',
@@ -66,12 +70,20 @@ export default function SyncOptionsPanel( {
 	disabled,
 	onChange,
 	isSqlsOptionDisabled,
+	isSiteWooStore,
+	databaseSyncConfirmed,
+	setdatabaseSyncConfirmed,
+	isSqlSyncOptionChecked,
 }: {
 	items: CheckboxOptionItem[];
 	reset: boolean;
 	disabled: boolean;
 	onChange: ( items: CheckboxOptionItem[] ) => void;
 	isSqlsOptionDisabled: boolean;
+	isSiteWooStore: boolean;
+	databaseSyncConfirmed: boolean;
+	isSqlSyncOptionChecked: boolean;
+	setdatabaseSyncConfirmed: ( value: boolean ) => void;
 } ) {
 	const initialItemsMap = useMemo(
 		() =>
@@ -189,21 +201,20 @@ export default function SyncOptionsPanel( {
 						</div>
 					);
 				} ) }
-				{ stagingSiteSyncWoo && (
+				{ stagingSiteSyncWoo && isSiteWooStore && (
 					<div>
-						<p>
+						<WooCommerceOverwriteWarning>
 							{ translate(
-								'This site has WooCommerce installed. All orders in the production database will be overwritten. {{a}}Learn more{{/a}}.',
-								{
-									components: {
-										a: (
-											<InlineSupportLink supportContext="hosting-staging-site" showIcon={ false } />
-										),
-									},
-								}
+								'This site has WooCommerce installed. All orders in the production database will be overwritten.'
 							) }
-						</p>
-						<p>{ translate( 'Confirm I want to proceed with database synchronization ' ) }</p>
+						</WooCommerceOverwriteWarning>
+						<CheckboxControl
+							key="checkbox"
+							label={ translate( 'Confirm I want to proceed with database synchronization ' ) }
+							checked={ databaseSyncConfirmed }
+							disabled={ ! isSqlSyncOptionChecked }
+							onChange={ setdatabaseSyncConfirmed }
+						/>
 					</div>
 				) }
 			</DangerousItemsContainer>
diff --git a/client/my-sites/hosting/staging-site-card/use-staging-sync.ts b/client/my-sites/hosting/staging-site-card/use-staging-sync.ts
index db3d4099612e5..ed26ef5f87000 100644
--- a/client/my-sites/hosting/staging-site-card/use-staging-sync.ts
+++ b/client/my-sites/hosting/staging-site-card/use-staging-sync.ts
@@ -1,3 +1,4 @@
+import config from '@automattic/calypso-config';
 import { useMutation, UseMutationOptions, useIsMutating } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import wp from 'calypso/lib/wp';
@@ -52,6 +53,8 @@ export const usePullFromStagingMutation = (
 		MutationVariables
 	>
 ) => {
+	const isStagingSiteSyncWooEnabled = config.isEnabled( 'staging-site-sync-woo' );
+
 	const mutation = useMutation( {
 		mutationFn: async ( options ) =>
 			wp.req.post(
@@ -59,7 +62,7 @@ export const usePullFromStagingMutation = (
 					path: `/sites/${ productionSiteId }/staging-site/pull-from-staging/${ stagingSiteId }`,
 					apiNamespace: 'wpcom/v2',
 				},
-				{ options }
+				{ options, allow_woo_sync: isStagingSiteSyncWooEnabled ? 1 : 0 }
 			),
 		...options,
 		mutationKey: [ PULL_FROM_STAGING, stagingSiteId ],