Commit 7097268ccde for woocommerce
commit 7097268ccde3afaf0267d4b7744331852ed59a53
Author: verofasulo <98944206+verofasulo@users.noreply.github.com>
Date: Tue May 19 13:38:54 2026 +0200
Switch boolean fields to checkboxes in the products app (#65000)
* Switch boolean fields to checkboxes and tighten their row height
The 'Featured product' and 'Track inventory' fields were rendered as
toggles, but they're binary markers rather than settings being
switched on/off — a checkbox communicates the affordance better.
This change:
- Swaps the Edit control for 'featured' and 'manage_stock' from
'toggle' to 'checkbox'.
- Moves 'manage_stock' (Track inventory) above 'stock' (Stock status)
in the simple, variation, and variable product edit forms so the
toggle that gates inventory tracking precedes the stock fields it
affects.
- Adds a 16px min-height for regular-layout field rows that contain
a checkbox so they aren't padded to 40px like input-bearing rows.
- Updates form-order assertions in utils.test.ts to match.
* fix checkbox order
* remove custom css
---------
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
diff --git a/packages/js/experimental-products-app/changelog/update-featured-product-checkbox b/packages/js/experimental-products-app/changelog/update-featured-product-checkbox
new file mode 100644
index 00000000000..10d180f4aca
--- /dev/null
+++ b/packages/js/experimental-products-app/changelog/update-featured-product-checkbox
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Render the "Featured product" and "Track inventory" controls as checkboxes, move "Track inventory" above "Stock status", and tighten the row height for checkbox-only fields
diff --git a/packages/js/experimental-products-app/src/fields/featured/field.tsx b/packages/js/experimental-products-app/src/fields/featured/field.tsx
index a73232e8d79..9ca09844fb6 100644
--- a/packages/js/experimental-products-app/src/fields/featured/field.tsx
+++ b/packages/js/experimental-products-app/src/fields/featured/field.tsx
@@ -21,7 +21,7 @@ const fieldDefinition = {
export const fieldExtensions: Partial< Field< ProductEntityRecord > > = {
...fieldDefinition,
type: 'boolean',
- Edit: 'toggle',
+ Edit: 'checkbox',
getValue: ( { item } ) => !! item.featured,
setValue: ( { value } ) => ( {
featured: !! value,
diff --git a/packages/js/experimental-products-app/src/fields/manage_stock/field.tsx b/packages/js/experimental-products-app/src/fields/manage_stock/field.tsx
index a4c82e4b217..7957550a2e3 100644
--- a/packages/js/experimental-products-app/src/fields/manage_stock/field.tsx
+++ b/packages/js/experimental-products-app/src/fields/manage_stock/field.tsx
@@ -21,5 +21,5 @@ const fieldDefinition = {
export const fieldExtensions: Partial< Field< ProductEntityRecord > > = {
...fieldDefinition,
type: 'boolean',
- Edit: 'toggle',
+ Edit: 'checkbox',
};
diff --git a/packages/js/experimental-products-app/src/product-edit/utils.test.ts b/packages/js/experimental-products-app/src/product-edit/utils.test.ts
index 51acec43d61..0c7d44fd5c0 100644
--- a/packages/js/experimental-products-app/src/product-edit/utils.test.ts
+++ b/packages/js/experimental-products-app/src/product-edit/utils.test.ts
@@ -346,7 +346,7 @@ describe( 'product edit utils', () => {
];
const basePriceFieldIds = [ 'regular_price', 'sale_price' ];
const managedStockFieldIds = [ 'manage_stock', 'stock_quantity' ];
- const stockStatusFieldIds = [ 'stock', 'manage_stock' ];
+ const stockStatusFieldIds = [ 'manage_stock', 'stock' ];
const shippingFieldIds = [
'weight',
'length',
@@ -388,8 +388,8 @@ describe( 'product edit utils', () => {
'cost_of_goods_sold',
'images',
'sku',
- 'stock',
'manage_stock',
+ 'stock',
'categories',
'brands',
'tags',
@@ -1377,7 +1377,7 @@ describe( 'product edit utils', () => {
{
id: 'inventory-fields',
label: 'Inventory',
- children: [ 'sku', 'stock', 'manage_stock' ],
+ children: [ 'sku', 'manage_stock', 'stock' ],
},
{
id: 'product-organization-fields',
diff --git a/packages/js/experimental-products-app/src/product-edit/utils.ts b/packages/js/experimental-products-app/src/product-edit/utils.ts
index ca64cfc5246..ca4bda3921d 100644
--- a/packages/js/experimental-products-app/src/product-edit/utils.ts
+++ b/packages/js/experimental-products-app/src/product-edit/utils.ts
@@ -133,7 +133,7 @@ const SIMPLE_PRODUCT_EDIT_FORM_FIELDS = [
createProductEditFormGroup(
'inventory-fields',
__( 'Inventory', 'woocommerce' ),
- [ 'sku', 'stock', 'manage_stock', 'stock_quantity' ]
+ [ 'sku', 'manage_stock', 'stock', 'stock_quantity' ]
),
createProductEditFormGroup(
'product-organization-fields',