Commit 5b7b6efe61f for woocommerce
commit 5b7b6efe61fe75da3660f0c6cc9ea4d541fee7b2
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Fri May 15 14:23:14 2026 +0200
Increase default input height in the Add to Cart + Options Quantity Selector and add styles when Mini-Cart is missing (#65002)
* Increase default input height in the Add to Cart + Options Quantity Selector
* Add changelog
* Move Mini-Cart specific input padding to the Mini-Cart stylesheet
* Make sure quantity selector styles are always included, even if Mini-Cart block isn't rendered
* Remove no longer needed styles
* CodeRabbit suggestions
* Fix Cart block regression
* Fix missing styles in the Add to Cart + Options quantity inputs in the editor side
diff --git a/plugins/woocommerce/changelog/fix-default-input-height-add-to-cart-with-options b/plugins/woocommerce/changelog/fix-default-input-height-add-to-cart-with-options
new file mode 100644
index 00000000000..70e95692bdf
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-default-input-height-add-to-cart-with-options
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: Increase default input height in the Add to Cart + Options 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 40868d5e90b..726ae349b0f 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
@@ -32,7 +32,6 @@
margin: 0;
min-width: 40px;
order: 2;
- padding: 0.4em 0;
text-align: center;
vertical-align: middle;
@@ -87,6 +86,10 @@
}
}
+:where(.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input) {
+ padding: 0.4em 0;
+}
+
.theme-twentyseventeen {
.wc-block-components-quantity-selector
.wc-block-components-quantity-selector__button {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/edit/edit-template-part.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/edit/edit-template-part.tsx
index 49b060cca7a..d427ea69ee4 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/edit/edit-template-part.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/edit/edit-template-part.tsx
@@ -79,7 +79,9 @@ export const AddToCartWithOptionsEditTemplatePart = ( {
const templatePartId = addToCartWithOptionsTemplatePartIds?.[ productType ];
- const blockProps = useBlockProps();
+ const blockProps = useBlockProps( {
+ className: 'wc-block-add-to-cart-with-options',
+ } );
const { canEditTemplatePart, isLoading } = useSelect(
( select ) => {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/edit/index.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/edit/index.tsx
index f38f077d967..36956ef452b 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/edit/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/edit/index.tsx
@@ -25,7 +25,9 @@ const AddToCartOptionsEdit = (
props: BlockEditProps< Attributes > & { context?: { postId?: number } }
) => {
const { product } = useProduct( props.context?.postId );
- const blockProps = useBlockProps();
+ const blockProps = useBlockProps( {
+ className: 'wc-block-add-to-cart-with-options',
+ } );
const blockClientId = blockProps?.id;
const {
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 26dc00b6574..fbd179fce54 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
@@ -12,6 +12,5 @@
"interactivity": true
},
"$schema": "https://schemas.wp.org/trunk/block.json",
- "style": "file:../woocommerce/add-to-cart-with-options-quantity-selector-style.css",
"viewScriptModule": "woocommerce/add-to-cart-with-options-quantity-selector"
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/style.scss
deleted file mode 100644
index 5697d794bc7..00000000000
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/style.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "../../../base/components/quantity-selector/style";
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 fff24d30e5f..b0f184b3fb6 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
@@ -1,18 +1,10 @@
+@import "../../base/components/quantity-selector/style";
+
:where(.wc-block-add-to-cart-with-options) {
:where(.quantity) {
display: inline-flex;
align-items: stretch;
}
-
- /**
- * This is a base style for the input text element in WooCommerce that prevents inputs from appearing too small.
- *
- * @link https://github.com/woocommerce/woocommerce/blob/95ca53675f2817753d484583c96ca9ab9f725172/plugins/woocommerce/client/legacy/css/woocommerce-blocktheme.scss#L203-L206
- */
- :where(.quantity .input-text) {
- font-size: var(--wp--preset--font-size--small);
- padding: 0.9rem 1.1rem;
- }
}
:where(.wc-block-add-to-cart-with-options__quantity-selector--hidden) {
@@ -24,10 +16,6 @@
// templates), the quantity selector will stretch to the height of the container.
:where(.wc-block-add-to-cart-with-options__quantity-selector .wc-block-components-quantity-selector) {
height: 100%;
-
- :where(input[type="number"].qty) {
- padding: 0.7rem 0;
- }
}
:where(.wc-block-add-to-cart-with-options) {
@@ -60,7 +48,7 @@
margin: 0;
font-size: 0.8em;
box-sizing: content-box;
- padding: 0.9rem 0;
+ padding: 0.9em 0;
margin-right: unset;
max-width: 3.631em; /* This value is based on the WC core styles. */