Fix product task text shown before accordion is expanded on stack layout

plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.scss

@@ -22,7 +22,7 @@
 		color: #007cba;
 		padding: 0;
 		height: fit-content;
-		margin-top: 25px;
+		margin-top: 21px;
 		justify-content: center;
 
 		svg {

plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx

@@ -116,6 +116,7 @@ export const Products = () => {
 							<Stack
 								items={ visibleProductTypes }
 								onClickLoadSampleProduct={ loadSampleProduct }
+								showOtherOptions={ isExpanded }
 							/>
 						) : (
 							<CardLayout items={ visibleProductTypes } />

plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.scss

@@ -67,6 +67,7 @@
 	.woocommerce-stack__other-options {
 		display: block;
 		margin-top: 20px;
+		margin-bottom: 4px;
 		color: $gray-700;
 		line-height: 16px;
 	}

plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.tsx

@@ -18,15 +18,18 @@ type StackProps = {
 		onClick: () => void;
 	} )[];
 	onClickLoadSampleProduct: () => void;
+	showOtherOptions?: boolean;
 };
 
 const Stack: React.FC< StackProps > = ( {
 	items,
 	onClickLoadSampleProduct,
+	showOtherOptions = true,
 } ) => {
 	return (
 		<div className="woocommerce-products-stack">
 			<List items={ items } />
+			{ showOtherOptions && (
 				<Text className="woocommerce-stack__other-options">
 					{ interpolateComponents( {
 						mixedString: __(
@@ -49,7 +52,6 @@ const Stack: React.FC< StackProps > = ( {
 								</Link>
 							),
 							LspLink: (
-							// TODO: Update this to the load sample product.
 								<Link
 									href=""
 									type="wc-admin"
@@ -64,6 +66,7 @@ const Stack: React.FC< StackProps > = ( {
 						},
 					} ) }
 				</Text>
+			) }
 		</div>
 	);
 };

plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/index.tsx

@@ -93,6 +93,10 @@ describe( 'Products', () => {
 		const fetchMock = jest.spyOn( global, 'fetch' );
 		const { queryByText, getByRole } = render( <Products /> );
 
+		userEvent.click(
+			getByRole( 'button', { name: 'View more product types' } )
+		);
+
 		expect( queryByText( 'Load Sample Products' ) ).toBeInTheDocument();
 
 		userEvent.click(

plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/stack.tsx

@@ -27,6 +27,24 @@ describe( 'Stack', () => {
 		expect( queryAllByRole( 'link' ) ).toHaveLength( 2 );
 	} );
 
+	it( 'should not render other product options', () => {
+		const { queryByText } = render(
+			<Stack
+				showOtherOptions={ false }
+				onClickLoadSampleProduct={ () => {} }
+				items={ [
+					{
+						...productTypes[ 0 ],
+						onClick: () => {},
+					},
+				] }
+			/>
+		);
+
+		expect( queryByText( 'Start Blank' ) ).not.toBeInTheDocument();
+		expect( queryByText( 'Load Sample Products' ) ).not.toBeInTheDocument();
+	} );
+
 	it( 'should call onClickLoadSampleProduct when the "Load Sample Products" link is clicked', async () => {
 		const onClickLoadSampleProduct = jest.fn();
 		const { getByRole } = render(