Merge pull request #18588 from woocommerce/fix/setup-wizard-copy-and-style-tweaks-for-wc-3-3

Setup wizard: various style and copy tweaks
This commit is contained in:
Mike Jolley 2018-01-25 12:59:52 +00:00 committed by GitHub
commit e2d553fb61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 28 deletions

View File

@ -326,7 +326,7 @@ body {
width:100%;
display: inline-flex;
li {
width: 20%;
width: 100%;
float: left;
padding: 0 0 0.8em;
margin: 0;
@ -508,7 +508,10 @@ body {
align-self: stretch;
display: flex;
align-items: baseline;
justify-content: center;
.wc-wizard-payment-gateway-form & {
justify-content: center;
}
img {
max-width: 75px;
@ -554,10 +557,6 @@ body {
margin-bottom: 0;
}
.wc-wizard-service-settings {
margin-top: 1em;
}
.wc-wizard-service-settings-description {
display: block;
font-style: italic;
@ -673,11 +672,15 @@ body {
.wc-wizard-service-name {
font-weight: normal;
text-align: left;
align-items: center;
max-height: 5em;
padding: 0;
}
// List header
.wc-wizard-service-item {
padding-left: 2em;
padding-top: 0.67em;
&:first-child {
border-bottom: 0;
@ -713,7 +716,10 @@ body {
display: flex;
flex-direction: column;
color: #a6a6a6;
}
.wc-wizard-service-item:not(:first-child) .wc-wizard-service-description {
font-size: 0.92em;
padding-bottom: 10px;
}
.shipping-method-setting {
@ -838,7 +844,7 @@ h3.jetpack-reasons {
font-size: 13px;
font-weight: 500;
margin-bottom: 0.5em;
margin-top: 1em;
margin-top: 0.85em;
display: inline-block;
}
@ -867,7 +873,7 @@ h3.jetpack-reasons {
}
.store-address-container {
margin-bottom: 24px; // match margin-bottom on top paragraph
margin-top: 4px;
.city-and-postcode {
display: flex;
@ -882,6 +888,16 @@ h3.jetpack-reasons {
}
}
}
.store-currency-container {
margin-top: 10px;
}
.product-type-container {
margin-top: 14px;
margin-bottom: 1px;
}
#woocommerce_sell_in_person {
margin-left: 0;
}
.wc-wizard-service-settings {
.payment-email-input {
@ -1032,11 +1048,12 @@ p.jetpack-terms {
.wc-wizard-service-setting-stripe_create_account, .wc-wizard-service-setting-ppec_paypal_reroute_requests {
display: flex;
align-items: flex-end;
align-items: flex-start;
margin-top: 0.75em;
.payment-checkbox-input {
order: 1;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
width: 1.5em;

View File

@ -74,7 +74,7 @@ jQuery( function( $ ) {
.removeClass( 'hide' )
.find( '.shipping-method-required-field' )
.prop( 'required', true );
} );
} ).find( '.wc-wizard-shipping-method-select .method' ).change();
$( '.wc-wizard-services' ).on( 'change', '.wc-wizard-shipping-method-enable', function() {
var checked = $( this ).is( ':checked' );

View File

@ -414,6 +414,7 @@ class WC_Admin_Setup_Wizard {
</div>
</div>
<div class="store-currency-container">
<label class="location-prompt" for="currency_code">
<?php esc_html_e( 'What currency do you use?', 'woocommerce' ); ?>
</label>
@ -426,19 +427,15 @@ class WC_Admin_Setup_Wizard {
>
<option value=""><?php esc_html_e( 'Choose a currency&hellip;', 'woocommerce' ); ?></option>
<?php foreach ( get_woocommerce_currencies() as $code => $name ) : ?>
<option value="<?php echo esc_attr( $code ); ?>" <?php selected( $currency, $code ); ?>>
<?php
// @codingStandardsIgnoreStart
printf( esc_html__( '%1$s (%2$s)', 'woocommerce' ), $name, get_woocommerce_currency_symbol( $code ) );
// // @codingStandardsIgnoreEnd
?>
</option>
<option value="<?php echo esc_attr( $code ); ?>" <?php selected( $currency, $code ); ?>><?php printf( esc_html__( '%1$s (%2$s)', 'woocommerce' ), $name, get_woocommerce_currency_symbol( $code ) ); ?></option>
<?php endforeach; ?>
</select>
<script type="text/javascript">
var wc_setup_currencies = <?php echo wp_json_encode( $currency_by_country ); ?>;
</script>
</div>
<div class="product-type-container">
<label class="location-prompt" for="product_type">
<?php esc_html_e( 'What type of product do you plan to sell?', 'woocommerce' ); ?>
</label>
@ -452,6 +449,7 @@ class WC_Admin_Setup_Wizard {
<option value="physical" <?php selected( $product_type, 'physical' ); ?>><?php esc_html_e( 'I plan to sell physical products', 'woocommerce' ); ?></option>
<option value="virtual" <?php selected( $product_type, 'virtual' ); ?>><?php esc_html_e( 'I plan to sell digital products', 'woocommerce' ); ?></option>
</select>
</div>
<input
type="checkbox"
@ -722,9 +720,7 @@ class WC_Admin_Setup_Wizard {
<div class="wc-wizard-shipping-method-dropdown">
<select id="<?php echo esc_attr( "{$input_prefix}[method]" ); ?>" name="<?php echo esc_attr( "{$input_prefix}[method]" ); ?>" class="method wc-enhanced-select">
<?php foreach ( $shipping_methods as $method_id => $method ) : ?>
<option value="<?php echo esc_attr( $method_id ); ?>" <?php selected( $selected, $method_id ); ?>>
<?php echo esc_html( $method['name'] ); ?>
</option>
<option value="<?php echo esc_attr( $method_id ); ?>" <?php selected( $selected, $method_id ); ?>><?php echo esc_html( $method['name'] ); ?></option>
<?php endforeach; ?>
</select>
</div>
@ -1108,7 +1104,7 @@ class WC_Admin_Setup_Wizard {
$paypal_ec_description = '<p>' . sprintf(
/* translators: %s: URL */
__( 'Safe and secure payments using credit cards or your customer\'s PayPal account. <a href="%s" target="_blank">Learn more</a>.', 'woocommerce' ),
'https://wordpress.org/plugins/woocommerce-gateway-paypal-express-checkout/'
'https://woocommerce.com/products/woocommerce-gateway-paypal-express-checkout/'
) . '</p>';
$klarna_checkout_description = '<p>' . sprintf(
/* translators: %s: URL */
@ -1426,7 +1422,7 @@ class WC_Admin_Setup_Wizard {
),
)
),
esc_url( admin_url( 'admin.php?page=wc-addons&view=payment_gateways' ) )
esc_url( admin_url( 'admin.php?page=wc-addons&section=payment-gateways' ) )
);
?>
</p>
@ -1663,13 +1659,13 @@ class WC_Admin_Setup_Wizard {
$description_base = __( 'Your store is almost ready! To activate services like %s, just connect with Jetpack.', 'woocommerce' );
if ( $payment_enabled && $taxes_enabled && $rates_enabled ) {
$description = sprintf( $description_base, __( 'payments, automated taxes, live rates and discounted shipping labels', 'woocommerce' ) );
$description = sprintf( $description_base, __( 'payment setup, automated taxes, live rates and discounted shipping labels', 'woocommerce' ) );
} else if ( $payment_enabled && $taxes_enabled ) {
$description = sprintf( $description_base, __( 'payments and automated taxes', 'woocommerce' ) );
$description = sprintf( $description_base, __( 'payment setup and automated taxes', 'woocommerce' ) );
} else if ( $payment_enabled && $rates_enabled ) {
$description = sprintf( $description_base, __( 'payments, live rates and discounted shipping labels', 'woocommerce' ) );
$description = sprintf( $description_base, __( 'payment setup, live rates and discounted shipping labels', 'woocommerce' ) );
} else if ( $payment_enabled ) {
$description = sprintf( $description_base, __( 'payments', 'woocommerce' ) );
$description = sprintf( $description_base, __( 'payment setup', 'woocommerce' ) );
} else if ( $taxes_enabled && $rates_enabled ) {
$description = sprintf( $description_base, __( 'automated taxes, live rates and discounted shipping labels', 'woocommerce' ) );
} else if ( $taxes_enabled ) {
@ -1691,7 +1687,7 @@ class WC_Admin_Setup_Wizard {
if ( isset( $_GET['activate_error'] ) ) {
$has_jetpack_error = true;
$title = __( "Sorry, We couldn't connect your store to Jetpack", 'woocommerce' );
$title = __( "Sorry, we couldn't connect your store to Jetpack", 'woocommerce' );
$error_message = $this->get_activate_error_message( sanitize_text_field( wp_unslash( $_GET['activate_error'] ) ) );
$description = $error_message;
@ -1735,7 +1731,14 @@ class WC_Admin_Setup_Wizard {
<input type="hidden" name="save_step" value="activate" />
<?php wp_nonce_field( 'wc-setup' ); ?>
</form>
<h3 class="jetpack-reasons"><?php esc_html_e( "Bonus reasons you'll love Jetpack", 'woocommerce' ); ?></h3>
<h3 class="jetpack-reasons">
<?php
echo esc_html( $description ?
__( "Bonus reasons you'll love Jetpack", 'woocommerce' ) :
__( "Reasons you'll love Jetpack", 'woocommerce' )
);
?>
</h3>
<ul class="wc-wizard-features">
<li class="wc-wizard-feature-item">
<p class="wc-wizard-feature-name">