Commit 22f662f0318 for woocommerce
commit 22f662f03184663c916c6bceefd597779793e5ea
Author: Chris Lilitsas <1105590+xristos3490@users.noreply.github.com>
Date: Fri Jul 31 18:34:23 2026 +0300
Only apply stepper classes to quantity containers with a visible input (#67153)
* fix: only class quantity containers that hold a visible qty input
* fix: detect hidden quantity inputs case-insensitively
* fix: skip hidden quantity inputs in any attribute form
* fix: drop the pending quantity container when its div closes
* fix: gate stepper quantity-selector styles on a visible input in CSS
* style: drop cross-file comment references in add-to-cart-form styles
* style: drop the quantity-selector visible-input guard comment
diff --git a/plugins/woocommerce/changelog/fix-add-to-cart-form-stepper-hidden-quantity-container b/plugins/woocommerce/changelog/fix-add-to-cart-form-stepper-hidden-quantity-container
new file mode 100644
index 00000000000..3e48ef6ae04
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-add-to-cart-form-stepper-hidden-quantity-container
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Apply the stepper quantity-selector styles only to quantity containers that hold a visible quantity input, so a form containing both visible and hidden quantity fields no longer renders a stepper box around a hidden one.
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 31cd4aab61f..d168244f133 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
@@ -12,12 +12,14 @@
}
.wc-block-components-quantity-selector {
- border: 1px solid $universal-translucent-border-color;
- border-radius: $universal-border-radius;
- box-sizing: border-box;
- display: flex;
- position: relative;
- width: 107px;
+ &: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;
+ }
// Extra label for specificity needed in the editor.
input.wc-block-components-quantity-selector__input {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-form/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-form/style.scss
index a3161499d80..e273b979da1 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-form/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-form/style.scss
@@ -71,12 +71,14 @@
div.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper {
form.cart {
div.wc-block-components-quantity-selector.quantity {
- display: inline-flex;
- width: unset;
- background-color: #fff;
- margin-right: 0.5em;
- margin-bottom: 0;
- grid-column: 1;
+ &:where(:has(input:not([type="hidden"]))) {
+ display: inline-flex;
+ width: unset;
+ background-color: #fff;
+ margin-right: 0.5em;
+ margin-bottom: 0;
+ grid-column: 1;
+ }
}
}
@@ -135,7 +137,9 @@ div.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper {
.wp-block-woocommerce-single-product {
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper {
.wc-block-components-quantity-selector {
- width: 107px;
+ &:where(:has(input:not([type="hidden"]))) {
+ width: 107px;
+ }
}
}
}