Commit f4a2d1d3809 for woocommerce
commit f4a2d1d38092539dfe1b0c1e00f2aa370b01708a
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Mon Sep 7 13:34:36 2026 +0200
Add support for border and shadow styles to the Product Quantity block and apply them to the Cart quantity selector (#68148)
* Add support for border and shadow styles to the Product Quantity block
* Make Product Quantity styles take effect in the Cart block quantity selectors
* Add changelog
diff --git a/docs/block-development/reference/block-references.md b/docs/block-development/reference/block-references.md
index 44c50597266..2c2cfab7551 100644
--- a/docs/block-development/reference/block-references.md
+++ b/docs/block-development/reference/block-references.md
@@ -262,7 +262,7 @@ Display an input field customers can use to select the number of products to add
- **Name:** woocommerce/add-to-cart-with-options-quantity-selector
- **Category:** woocommerce-product-elements
- **Ancestor:** woocommerce/add-to-cart-with-options
-- **Supports:** color (background, text), interactivity
+- **Supports:** color (background, text), interactivity, shadow
## Variation Description (Beta) - woocommerce/add-to-cart-with-options-variation-description
diff --git a/plugins/woocommerce/changelog/fix-WOOTHME-492-product-quantity-extra-style b/plugins/woocommerce/changelog/fix-WOOTHME-492-product-quantity-extra-style
new file mode 100644
index 00000000000..fdd8cd97b09
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-WOOTHME-492-product-quantity-extra-style
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add support for border and shadow styles to the Product Quantity block and also apply them to the Cart quantity selector
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
index 4072b0b6e9f..aaff20a8a7d 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
@@ -11,14 +11,19 @@
}
}
+// Default border lives in :where() so user/theme styles for the Product
+// Quantity block (applied via block.json selectors, including Cart) override it.
+:where(.wc-block-components-quantity-selector:has(input:not([type="hidden"]))) {
+ border: 1px solid $universal-translucent-border-color;
+ border-radius: $universal-border-radius;
+}
+
.wc-block-components-quantity-selector {
&:where(:has(input:not([type="hidden"]))) {
- border: 1px solid $universal-translucent-border-color;
- border-radius: $universal-border-radius;
box-sizing: border-box;
display: flex;
position: relative;
- width: 107px;
+ min-width: 107px;
}
// Extra label for specificity needed in the editor.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
index 3a20af53589..644fe16e696 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
@@ -15,11 +15,15 @@
"text": true
},
"__experimentalBorder": {
- "radius": true
- }
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ },
+ "shadow": true
},
"selectors": {
- "root": ".wp-block-woocommerce-add-to-cart-with-options-quantity-selector, .wc-block-add-to-cart-with-options-grouped-product-item-selector .wc-block-components-quantity-selector"
+ "root": ".wp-block-woocommerce-add-to-cart-with-options-quantity-selector, .wc-block-add-to-cart-with-options-grouped-product-item-selector .wc-block-components-quantity-selector, .wc-block-cart-item__quantity .wc-block-components-quantity-selector"
},
"$schema": "https://schemas.wp.org/trunk/block.json",
"viewScriptModule": "woocommerce/add-to-cart-with-options-quantity-selector"
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss
index 581ad3c9bd7..d7dc5751f50 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss
@@ -21,10 +21,12 @@
// Default radius lives on the block wrapper so user/theme border-radius
// styles (inline or global) override it, then inner elements inherit.
:where(.wc-block-add-to-cart-with-options__quantity-selector) {
+ border: 1px solid $universal-translucent-border-color;
border-radius: $universal-border-radius;
}
-.wc-block-add-to-cart-with-options__quantity-selector .wc-block-components-quantity-selector {
+.wc-block-add-to-cart-with-options__quantity-selector .wc-block-components-quantity-selector:where(:has(input:not([type="hidden"]))) {
+ border-width: 0;
border-radius: inherit;
}