Skip to content

Improve UX clarity between "Sync Now" and "Import all Products from Square" buttons #445

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
m-muhsin wants to merge 5 commits into
base: trunk
Choose a base branch
from
Draft

Improve UX clarity between "Sync Now" and "Import all Products from Square" buttons #445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4d603e1
Enhance product import and sync messaging in WooCommerce Square integ…
Dec 19, 2025
700b249
Revert to: Import Products From Square
Dec 21, 2025
541d4e4
Refactor product import and sync messaging in admin pages.
Dec 21, 2025
523da75
Refactor sync page messaging for clarity and remove outdated import n…
Dec 23, 2025
b00cc7d
Implement PR review feedback.
Dec 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions includes/Admin/Sync_Page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,16 +250,20 @@ private static function output_sync_status() {
id="wc-square-sync"
class="button button-large"
<?php echo ! empty( $disabled_reason ) ? sprintf( 'disabled="disabled" title="%s"', esc_attr( $disabled_reason ) ) : ''; ?>
><?php esc_html_e( 'Sync now', 'woocommerce-square' ); ?></span></button>
><?php esc_html_e( 'Sync now', 'woocommerce-square' ); ?></button>
<div id="wc-square-sync-progress-spinner" class="spinner" style="float:none; <?php echo $sync_in_progress ? 'visibility:visible;' : ''; ?>"></div>
<?php if ( wc_square()->get_settings_handler()->is_system_of_record_square() ) : ?>
<p class="description" style="margin-top: 8px; font-style: italic; color: #646970;">
<?php esc_html_e( 'Updates existing synced products only. Does not import new products from Square.', 'woocommerce-square' ); ?>
</p>
<?php endif; ?>
</td>
</tr>
</tbody>
</table>
<?php
}


/**
* Outputs tabular HTML with sync record logs and UI.
*
Expand Down Expand Up @@ -355,6 +359,12 @@ private static function output_sync_with_square_modal_template() {
</header>
<article>
<?php $square_settings = wc_square()->get_settings_handler(); ?>
<?php if ( $square_settings->is_system_of_record_square() ) : ?>
<p style="background: #fcf9e8; border-left: 4px solid #dba617; padding: 10px 12px; margin-bottom: 16px;">
<strong><?php esc_html_e( 'Note:', 'woocommerce-square' ); ?></strong>
<?php esc_html_e( 'This will only update products that are already synced with Square. New products in Square will not be imported. To import new products, use "Import all Products from Square" on the Settings tab.', 'woocommerce-square' ); ?>
</p>
<?php endif; ?>
<?php ob_start(); ?>
<ul>
<?php if ( $square_settings->is_system_of_record_square() ) : ?>
Expand Down
5 changes: 5 additions & 0 deletions includes/Settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,6 +424,11 @@ public function generate_import_products_html( $id, $field ) {
<a id="wc_square_import_products" href='#' class='button js-import-square-products <?php echo ( ! $this->get_location_id() ? 'disabled' : '' ); ?>'>
<?php echo esc_html__( 'Import all products from Square', 'woocommerce-square' ); ?>
</a>
<?php if ( $this->is_system_of_record_square() ) : ?>
<p class="description" style="margin-top: 8px;"><?php esc_html_e( 'Use this to bring new products from Square into WooCommerce. This is different from "Sync Now" which only updates products that are already synced.', 'woocommerce-square' ); ?></p>
<?php else : ?>
<p class="description" style="margin-top: 8px;"><?php esc_html_e( 'Use this to bring products from Square into WooCommerce.', 'woocommerce-square' ); ?></p>
<?php endif; ?>
<p class="description wc_square_save_changes_message" style="display: none;"><?php esc_html_e( 'You have made changes to the settings. Please save the changes to enable the button.', 'woocommerce-square' ); ?></p>
</td>
</tr>
Expand Down
16 changes: 15 additions & 1 deletion src/new-user-experience/modules/configure-sync/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,17 @@ export const ConfigureSync = ( {
) }
indent={ indent }
className="import-products-wrapper"
description={
system_of_record === 'square'
? __(
'Use this to bring new products from Square into WooCommerce. This is different from "Sync Now" which only updates products that are already synced.',
'woocommerce-square'
)
: __(
'Use this to bring products from Square into WooCommerce.',
'woocommerce-square'
)
}
>
<Button
data-testid="import-products-button"
Expand Down Expand Up @@ -406,7 +417,10 @@ export const ConfigureSync = ( {

{ isOpen && (
<Modal
title="Import Products From Square"
title={ __(
'Import Products From Square',
'woocommerce-square'
) }
size={ 'large' }
onRequestClose={ closeModal }
>
Expand Down
Loading