diff --git a/e2e/fixtures/base/cart-dropdown.ts b/e2e/fixtures/base/cart-dropdown.ts
index bdd734bb0..40a1440bb 100644
--- a/e2e/fixtures/base/cart-dropdown.ts
+++ b/e2e/fixtures/base/cart-dropdown.ts
@@ -19,23 +19,33 @@ export class CartDropdown {
     await this.navCartLink.hover()
   }
 
-  async getCartItem(name: string) {
-    const cartItem = this.cartDropdown.getByTestId("cart-item").filter({
-      hasText: name,
-    })
-    const quantity = cartItem
-      .getByTestId("cart-item-quantity")
-      .getAttribute("data-value")
-    const variant = cartItem
-      .getByTestId("cart-item-variant")
-      .getAttribute("data-value")
+  async close() {
+    if (await this.cartDropdown.isVisible()) {
+      const box = await this.cartDropdown.boundingBox()
+      if (!box) {
+        return
+      }
+      await this.page.mouse.move(box.x + box.width / 4, box.y + box.height / 4)
+      await this.page.mouse.move(5, 10)
+    }
+  }
+
+  async getCartItem(name: string, variant: string) {
+    const cartItem = this.cartDropdown
+      .getByTestId("cart-item")
+      .filter({
+        hasText: name,
+      })
+      .filter({
+        hasText: `Variant: ${variant}`,
+      })
     return {
       locator: cartItem,
       productLink: cartItem.getByTestId("product-link"),
       removeButton: cartItem.getByTestId("cart-item-remove-button"),
       name,
-      quantity,
-      variant,
+      quantity: cartItem.getByTestId("cart-item-quantity"),
+      variant: cartItem.getByTestId("cart-item-variant"),
     }
   }
 }
diff --git a/e2e/fixtures/cart-page.ts b/e2e/fixtures/cart-page.ts
index 6655cbad7..138305040 100644
--- a/e2e/fixtures/cart-page.ts
+++ b/e2e/fixtures/cart-page.ts
@@ -23,6 +23,7 @@ export class CartPage extends BasePage {
   cartGiftCardAmount: Locator
   cartShipping: Locator
   cartTaxes: Locator
+  cartTotal: Locator
   checkoutButton: Locator
 
   constructor(page: Page) {
@@ -61,22 +62,23 @@ export class CartPage extends BasePage {
     )
     this.cartShipping = this.container.getByTestId("cart-shipping")
     this.cartTaxes = this.container.getByTestId("cart-taxes")
+    this.cartTotal = this.container.getByTestId("cart-total")
   }
 
   async getProduct(title: string, variant: string) {
     const productRow = this.productRow
       .filter({
-        has: this.productTitle.filter({ hasText: title }),
+        hasText: title,
       })
       .filter({
-        has: this.productVariant.filter({ hasText: variant }),
+        hasText: `Variant: ${variant}`,
       })
     return {
       productRow,
       title: productRow.getByTestId("product-title"),
       variant: productRow.getByTestId("product-variant"),
       deleteButton: productRow.getByTestId("delete-button"),
-      quantitySelect: productRow.getByTestId("quantity-select"),
+      quantitySelect: productRow.getByTestId("product-select-button"),
       price: productRow.getByTestId("product-unit-price"),
       total: productRow.getByTestId("product-price"),
     }
diff --git a/e2e/fixtures/product-page.ts b/e2e/fixtures/product-page.ts
index c3c7bb45b..66b79ba9e 100644
--- a/e2e/fixtures/product-page.ts
+++ b/e2e/fixtures/product-page.ts
@@ -9,6 +9,7 @@ export class ProductPage extends BasePage {
   productTitle: Locator
   productDescription: Locator
   productOptions: Locator
+  productPrice: Locator
   addProductButton: Locator
   mobileActionsContainer: Locator
   mobileTitle: Locator
@@ -24,6 +25,7 @@ export class ProductPage extends BasePage {
     this.productTitle = this.container.getByTestId("product-title")
     this.productDescription = this.container.getByTestId("product-description")
     this.productOptions = this.container.getByTestId("product-options")
+    this.productPrice = this.container.getByTestId("product-price")
     this.addProductButton = this.container.getByTestId("add-product-button")
     this.mobileActionsContainer = page.getByTestId("mobile-actions")
     this.mobileTitle = this.mobileActionsContainer.getByTestId("mobile-title")
@@ -35,10 +37,16 @@ export class ProductPage extends BasePage {
     )
   }
 
+  async clickAddProduct() {
+    await this.addProductButton.click()
+    await this.cartDropdown.cartDropdown.waitFor({ state: "visible" })
+  }
+
   async selectOption(option: string) {
+    await this.page.mouse.move(0, 0) // hides the checkout container
     const optionButton = this.productOptions
       .getByTestId("option-button")
       .filter({ hasText: option })
-    await optionButton.click()
+    await optionButton.click({ clickCount: 2 })
   }
 }
diff --git a/e2e/tests/public/cart.spec.ts b/e2e/tests/public/cart.spec.ts
new file mode 100644
index 000000000..edaaaf666
--- /dev/null
+++ b/e2e/tests/public/cart.spec.ts
@@ -0,0 +1,202 @@
+/*
+Test List
+- login from the sign in page redirects you page to the cart
+*/
+import { test, expect } from "../../index"
+import { compareFloats, getFloatValue } from "../../utils"
+
+test.describe("Cart tests", async () => {
+  test("Ensure adding multiple items from a product page adjusts the cart accordingly", async ({
+    page,
+    cartPage,
+    productPage,
+    storePage,
+  }) => {
+    // Assuming we have access to our page objects here
+    const cartDropdown = cartPage.cartDropdown
+
+    await test.step("Navigate to the product page", async () => {
+      await storePage.goto()
+      const product = await storePage.getProduct("Sweatshirt")
+      await product.locator.click()
+      await productPage.container.waitFor({ state: "visible" })
+    })
+
+    await test.step("Add the small size to the cart and verify the data", async () => {
+      await productPage.selectOption("S")
+      await productPage.addProductButton.click()
+      await expect(cartDropdown.navCartLink).toContainText("(1)")
+      const cartItem = await cartDropdown.getCartItem("Sweatshirt", "S")
+      await expect(cartItem.locator).toBeVisible()
+      await expect(cartItem.variant).toContainText("S")
+      await expect(cartItem.quantity).toContainText("1")
+      await cartDropdown.goToCartButton.click()
+      await cartDropdown.close()
+      await cartPage.container.waitFor({ state: "visible" })
+      const productInCart = await cartPage.getProduct("Sweatshirt", "S")
+      await expect(productInCart.productRow).toBeVisible()
+      await expect(productInCart.quantitySelect).toHaveValue("1")
+      await page.goBack()
+      await productPage.container.waitFor({ state: "visible" })
+    })
+
+    await test.step("Add the small size to the cart again and verify the data", async () => {
+      await productPage.selectOption("S")
+      await productPage.addProductButton.click()
+      await expect(cartDropdown.navCartLink).toContainText("(2)")
+      const cartItem = await cartDropdown.getCartItem("Sweatshirt", "S")
+      await expect(cartItem.locator).toBeVisible()
+      await expect(cartItem.variant).toContainText("S")
+      await expect(cartItem.quantity).toContainText("2")
+      await cartDropdown.goToCartButton.click()
+      await cartDropdown.close()
+      await cartPage.container.waitFor({ state: "visible" })
+      const productInCart = await cartPage.getProduct("Sweatshirt", "S")
+      await expect(productInCart.productRow).toBeVisible()
+      await expect(productInCart.quantitySelect).toHaveValue("2")
+      await page.goBack()
+      await productPage.container.waitFor({ state: "visible" })
+    })
+
+    await test.step("Add the medium size to the cart and verify the data", async () => {
+      await productPage.selectOption("M")
+      await productPage.addProductButton.click()
+      await expect(cartDropdown.navCartLink).toContainText("(3)")
+      const mediumCartItem = await cartDropdown.getCartItem("Sweatshirt", "M")
+      await expect(mediumCartItem.locator).toBeVisible()
+      await expect(mediumCartItem.variant).toContainText("M")
+      await expect(mediumCartItem.quantity).toContainText("1")
+      await cartDropdown.goToCartButton.click()
+      await cartDropdown.close()
+      await cartPage.container.waitFor({ state: "visible" })
+      const mediumProductInCart = await cartPage.getProduct("Sweatshirt", "M")
+      await expect(mediumProductInCart.productRow).toBeVisible()
+      await expect(mediumProductInCart.quantitySelect).toHaveValue("1")
+      const smallProductInCart = await cartPage.getProduct("Sweatshirt", "S")
+      await expect(smallProductInCart.productRow).toBeVisible()
+      await expect(smallProductInCart.quantitySelect).toHaveValue("2")
+    })
+  })
+
+  test("Ensure adding two products into the cart and verify the quantities", async ({
+    cartPage,
+    productPage,
+    storePage,
+  }) => {
+    const cartDropdown = cartPage.cartDropdown
+
+    await test.step("Navigate to the product page - go to the store page and click on the Sweatshirt product", async () => {
+      await storePage.goto()
+      const product = await storePage.getProduct("Sweatshirt")
+      await product.locator.click()
+      await productPage.container.waitFor({ state: "visible" })
+    })
+
+    await test.step("Add the small sweatshirt to the cart", async () => {
+      await productPage.selectOption("S")
+      await productPage.addProductButton.click()
+      await expect(cartDropdown.navCartLink).toContainText("(1)")
+      const sweatshirtItem = await cartDropdown.getCartItem("Sweatshirt", "S")
+      await expect(sweatshirtItem.locator).toBeVisible()
+      await expect(sweatshirtItem.variant).toHaveText("Variant: S")
+      await expect(sweatshirtItem.quantity).toContainText("1")
+      await cartDropdown.close()
+    })
+
+    await test.step("Navigate to another product - Sweatpants", async () => {
+      await storePage.goto()
+      const product = await storePage.getProduct("Sweatpants")
+      await product.locator.click()
+      await productPage.container.waitFor({ state: "visible" })
+    })
+
+    await test.step("Add the small sweatpants to the cart", async () => {
+      await productPage.selectOption("S")
+      await productPage.addProductButton.click()
+      await expect(cartDropdown.navCartLink).toContainText("(2)")
+      const sweatpantsItem = await cartDropdown.getCartItem("Sweatpants", "S")
+      await expect(sweatpantsItem.locator).toBeVisible()
+      await expect(sweatpantsItem.variant).toHaveText("Variant: S")
+      await expect(sweatpantsItem.quantity).toContainText("1")
+      const sweatshirtItem = await cartDropdown.getCartItem("Sweatshirt", "S")
+      await expect(sweatshirtItem.locator).toBeVisible()
+      await expect(sweatshirtItem.quantity).toContainText("1")
+      await cartDropdown.goToCartButton.click()
+      await cartDropdown.close()
+      await cartPage.container.waitFor({ state: "visible" })
+    })
+
+    await test.step("Verify the quantities in the cart", async () => {
+      const sweatpantsProduct = await cartPage.getProduct("Sweatpants", "S")
+      await expect(sweatpantsProduct.productRow).toBeVisible()
+      await expect(sweatpantsProduct.quantitySelect).toHaveValue("1")
+      const sweatshirtProduct = await cartPage.getProduct("Sweatshirt", "S")
+      await expect(sweatshirtProduct.productRow).toBeVisible()
+      await expect(sweatshirtProduct.quantitySelect).toHaveValue("1")
+    })
+  })
+
+  test("Verify the prices carries over to checkout", async ({
+    cartPage,
+    productPage,
+    storePage,
+  }) => {
+    await test.step("Navigate to the product page - go to the store page and click on the Hoodie product", async () => {
+      await storePage.goto()
+      const product = await storePage.getProduct("Hoodie")
+      await product.locator.click()
+      await productPage.container.waitFor({ state: "visible" })
+    })
+
+    let hoodieSmallPrice = 0
+    let hoodieMediumPrice = 0
+    await test.step("Add the hoodie to the cart", async () => {
+      await productPage.selectOption("S")
+      hoodieSmallPrice = getFloatValue(
+        (await productPage.productPrice.getAttribute("data-value")) || "0"
+      )
+      await productPage.clickAddProduct()
+      await productPage.cartDropdown.close()
+      await productPage.selectOption("M")
+      hoodieMediumPrice = getFloatValue(
+        (await productPage.productPrice.getAttribute("data-value")) || "0"
+      )
+      await productPage.clickAddProduct()
+
+      await productPage.cartDropdown.close()
+    })
+
+    await test.step("Navigate to another product - Longsleeve", async () => {
+      await storePage.goto()
+      const product = await storePage.getProduct("Longsleeve")
+      await product.locator.click()
+      await productPage.container.waitFor({ state: "visible" })
+    })
+
+    let longsleeveSmallPrice = 0
+    await test.step("Add the small longsleeve to the cart", async () => {
+      await productPage.selectOption("S")
+      longsleeveSmallPrice = getFloatValue(
+        (await productPage.productPrice.getAttribute("data-value")) || "0"
+      )
+      await productPage.clickAddProduct()
+      await productPage.cartDropdown.close()
+      await productPage.selectOption("S")
+      await productPage.clickAddProduct()
+      await productPage.selectOption("S")
+      await productPage.clickAddProduct()
+      await productPage.cartDropdown.goToCartButton.click()
+      await productPage.cartDropdown.close()
+      await cartPage.container.waitFor({ state: "visible" })
+    })
+
+    await test.step("Verify the price in the cart is the expected value", async () => {
+      const total = getFloatValue(
+        (await cartPage.cartSubtotal.getAttribute("data-value")) || "0"
+      )
+      const calculatedTotal =
+        3 * longsleeveSmallPrice + hoodieSmallPrice + hoodieMediumPrice
+      expect(compareFloats(total, calculatedTotal)).toBe(0)
+    })
+  })
+})
diff --git a/e2e/utils/index.ts b/e2e/utils/index.ts
new file mode 100644
index 000000000..b7f9f4b12
--- /dev/null
+++ b/e2e/utils/index.ts
@@ -0,0 +1,14 @@
+export function getFloatValue(s: string) {
+  return parseFloat(parseFloat(s).toFixed(2))
+}
+
+export function compareFloats(f1: number, f2: number) {
+  const diff = f1 - f2
+  if (Math.abs(diff) < 0.01) {
+    return 0
+  } else if (diff < 0) {
+    return -1
+  } else {
+    return 1
+  }
+}
diff --git a/src/lib/util/get-product-price.ts b/src/lib/util/get-product-price.ts
index d15f6ea0c..0dcce4dbc 100644
--- a/src/lib/util/get-product-price.ts
+++ b/src/lib/util/get-product-price.ts
@@ -36,11 +36,13 @@ export function getProductPrice({
     })
 
     return {
+      calculated_price_number: cheapestVariant.calculated_price,
       calculated_price: formatAmount({
         amount: cheapestVariant.calculated_price,
         region,
         includeTaxes: false,
       }),
+      original_price_number: cheapestVariant.original_price,
       original_price: formatAmount({
         amount: cheapestVariant.original_price,
         region,
@@ -68,11 +70,13 @@ export function getProductPrice({
     }
 
     return {
+      calculated_price_number: variant.calculated_price,
       calculated_price: formatAmount({
         amount: variant.calculated_price,
         region,
         includeTaxes: false,
       }),
+      original_price_number: variant.original_price,
       original_price: formatAmount({
         amount: variant.original_price,
         region,
diff --git a/src/modules/common/components/cart-totals/index.tsx b/src/modules/common/components/cart-totals/index.tsx
index 7a2580a33..7ee2d1387 100644
--- a/src/modules/common/components/cart-totals/index.tsx
+++ b/src/modules/common/components/cart-totals/index.tsx
@@ -38,12 +38,18 @@ const CartTotals: React.FC<CartTotalsProps> = ({ data }) => {
               <InformationCircleSolid color="var(--fg-muted)" />
             </Tooltip>
           </span>
-          <span data-testid="cart-subtotal">{getAmount(subtotal)}</span>
+          <span data-testid="cart-subtotal" data-value={subtotal || 0}>
+            {getAmount(subtotal)}
+          </span>
         </div>
         {!!discount_total && (
           <div className="flex items-center justify-between">
             <span>Discount</span>
-            <span className="text-ui-fg-interactive" data-testid="cart-discount" data-value={getAmount(discount_total)}>
+            <span
+              className="text-ui-fg-interactive"
+              data-testid="cart-discount"
+              data-value={discount_total || 0}
+            >
               - {getAmount(discount_total)}
             </span>
           </div>
@@ -51,24 +57,38 @@ const CartTotals: React.FC<CartTotalsProps> = ({ data }) => {
         {!!gift_card_total && (
           <div className="flex items-center justify-between">
             <span>Gift card</span>
-            <span className="text-ui-fg-interactive" data-testid="cart-gift-card-amount" data-value={getAmount(gift_card_total)}>
+            <span
+              className="text-ui-fg-interactive"
+              data-testid="cart-gift-card-amount"
+              data-value={gift_card_total || 0}
+            >
               - {getAmount(gift_card_total)}
             </span>
           </div>
         )}
         <div className="flex items-center justify-between">
           <span>Shipping</span>
-          <span data-testid="cart-shipping">{getAmount(shipping_total)}</span>
+          <span data-testid="cart-shipping" data-value={shipping_total || 0}>
+            {getAmount(shipping_total)}
+          </span>
         </div>
         <div className="flex justify-between">
           <span className="flex gap-x-1 items-center ">Taxes</span>
-          <span data-testid="cart-taxes">{getAmount(tax_total)}</span>
+          <span data-testid="cart-taxes" data-value={tax_total || 0}>
+            {getAmount(tax_total)}
+          </span>
         </div>
       </div>
       <div className="h-px w-full border-b border-gray-200 my-4" />
       <div className="flex items-center justify-between text-ui-fg-base mb-2 txt-medium ">
         <span>Total</span>
-        <span className="txt-xlarge-plus" data-testid="cart-taxes">{getAmount(total)}</span>
+        <span
+          className="txt-xlarge-plus"
+          data-testid="cart-total"
+          data-value={total || 0}
+        >
+          {getAmount(total)}
+        </span>
       </div>
       <div className="h-px w-full border-b border-gray-200 mt-4" />
     </div>
diff --git a/src/modules/layout/components/cart-dropdown/index.tsx b/src/modules/layout/components/cart-dropdown/index.tsx
index 8e0e91b9f..6b96327e9 100644
--- a/src/modules/layout/components/cart-dropdown/index.tsx
+++ b/src/modules/layout/components/cart-dropdown/index.tsx
@@ -133,8 +133,17 @@ const CartDropdown = ({
                                     {item.title}
                                   </LocalizedClientLink>
                                 </h3>
-                                <LineItemOptions variant={item.variant} data-testid="cart-item-variant" data-value={item.variant} />
-                                <span data-testid="cart-item-quantity" data-value={item.quantity}>Quantity: {item.quantity}</span>
+                                <LineItemOptions
+                                  variant={item.variant}
+                                  data-testid="cart-item-variant"
+                                  data-value={item.variant}
+                                />
+                                <span
+                                  data-testid="cart-item-quantity"
+                                  data-value={item.quantity}
+                                >
+                                  Quantity: {item.quantity}
+                                </span>
                               </div>
                               <div className="flex justify-end">
                                 <LineItemPrice
@@ -145,7 +154,11 @@ const CartDropdown = ({
                               </div>
                             </div>
                           </div>
-                          <DeleteButton id={item.id} className="mt-1" data-testid="cart-item-remove-button">
+                          <DeleteButton
+                            id={item.id}
+                            className="mt-1"
+                            data-testid="cart-item-remove-button"
+                          >
                             Remove
                           </DeleteButton>
                         </div>
@@ -158,7 +171,11 @@ const CartDropdown = ({
                       Subtotal{" "}
                       <span className="font-normal">(excl. taxes)</span>
                     </span>
-                    <span className="text-large-semi" data-testid="cart-subtotal">
+                    <span
+                      className="text-large-semi"
+                      data-testid="cart-subtotal"
+                      data-value={cartState.subtotal || 0}
+                    >
                       {formatAmount({
                         amount: cartState.subtotal || 0,
                         region: cartState.region,
@@ -167,7 +184,11 @@ const CartDropdown = ({
                     </span>
                   </div>
                   <LocalizedClientLink href="/cart" passHref>
-                    <Button className="w-full" size="large" data-testid="go-to-cart-button">
+                    <Button
+                      className="w-full"
+                      size="large"
+                      data-testid="go-to-cart-button"
+                    >
                       Go to cart
                     </Button>
                   </LocalizedClientLink>
diff --git a/src/modules/products/components/mobile-actions/index.tsx b/src/modules/products/components/mobile-actions/index.tsx
index 364370bc7..b7cc2a1e1 100644
--- a/src/modules/products/components/mobile-actions/index.tsx
+++ b/src/modules/products/components/mobile-actions/index.tsx
@@ -24,6 +24,7 @@ type MobileActionsProps = {
   handleAddToCart: () => void
   isAdding?: boolean
   show: boolean
+  optionsDisabled: boolean
 }
 
 const MobileActions: React.FC<MobileActionsProps> = ({
@@ -36,6 +37,7 @@ const MobileActions: React.FC<MobileActionsProps> = ({
   handleAddToCart,
   isAdding,
   show,
+  optionsDisabled,
 }) => {
   const { state, open, close } = useToggleState()
 
@@ -71,7 +73,10 @@ const MobileActions: React.FC<MobileActionsProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="bg-white flex flex-col gap-y-3 justify-center items-center text-large-regular p-4 h-full w-full border-t border-gray-200" data-testid="mobile-actions">
+          <div
+            className="bg-white flex flex-col gap-y-3 justify-center items-center text-large-regular p-4 h-full w-full border-t border-gray-200"
+            data-testid="mobile-actions"
+          >
             <div className="flex items-center gap-x-2">
               <span data-testid="mobile-title">{product.title}</span>
               <span>—</span>
@@ -98,7 +103,12 @@ const MobileActions: React.FC<MobileActionsProps> = ({
               )}
             </div>
             <div className="grid grid-cols-2 w-full gap-x-4">
-              <Button onClick={open} variant="secondary" className="w-full" data-testid="mobile-actions-button">
+              <Button
+                onClick={open}
+                variant="secondary"
+                className="w-full"
+                data-testid="mobile-actions-button"
+              >
                 <div className="flex items-center justify-between w-full">
                   <span>
                     {variant
@@ -150,7 +160,10 @@ const MobileActions: React.FC<MobileActionsProps> = ({
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Panel className="w-full h-full transform overflow-hidden text-left flex flex-col gap-y-3" data-testid="mobile-actions-modal">
+                <Dialog.Panel
+                  className="w-full h-full transform overflow-hidden text-left flex flex-col gap-y-3"
+                  data-testid="mobile-actions-modal"
+                >
                   <div className="w-full flex justify-end pr-6">
                     <button
                       onClick={close}
@@ -171,6 +184,7 @@ const MobileActions: React.FC<MobileActionsProps> = ({
                                 current={options[option.id]}
                                 updateOption={updateOptions}
                                 title={option.title}
+                                disabled={optionsDisabled}
                               />
                             </div>
                           )
diff --git a/src/modules/products/components/option-select/index.tsx b/src/modules/products/components/option-select/index.tsx
index 40ae6c097..9c13463e4 100644
--- a/src/modules/products/components/option-select/index.tsx
+++ b/src/modules/products/components/option-select/index.tsx
@@ -9,7 +9,8 @@ type OptionSelectProps = {
   current: string
   updateOption: (option: Record<string, string>) => void
   title: string
-  'data-testid'?: string
+  disabled: boolean
+  "data-testid"?: string
 }
 
 const OptionSelect: React.FC<OptionSelectProps> = ({
@@ -17,14 +18,18 @@ const OptionSelect: React.FC<OptionSelectProps> = ({
   current,
   updateOption,
   title,
-  'data-testid': dataTestId
+  "data-testid": dataTestId,
+  disabled,
 }) => {
   const filteredOptions = option.values.map((v) => v.value).filter(onlyUnique)
 
   return (
     <div className="flex flex-col gap-y-3">
       <span className="text-sm">Select {title}</span>
-      <div className="flex flex-wrap justify-between gap-2" data-testid={dataTestId}>
+      <div
+        className="flex flex-wrap justify-between gap-2"
+        data-testid={dataTestId}
+      >
         {filteredOptions.map((v) => {
           return (
             <button
@@ -38,6 +43,7 @@ const OptionSelect: React.FC<OptionSelectProps> = ({
                     v !== current,
                 }
               )}
+              disabled={disabled}
               data-testid="option-button"
             >
               {v}
diff --git a/src/modules/products/components/product-actions/index.tsx b/src/modules/products/components/product-actions/index.tsx
index f309690af..ad2eaf112 100644
--- a/src/modules/products/components/product-actions/index.tsx
+++ b/src/modules/products/components/product-actions/index.tsx
@@ -18,6 +18,7 @@ import ProductPrice from "../product-price"
 type ProductActionsProps = {
   product: PricedProduct
   region: Region
+  disabled?: boolean
 }
 
 export type PriceType = {
@@ -30,6 +31,7 @@ export type PriceType = {
 export default function ProductActions({
   product,
   region,
+  disabled,
 }: ProductActionsProps) {
   const [options, setOptions] = useState<Record<string, string>>({})
   const [isAdding, setIsAdding] = useState(false)
@@ -138,6 +140,7 @@ export default function ProductActions({
                       updateOption={updateOptions}
                       title={option.title}
                       data-testid="product-options"
+                      disabled={!!disabled || isAdding}
                     />
                   </div>
                 )
@@ -151,7 +154,7 @@ export default function ProductActions({
 
         <Button
           onClick={handleAddToCart}
-          disabled={!inStock || !variant}
+          disabled={!inStock || !variant || !!disabled || isAdding}
           variant="primary"
           className="w-full h-10"
           isLoading={isAdding}
@@ -173,6 +176,7 @@ export default function ProductActions({
           handleAddToCart={handleAddToCart}
           isAdding={isAdding}
           show={!inView}
+          optionsDisabled={!!disabled || isAdding}
         />
       </div>
     </>
diff --git a/src/modules/products/components/product-price/index.tsx b/src/modules/products/components/product-price/index.tsx
index f87f28799..daf7f8ed9 100644
--- a/src/modules/products/components/product-price/index.tsx
+++ b/src/modules/products/components/product-price/index.tsx
@@ -36,13 +36,24 @@ export default function ProductPrice({
         })}
       >
         {!variant && "From "}
-        {selectedPrice.calculated_price}
+        <span
+          data-testid="product-price"
+          data-value={selectedPrice.calculated_price_number}
+        >
+          {selectedPrice.calculated_price}
+        </span>
       </span>
       {selectedPrice.price_type === "sale" && (
         <>
           <p>
             <span className="text-ui-fg-subtle">Original: </span>
-            <span className="line-through">{selectedPrice.original_price}</span>
+            <span
+              className="line-through"
+              data-testid="original-product-price"
+              data-value={selectedPrice.original_price_number}
+            >
+              {selectedPrice.original_price}
+            </span>
           </p>
           <span className="text-ui-fg-interactive">
             -{selectedPrice.percentage_diff}%
diff --git a/src/modules/products/templates/index.tsx b/src/modules/products/templates/index.tsx
index cf3e7f727..6af20bbb9 100644
--- a/src/modules/products/templates/index.tsx
+++ b/src/modules/products/templates/index.tsx
@@ -29,7 +29,10 @@ const ProductTemplate: React.FC<ProductTemplateProps> = ({
 
   return (
     <>
-      <div className="content-container flex flex-col small:flex-row small:items-start py-6 relative" data-testid="product-container">
+      <div
+        className="content-container flex flex-col small:flex-row small:items-start py-6 relative"
+        data-testid="product-container"
+      >
         <div className="flex flex-col small:sticky small:top-48 small:py-0 small:max-w-[300px] w-full py-8 gap-y-6">
           <ProductInfo product={product} />
           <ProductTabs product={product} />
@@ -40,13 +43,22 @@ const ProductTemplate: React.FC<ProductTemplateProps> = ({
         <div className="flex flex-col small:sticky small:top-48 small:py-0 small:max-w-[300px] w-full py-8 gap-y-12">
           <ProductOnboardingCta />
           <Suspense
-            fallback={<ProductActions product={product} region={region} />}
+            fallback={
+              <ProductActions
+                disabled={true}
+                product={product}
+                region={region}
+              />
+            }
           >
             <ProductActionsWrapper id={product.id} region={region} />
           </Suspense>
         </div>
       </div>
-      <div className="content-container my-16 small:my-32" data-testid="related-products-container">
+      <div
+        className="content-container my-16 small:my-32"
+        data-testid="related-products-container"
+      >
         <Suspense fallback={<SkeletonRelatedProducts />}>
           <RelatedProducts product={product} countryCode={countryCode} />
         </Suspense>