You've already forked wc-bootstrap
Polish My Account templates with Bootstrap 5 patterns
Redesign navigation with endpoint icons, offcanvas-lg responsive pattern, and sticky sidebar. Replace flat dashboard with card-based welcome greeting (avatar) and quick-action grid. Wrap all forms (edit-account, edit-address, lost/reset-password) in card sections with icon headers. Restructure view-order with summary card and status badge component. Override WooCommerce's float-based layout and max-width constraint to let Bootstrap flex grid handle sizing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
{#
|
||||
# Edit Account Form (Bootstrap 5 Override)
|
||||
#
|
||||
# Account details editing form with Bootstrap form styling.
|
||||
# Account details editing form with card-based sections
|
||||
# for personal information and password change.
|
||||
#
|
||||
# Expected context:
|
||||
# user - WP_User object
|
||||
@@ -18,109 +19,125 @@
|
||||
|
||||
{{ do_action('woocommerce_edit_account_form_start') }}
|
||||
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-sm-6">
|
||||
<label for="account_first_name" class="form-label">
|
||||
{{ __('First name') }} <span class="text-danger" aria-hidden="true">*</span>
|
||||
<span class="visually-hidden">{{ __('Required') }}</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
name="account_first_name"
|
||||
id="account_first_name"
|
||||
autocomplete="given-name"
|
||||
value="{{ user.first_name|esc_attr }}"
|
||||
required
|
||||
aria-required="true" />
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header">
|
||||
<h2 class="h5 mb-0">
|
||||
<i class="bi bi-person me-1" aria-hidden="true"></i>
|
||||
{{ __('Personal information') }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label for="account_last_name" class="form-label">
|
||||
{{ __('Last name') }} <span class="text-danger" aria-hidden="true">*</span>
|
||||
<span class="visually-hidden">{{ __('Required') }}</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
name="account_last_name"
|
||||
id="account_last_name"
|
||||
autocomplete="family-name"
|
||||
value="{{ user.last_name|esc_attr }}"
|
||||
required
|
||||
aria-required="true" />
|
||||
<div class="card-body">
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-sm-6">
|
||||
<label for="account_first_name" class="form-label">
|
||||
{{ __('First name') }} <span class="text-danger" aria-hidden="true">*</span>
|
||||
<span class="visually-hidden">{{ __('Required') }}</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
name="account_first_name"
|
||||
id="account_first_name"
|
||||
autocomplete="given-name"
|
||||
value="{{ user.first_name|esc_attr }}"
|
||||
required
|
||||
aria-required="true" />
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label for="account_last_name" class="form-label">
|
||||
{{ __('Last name') }} <span class="text-danger" aria-hidden="true">*</span>
|
||||
<span class="visually-hidden">{{ __('Required') }}</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
name="account_last_name"
|
||||
id="account_last_name"
|
||||
autocomplete="family-name"
|
||||
value="{{ user.last_name|esc_attr }}"
|
||||
required
|
||||
aria-required="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="account_display_name" class="form-label">
|
||||
{{ __('Display name') }} <span class="text-danger" aria-hidden="true">*</span>
|
||||
<span class="visually-hidden">{{ __('Required') }}</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
name="account_display_name"
|
||||
id="account_display_name"
|
||||
aria-describedby="account_display_name_description"
|
||||
value="{{ user.display_name|esc_attr }}"
|
||||
required
|
||||
aria-required="true" />
|
||||
<div id="account_display_name_description" class="form-text">
|
||||
{{ __('This will be how your name will be displayed in the account section and in reviews') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-0">
|
||||
<label for="account_email" class="form-label">
|
||||
{{ __('Email address') }} <span class="text-danger" aria-hidden="true">*</span>
|
||||
<span class="visually-hidden">{{ __('Required') }}</span>
|
||||
</label>
|
||||
<input type="email"
|
||||
class="form-control"
|
||||
name="account_email"
|
||||
id="account_email"
|
||||
autocomplete="email"
|
||||
value="{{ user.user_email|esc_attr }}"
|
||||
required
|
||||
aria-required="true" />
|
||||
</div>
|
||||
|
||||
{{ do_action('woocommerce_edit_account_form_fields') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="account_display_name" class="form-label">
|
||||
{{ __('Display name') }} <span class="text-danger" aria-hidden="true">*</span>
|
||||
<span class="visually-hidden">{{ __('Required') }}</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
name="account_display_name"
|
||||
id="account_display_name"
|
||||
aria-describedby="account_display_name_description"
|
||||
value="{{ user.display_name|esc_attr }}"
|
||||
required
|
||||
aria-required="true" />
|
||||
<div id="account_display_name_description" class="form-text">
|
||||
{{ __('This will be how your name will be displayed in the account section and in reviews') }}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header">
|
||||
<h2 class="h5 mb-0">
|
||||
<i class="bi bi-shield-lock me-1" aria-hidden="true"></i>
|
||||
{{ __('Password change') }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="password_current" class="form-label">
|
||||
{{ __('Current password (leave blank to leave unchanged)') }}
|
||||
</label>
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
name="password_current"
|
||||
id="password_current"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password_1" class="form-label">
|
||||
{{ __('New password (leave blank to leave unchanged)') }}
|
||||
</label>
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
name="password_1"
|
||||
id="password_1"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<div class="mb-0">
|
||||
<label for="password_2" class="form-label">
|
||||
{{ __('Confirm new password') }}
|
||||
</label>
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
name="password_2"
|
||||
id="password_2"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="account_email" class="form-label">
|
||||
{{ __('Email address') }} <span class="text-danger" aria-hidden="true">*</span>
|
||||
<span class="visually-hidden">{{ __('Required') }}</span>
|
||||
</label>
|
||||
<input type="email"
|
||||
class="form-control"
|
||||
name="account_email"
|
||||
id="account_email"
|
||||
autocomplete="email"
|
||||
value="{{ user.user_email|esc_attr }}"
|
||||
required
|
||||
aria-required="true" />
|
||||
</div>
|
||||
|
||||
{{ do_action('woocommerce_edit_account_form_fields') }}
|
||||
|
||||
<fieldset class="mb-3">
|
||||
<legend class="h5 border-bottom pb-2 mb-3">{{ __('Password change') }}</legend>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password_current" class="form-label">
|
||||
{{ __('Current password (leave blank to leave unchanged)') }}
|
||||
</label>
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
name="password_current"
|
||||
id="password_current"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password_1" class="form-label">
|
||||
{{ __('New password (leave blank to leave unchanged)') }}
|
||||
</label>
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
name="password_1"
|
||||
id="password_1"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password_2" class="form-label">
|
||||
{{ __('Confirm new password') }}
|
||||
</label>
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
name="password_2"
|
||||
id="password_2"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{{ do_action('woocommerce_edit_account_form') }}
|
||||
|
||||
<div class="mt-3">
|
||||
|
||||
Reference in New Issue
Block a user