Commit 786e62d874b for woocommerce
commit 786e62d874b039ab17615d0e0931d8d0a7d2f91f
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Mon Oct 5 16:46:54 2026 +0200
Minor visual enhancements to the Export and Import product screens (#69258)
* Add changelog
* Minor visual enhancements to the Export and Import product screens
* Remove unnecessary blank line
* Linting
* Use 783px for the breakpoint
* Simplify margins
* Remove unnecessary line breaks
* Move export notice to be inside .woocommerce-exporter-wrapper
* Remove unnecessary class
* Revert "Remove unnecessary class"
This reverts commit f265dd30bf8ef39af5c5bd9b16f626ced09c13a5.
diff --git a/plugins/woocommerce/changelog/fix-product-import-export-layout b/plugins/woocommerce/changelog/fix-product-import-export-layout
new file mode 100644
index 00000000000..5246d60a62b
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-product-import-export-layout
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Minor visual enhancements to the Export and Import product screens
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 080912e7d41..b02a9a6818e 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -9440,9 +9440,11 @@ table.bar_chart {
.woocommerce-progress-form-wrapper,
.woocommerce-exporter-wrapper,
.woocommerce-importer-wrapper {
- text-align: center;
- max-width: 710px;
- margin: 40px auto;
+
+ @media screen and (min-width: 783px) {
+ max-width: 710px;
+ margin: 40px auto;
+ }
.error {
text-align: left;
@@ -9573,13 +9575,13 @@ table.bar_chart {
display: none;
}
- .woocommerce-importer-options th,
- .woocommerce-importer-options td,
- .woocommerce-exporter-options th,
- .woocommerce-exporter-options td {
- vertical-align: top;
+ .form-table.woocommerce-importer-options th,
+ .form-table.woocommerce-importer-options td,
+ .form-table.woocommerce-exporter-options th,
+ .form-table.woocommerce-exporter-options td {
+ vertical-align: middle;
line-height: 1.75em;
- padding: 0 0 24px 0;
+ padding: 0 0 24px;
label {
color: #555;
@@ -9628,10 +9630,13 @@ table.bar_chart {
}
}
- .woocommerce-exporter-options th,
- .woocommerce-importer-options th {
- width: 35%;
- padding-right: 20px;
+ @media screen and (min-width: 783px) {
+
+ .form-table.woocommerce-exporter-options th,
+ .form-table.woocommerce-importer-options th {
+ width: 35%;
+ padding-right: 24px;
+ }
}
progress {
diff --git a/plugins/woocommerce/includes/admin/importers/views/html-csv-import-header.php b/plugins/woocommerce/includes/admin/importers/views/html-csv-import-header.php
index 78c42e19433..ad2e8e317ed 100644
--- a/plugins/woocommerce/includes/admin/importers/views/html-csv-import-header.php
+++ b/plugins/woocommerce/includes/admin/importers/views/html-csv-import-header.php
@@ -10,6 +10,4 @@ if ( ! defined( 'ABSPATH' ) ) {
}
?>
<div class="wrap woocommerce">
- <h1><?php esc_html_e( 'Import Products', 'woocommerce' ); ?></h1>
-
<div class="woocommerce-progress-form-wrapper">
diff --git a/plugins/woocommerce/includes/admin/importers/views/html-product-csv-import-form.php b/plugins/woocommerce/includes/admin/importers/views/html-product-csv-import-form.php
index 43fce5e35b5..0120b014cbe 100644
--- a/plugins/woocommerce/includes/admin/importers/views/html-product-csv-import-form.php
+++ b/plugins/woocommerce/includes/admin/importers/views/html-product-csv-import-form.php
@@ -53,7 +53,7 @@ if ( ! defined( 'ABSPATH' ) ) {
</td>
</tr>
<tr>
- <th><label for="woocommerce-importer-update-existing"><?php esc_html_e( 'Update existing products', 'woocommerce' ); ?></label><br/></th>
+ <th><label for="woocommerce-importer-update-existing"><?php esc_html_e( 'Update existing products', 'woocommerce' ); ?></label></th>
<td>
<input type="hidden" name="update_existing" value="0" />
<input type="checkbox" id="woocommerce-importer-update-existing" name="update_existing" value="1" />
@@ -71,15 +71,15 @@ if ( ! defined( 'ABSPATH' ) ) {
</td>
</tr>
<tr class="woocommerce-importer-advanced hidden">
- <th><label><?php esc_html_e( 'CSV Delimiter', 'woocommerce' ); ?></label><br/></th>
+ <th><label><?php esc_html_e( 'CSV Delimiter', 'woocommerce' ); ?></label></th>
<td><input type="text" name="delimiter" placeholder="," size="2" /></td>
</tr>
<tr class="woocommerce-importer-advanced hidden">
- <th><label><?php esc_html_e( 'Use previous column mapping preferences?', 'woocommerce' ); ?></label><br/></th>
+ <th><label><?php esc_html_e( 'Use previous column mapping preferences?', 'woocommerce' ); ?></label></th>
<td><input type="checkbox" id="woocommerce-importer-map-preferences" name="map_preferences" value="1" /></td>
</tr>
<tr class="woocommerce-importer-advanced hidden">
- <th><label for="woocommerce-importer-character-encoding"><?php esc_html_e( 'Character encoding of the file', 'woocommerce' ); ?></label><br/></th>
+ <th><label for="woocommerce-importer-character-encoding"><?php esc_html_e( 'Character encoding of the file', 'woocommerce' ); ?></label></th>
<td>
<?php
if ( function_exists( 'mb_list_encodings' ) ) {
diff --git a/plugins/woocommerce/includes/admin/views/html-admin-page-product-export.php b/plugins/woocommerce/includes/admin/views/html-admin-page-product-export.php
index a93c376a3ca..2d7d357c363 100644
--- a/plugins/woocommerce/includes/admin/views/html-admin-page-product-export.php
+++ b/plugins/woocommerce/includes/admin/views/html-admin-page-product-export.php
@@ -25,32 +25,30 @@ if ( ! empty( $_GET['product_ids'] ) ) {
}
?>
<div class="wrap woocommerce">
- <h1><?php esc_html_e( 'Export Products', 'woocommerce' ); ?></h1>
-
- <?php
- if ( $is_exporting_product_ids ) {
- $clear_url = remove_query_arg( 'product_ids' );
- $count = count( $product_ids_to_export );
- $notice = sprintf(
- // translators: %1$d: Number of products, %2$s: URL to clear selection.
- _n(
- 'You are about to export %1$d product. To export all products, <a href="%2$s">clear your selection</a>.',
- 'You are about to export %1$d products. To export all products, <a href="%2$s">clear your selection</a>.',
+ <div class="woocommerce-exporter-wrapper">
+ <?php
+ if ( $is_exporting_product_ids ) {
+ $clear_url = remove_query_arg( 'product_ids' );
+ $count = count( $product_ids_to_export );
+ $notice = sprintf(
+ // translators: %1$d: Number of products, %2$s: URL to clear selection.
+ _n(
+ 'You are about to export %1$d product. To export all products, <a href="%2$s">clear your selection</a>.',
+ 'You are about to export %1$d products. To export all products, <a href="%2$s">clear your selection</a>.',
+ $count,
+ 'woocommerce'
+ ),
$count,
- 'woocommerce'
- ),
- $count,
- esc_url( $clear_url )
- );
+ esc_url( $clear_url )
+ );
+ ?>
+ <div id="selected-product-export-notice" class="notice notice-info inline">
+ <p><?php echo wp_kses_post( $notice ); ?></p>
+ </div>
+ <?php
+ }
?>
- <div id="selected-product-export-notice" class="notice notice-info inline">
- <p><?php echo wp_kses_post( $notice ); ?></p>
- </div>
- <?php
- }
- ?>
- <div class="woocommerce-exporter-wrapper">
<form class="woocommerce-exporter">
<?php
// Add hidden input if exporting product IDs, so JS can potentially pick it up.
diff --git a/plugins/woocommerce/tests/e2e/tests/product/product-export.spec.ts b/plugins/woocommerce/tests/e2e/tests/product/product-export.spec.ts
index bd535945ab4..fb6d6942b3c 100644
--- a/plugins/woocommerce/tests/e2e/tests/product/product-export.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/product/product-export.spec.ts
@@ -98,9 +98,13 @@ test.describe( 'Product > Export Selected Products', () => {
await test.step( 'Navigate to export page and verify UI elements for multiple products', async () => {
await exportButton.click();
- await expect( page.locator( '.wrap.woocommerce h1' ) ).toHaveText(
- 'Export Products'
- );
+ await expect(
+ page.getByRole( 'heading', {
+ name: 'Export Products',
+ level: 1,
+ exact: true,
+ } )
+ ).toHaveCount( 1 );
await expect(
page.locator( '#selected-product-export-notice p' )
).toContainText(