Commit 7bd8cf404dd for woocommerce
commit 7bd8cf404dd81d808bf68e53dd564f85a988ac23
Author: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Mon Apr 6 14:38:07 2026 +0200
Fix further admin styling issues with WordPress 7.0 (#64001)
* Fix multiselect
* Don't try to align labels with inputs since they were never centred
* Don't try to align tips with inputs since they were never centred
* Add margin to multiselect values
* Add changelog
* Align selects width with other inputs
* Fix multiselect options not vertically aligned
---------
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
diff --git a/plugins/woocommerce/changelog/fix-wordpress-70-styling-issues b/plugins/woocommerce/changelog/fix-wordpress-70-styling-issues
new file mode 100644
index 00000000000..6c9c764d2f5
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-wordpress-70-styling-issues
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Admin styling adjustments with WordPress 7.0
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 708be047ac7..10cad0457cf 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -8316,10 +8316,13 @@ table.bar_chart {
.select2-selection--multiple {
min-height: 40px;
- height: 38px;
- .select2-selection__rendered li {
- margin-top: 0; // Prevent extra spacing inside multi-select.
+ .select2-selection__rendered {
+ display: block;
+
+ .select2-search--inline {
+ margin: 0;
+ }
}
}
@@ -8398,18 +8401,6 @@ table.bar_chart {
}
}
- // Product data panel labels: vertically center with taller WP 7.0 inputs.
- .woocommerce_options_panel p.form-field label,
- .woocommerce_options_panel fieldset.form-field label,
- .woocommerce_options_panel fieldset.form-field legend {
- padding-top: 8px;
- }
-
- // Help tips: vertically center with taller WP 7.0 inputs.
- .woocommerce_options_panel .form-field .woocommerce-help-tip {
- margin-top: 12px;
- }
-
// Search box select: match WP 7.0 compact search-box sizing (32px).
.search-box select {
min-height: 32px;
diff --git a/plugins/woocommerce/includes/admin/meta-boxes/views/html-product-data-linked-products.php b/plugins/woocommerce/includes/admin/meta-boxes/views/html-product-data-linked-products.php
index ff1e78af32f..412c9ee4c64 100644
--- a/plugins/woocommerce/includes/admin/meta-boxes/views/html-product-data-linked-products.php
+++ b/plugins/woocommerce/includes/admin/meta-boxes/views/html-product-data-linked-products.php
@@ -8,13 +8,24 @@
use Automattic\WooCommerce\Enums\ProductType;
defined( 'ABSPATH' ) || exit;
+
+// In WP 7.0, we made the inputs wider.
+// @see https://github.com/woocommerce/woocommerce/pull/63779/changes#diff-dfef13b204157e98982fb3af978fbabfaa7f6bedd31bf02f2c9070718d59642eR8402-R8408.
+$version = get_bloginfo( 'version' );
+
+if ( $version ) {
+ $version_parts = explode( '-', $version );
+ $version = count( $version_parts ) > 1 ? $version_parts[0] : $version;
+}
+
+$width = $version && version_compare( $version, '7.0', '>=' ) ? 'width: 55%;' : 'width: 50%;';
?>
<div id="linked_product_data" class="panel woocommerce_options_panel hidden">
<div class="options_group show_if_grouped">
<p class="form-field">
<label for="grouped_products"><?php esc_html_e( 'Grouped products', 'woocommerce' ); ?></label>
- <select class="wc-product-search" multiple="multiple" style="width: 50%;" id="grouped_products" name="grouped_products[]" data-sortable="true" data-placeholder="<?php esc_attr_e( 'Search for a product…', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products" data-exclude="<?php echo intval( $post->ID ); ?>">
+ <select class="wc-product-search" multiple="multiple" style="<?php echo esc_attr( $width ); ?>" id="grouped_products" name="grouped_products[]" data-sortable="true" data-placeholder="<?php esc_attr_e( 'Search for a product…', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products" data-exclude="<?php echo intval( $post->ID ); ?>">
<?php
$product_ids = $product_object->is_type( ProductType::GROUPED ) ? $product_object->get_children( 'edit' ) : array();
@@ -37,7 +48,7 @@ defined( 'ABSPATH' ) || exit;
<div class="options_group">
<p class="form-field">
<label for="upsell_ids"><?php esc_html_e( 'Upsells', 'woocommerce' ); ?></label>
- <select class="wc-product-search" multiple="multiple" style="width: 50%;" id="upsell_ids" name="upsell_ids[]" data-placeholder="<?php esc_attr_e( 'Search for a product…', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval( $post->ID ); ?>">
+ <select class="wc-product-search" multiple="multiple" style="<?php echo esc_attr( $width ); ?>" id="upsell_ids" name="upsell_ids[]" data-placeholder="<?php esc_attr_e( 'Search for a product…', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval( $post->ID ); ?>">
<?php
$product_ids = $product_object->get_upsell_ids( 'edit' );
@@ -58,7 +69,7 @@ defined( 'ABSPATH' ) || exit;
<p class="form-field hide_if_grouped hide_if_external">
<label for="crosssell_ids"><?php esc_html_e( 'Cross-sells', 'woocommerce' ); ?></label>
- <select class="wc-product-search" multiple="multiple" style="width: 50%;" id="crosssell_ids" name="crosssell_ids[]" data-placeholder="<?php esc_attr_e( 'Search for a product…', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval( $post->ID ); ?>">
+ <select class="wc-product-search" multiple="multiple" style="<?php echo esc_attr( $width ); ?>" id="crosssell_ids" name="crosssell_ids[]" data-placeholder="<?php esc_attr_e( 'Search for a product…', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval( $post->ID ); ?>">
<?php
$product_ids = $product_object->get_cross_sell_ids( 'edit' );