diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 05e7a1cee..1e0e9814a 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -19,15 +19,18 @@ interface Props {
 
 const ProductView: FC<Props> = ({ product }) => {
   const addItem = useAddItem()
-  const { price } = usePrice({
-    amount: product.price.value,
-    baseAmount: product.price.retailPrice,
-    currencyCode: product.price.currencyCode!,
-  })
   const { openSidebar } = useUI()
   const [loading, setLoading] = useState(false)
   const [choices, setChoices] = useState<SelectedOptions>({})
 
+  const variant = getVariant(product, choices)
+
+  const { price } = usePrice({
+    amount: variant?.price!.value || product.price.value,
+    baseAmount: variant?.price!.retailPrice || product.price.retailPrice,
+    currencyCode: variant?.price!.currencyCode! || product.price.currencyCode!,
+  })
+
   useEffect(() => {
     // Selects the default option
     product.variants[0].options?.forEach((v) => {
@@ -38,8 +41,6 @@ const ProductView: FC<Props> = ({ product }) => {
     })
   }, [])
 
-  const variant = getVariant(product, choices)
-
   const addToCart = async () => {
     setLoading(true)
     try {
diff --git a/framework/commerce/types.ts b/framework/commerce/types.ts
index a398070ac..33be59257 100644
--- a/framework/commerce/types.ts
+++ b/framework/commerce/types.ts
@@ -190,6 +190,7 @@ interface ProductImage {
 interface ProductVariant2 {
   id: string | number
   options: ProductOption[]
+  price?: ProductPrice
 }
 
 interface ProductPrice {