diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card-footer.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card-footer.tsx
index 9b3b0400442..924f4e70628 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card-footer.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card-footer.tsx
@@ -144,6 +144,35 @@ function ProductCardFooter( props: { product: Product } ) {
return '';
}
+ const getReaderPriceLabel = () => {
+ if ( product.isOnSale ) {
+ return sprintf(
+ //translators: %1$s is the sale price of the product, %2$s is the regular price of the product, %3$s is the billing period
+ __(
+ 'Sale Price %1$s %3$s, regular price %2$s %3$s',
+ 'woocommerce'
+ ),
+ getPriceLabel(),
+ sprintf(
+ getCurrencyFormat( product.currency ),
+ product.regularPrice
+ ),
+ getBillingText()
+ );
+ }
+
+ if ( product.price !== 0 && product.freemium_type !== 'primary' ) {
+ return sprintf(
+ //translators: %1$s is the price of the product, %2$s is the billing period
+ __( ' %1$s, %2$s ', 'woocommerce' ),
+ getPriceLabel(),
+ getBillingText()
+ );
+ }
+
+ return getPriceLabel();
+ };
+
if ( shouldShowAddToStore( product ) ) {
return (
<>
@@ -160,9 +189,28 @@ function ProductCardFooter( props: { product: Product } ) {
<>
- { getPriceLabel() }
+
+ { getReaderPriceLabel() }
+
+ { getPriceLabel() }
-
+
+ { product.isOnSale && (
+
+ { sprintf(
+ getCurrencyFormat( product.currency ),
+ product.regularPrice
+ ) }
+
+ ) }
+
+
{ getBillingText() }
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.scss b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.scss
index 9f3d404d053..4bc5639b727 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.scss
@@ -217,6 +217,12 @@
line-height: $medium-gap;
}
+ &__on-sale {
+ color: $gray-600;
+ font-weight: 400;
+ text-decoration: line-through;
+ }
+
&__price-billing {
color: $gray-600;
font-size: $default-font-size;
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx
index 00ba4a2d0e7..e96484e6def 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx
@@ -51,6 +51,8 @@ function ProductCard( props: ProductCardProps ): JSX.Element {
billingPeriod: '',
billingPeriodInterval: 0,
currency: '',
+ isOnSale: false,
+ regularPrice: 0,
};
function isSponsored(): boolean {
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
index ff414b7c1d7..8a1b510ddf9 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
@@ -109,6 +109,8 @@ export default function ProductListContent( props: {
billingPeriodInterval:
product.billingPeriodInterval,
currency: product.currency,
+ isOnSale: product.isOnSale,
+ regularPrice: product.regularPrice,
} }
tracksData={ {
position: index + 1,
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts b/plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts
index 9ee660ddb08..c7b9db5682f 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts
@@ -29,6 +29,8 @@ export type SearchAPIProductType = {
billing_period: string;
billing_period_interval: number;
currency: string;
+ is_on_sale: boolean;
+ regular_price: number;
};
export interface Product {
@@ -60,6 +62,8 @@ export interface Product {
billingPeriod?: string;
billingPeriodInterval?: number;
currency: string;
+ isOnSale: boolean;
+ regularPrice: number;
}
export interface ProductTracksData {
diff --git a/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx b/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx
index a063490eefc..67a8319db21 100644
--- a/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx
@@ -142,6 +142,8 @@ async function fetchSearchResults(
url: product.link,
// Due to backwards compatibility, raw_price is from search API, price is from featured API
price: product.raw_price ?? product.price,
+ regularPrice: product.regular_price,
+ isOnSale: product.is_on_sale,
averageRating: product.rating ?? null,
reviewsCount: product.reviews_count ?? null,
isInstallable: product.is_installable,
@@ -426,6 +428,8 @@ const subscriptionToProduct = ( subscription: Subscription ): Product => {
icon: subscription.product_icon,
url: subscription.product_url,
price: -1,
+ regularPrice: -1,
+ isOnSale: false,
averageRating: null,
reviewsCount: null,
isInstallable: false,