Commit b14badf085 for woocommerce
commit b14badf0851de568eaf863a0d8a896b7aa2a380b
Author: Kallyan Singha <singhakallyan@gmail.com>
Date: Thu May 29 16:44:30 2025 +0530
[Accessability] Added fallback bg color for sticky Proceed to Checkout area (#58033)
* Fix: Added default fallback when no bg color is present or transparent color is set in theme body
diff --git a/plugins/woocommerce/changelog/fix-sticky-proceed-to-checkout-area-bg-color b/plugins/woocommerce/changelog/fix-sticky-proceed-to-checkout-area-bg-color
new file mode 100644
index 0000000000..17c24b8fe8
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-sticky-proceed-to-checkout-area-bg-color
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Added default fallback when no bg color is present or transparent color is set in theme body
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
index 0ca7be1cd8..ea560a5fc9 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
@@ -103,10 +103,18 @@ const Block = ( {
);
// Get the body background color to use as the sticky container background color.
- const backgroundColor = useMemo(
- () => getComputedStyle( document.body ).backgroundColor,
- []
- );
+ const backgroundColor = useMemo( () => {
+ const computedColor = getComputedStyle( document.body ).backgroundColor;
+ if (
+ ! computedColor ||
+ computedColor === 'rgba(0, 0, 0, 0)' ||
+ computedColor === 'transparent'
+ ) {
+ return '#fff'; // default fallback
+ }
+
+ return computedColor;
+ }, [] );
const displayStickyContainer = positionRelativeToViewport === 'below';