diff --git a/plugins/woocommerce-admin/client/customize-store/intro/index.tsx b/plugins/woocommerce-admin/client/customize-store/intro/index.tsx
index f4c4fe47a09b..76a58266cdb9 100644
--- a/plugins/woocommerce-admin/client/customize-store/intro/index.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/intro/index.tsx
@@ -238,6 +238,7 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
total_palettes={ theme.total_palettes }
link_url={ theme?.link_url }
is_active={ theme.is_active }
+ price={ theme.price }
onClick={ () => {
if ( theme.is_active ) {
sendEvent( {
diff --git a/plugins/woocommerce-admin/client/customize-store/intro/intro.scss b/plugins/woocommerce-admin/client/customize-store/intro/intro.scss
index ff011543d552..e19ce2deb014 100644
--- a/plugins/woocommerce-admin/client/customize-store/intro/intro.scss
+++ b/plugins/woocommerce-admin/client/customize-store/intro/intro.scss
@@ -278,28 +278,37 @@
}
}
+ .theme-card__free {
+ color: #1e1e1e;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 16px; /* 114.286% */
+ }
+
.theme-card__active {
- border-radius: 100px;
background: rgba(56, 88, 233, 0.2);
+ color: #1d35b4;
+ }
+
+ .theme-card__paid {
+ background: #dcdcde;
+ color: #2c3338;
+ }
+
+ .theme-card__active,
+ .theme-card__paid {
+ border-radius: 100px;
padding: 5px 10px;
justify-content: flex-end;
align-items: center;
gap: 10px;
- color: #1d35b4;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 166.667% */
margin-right: 10px;
}
-
- .theme-card__free {
- color: #1e1e1e;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 16px; /* 114.286% */
- }
}
}
diff --git a/plugins/woocommerce-admin/client/customize-store/intro/theme-card.tsx b/plugins/woocommerce-admin/client/customize-store/intro/theme-card.tsx
index f60c76fe76e9..e4935cbab83c 100644
--- a/plugins/woocommerce-admin/client/customize-store/intro/theme-card.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/intro/theme-card.tsx
@@ -19,6 +19,7 @@ export const ThemeCard = ( {
total_palettes = 0,
link_url = '',
is_active = false,
+ price = 'Free',
onClick,
}: TypeThemeCard & {
onClick: () => void;
@@ -49,7 +50,12 @@ export const ThemeCard = ( {
{ __( 'Active theme', 'woocommerce' ) }
) }
- Free
+ { price !== 'Free' && (
+
+ { __( 'Paid', 'woocommerce' ) }
+
+ ) }
+ { price }
);
diff --git a/plugins/woocommerce-admin/client/customize-store/intro/types.ts b/plugins/woocommerce-admin/client/customize-store/intro/types.ts
index e06b7354efb5..4df236b5181f 100644
--- a/plugins/woocommerce-admin/client/customize-store/intro/types.ts
+++ b/plugins/woocommerce-admin/client/customize-store/intro/types.ts
@@ -13,6 +13,7 @@ export type ThemeCard = {
thumbnail_url: string;
is_active: boolean;
link_url?: string;
+ price: string;
color_palettes: ColorPalette[];
total_palettes: number;
};
diff --git a/plugins/woocommerce/changelog/44822-44609-cys-on-core-update-the-themes-list-on-the-intro-screen b/plugins/woocommerce/changelog/44822-44609-cys-on-core-update-the-themes-list-on-the-intro-screen
new file mode 100644
index 000000000000..f9ef0d96327c
--- /dev/null
+++ b/plugins/woocommerce/changelog/44822-44609-cys-on-core-update-the-themes-list-on-the-intro-screen
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update the themes list on the Customize Your Store intro screen.
\ No newline at end of file
diff --git a/plugins/woocommerce/src/Admin/API/OnboardingThemes.php b/plugins/woocommerce/src/Admin/API/OnboardingThemes.php
index 63564da6d8d3..023ce2ad2a49 100644
--- a/plugins/woocommerce/src/Admin/API/OnboardingThemes.php
+++ b/plugins/woocommerce/src/Admin/API/OnboardingThemes.php
@@ -249,9 +249,69 @@ public function get_recommended_themes( $request ) {
);
}
+ $core_themes = array(
+ array(
+ 'name' => 'Twenty Twenty-Four',
+ 'price' => 'Free',
+ 'color_palettes' => array(
+ array(
+ 'title' => 'Black and white',
+ 'primary' => '#FEFBF3',
+ 'secondary' => '#7F7E7A',
+ ),
+ array(
+ 'title' => 'Brown Sugar',
+ 'primary' => '#EFEBE0',
+ 'secondary' => '#AC6239',
+ ),
+ array(
+ 'title' => 'Midnight',
+ 'primary' => '#161514',
+ 'secondary' => '#AFADA7',
+ ),
+ array(
+ 'title' => 'Olive',
+ 'primary' => '#FEFBF3',
+ 'secondary' => '#7F7E7A',
+ ),
+ ),
+ 'total_palettes' => 0,
+ 'slug' => 'twentytwentyfour',
+ 'thumbnail_url' => 'https://i0.wp.com/themes.svn.wordpress.org/twentytwentyfour/1.0/screenshot.png',
+ 'link_url' => 'https://wordpress.org/themes/twentytwentyfour/',
+ ),
+ array(
+ 'name' => 'Highline',
+ 'price' => '$79/year',
+ 'color_palettes' => array(),
+ 'total_palettes' => 0,
+ 'slug' => 'highline',
+ 'thumbnail_url' => 'https://woo.com/wp-content/uploads/2023/12/Featured-image-538x403-1.png',
+ 'link_url' => 'https://woo.com/products/highline/',
+ ),
+ array(
+ 'name' => 'Luminate',
+ 'price' => '$79/year',
+ 'color_palettes' => array(),
+ 'total_palettes' => 0,
+ 'slug' => 'luminate',
+ 'thumbnail_url' => 'https://woo.com/wp-content/uploads/2022/07/Featured-image-538x403-2.png',
+ 'link_url' => 'https://woo.com/products/luminate/',
+ ),
+ array(
+ 'name' => 'Nokul',
+ 'price' => '$79/year',
+ 'color_palettes' => array(),
+ 'total_palettes' => 0,
+ 'slug' => 'nokul',
+ 'thumbnail_url' => 'https://woo.com/wp-content/uploads/2022/11/Product-logo.jpg',
+ 'link_url' => 'https://woo.com/products/nokul/',
+ ),
+ );
+
// To be implemented: 1. Fetch themes from the marketplace API. 2. Convert prices to the requested currency.
// These are Dotcom themes.
- $themes = array(
+ $default_themes = array(
array(
'name' => 'Tsubaki',
'price' => 'Free',
@@ -269,7 +329,6 @@ public function get_recommended_themes( $request ) {
'slug' => 'tazza',
'thumbnail_url' => 'https://i0.wp.com/s2.wp.com/wp-content/themes/premium/tazza/screenshot.png',
'link_url' => 'https://wordpress.com/theme/tazza/',
- 'total_palettes' => 0,
),
array(
'name' => 'Amulet',
@@ -333,6 +392,9 @@ public function get_recommended_themes( $request ) {
),
);
+ $ai_connection_enabled = get_option( 'woocommerce_blocks_allow_ai_connection' );
+ $themes = $ai_connection_enabled ? $default_themes : $core_themes;
+
// To be implemented: Filter themes based on industry.
if ( $industry ) {
$filtered_themes = array_filter(