magdev/wc-bootstrap
1
Fork 0
Code Issues Pull Requests Actions Releases 8 Activity

Polish My Account templates with Bootstrap 5 patterns

Browse Source 
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:
Marco Grätsch
2026-02-28 13:28:15 +01:00
parent b8001a5ab0
commit 7034134678
11 changed files with 471 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
templates/myaccount/form-reset-password.html.twig
View File

@@ -1,7 +1,8 @@
{#
# Reset Password Form (Bootstrap 5 Override)
#
# Form to set a new password after clicking the reset link.
# Form to set a new password after clicking the reset link,
# wrapped in a Bootstrap card for visual consistency.
#
# Expected context:
# args - Array with 'key' and 'login' values
@@ -14,55 +15,65 @@
{{ do_action('woocommerce_before_reset_password_form') }}
<form method="post" class="woocommerce-ResetPassword lost_reset_password">
<p class="mb-3">
{{ apply_filters('woocommerce_reset_password_message', __('Enter a new password below.')) }}
</p>
<div class="row g-3 mb-3">
<div class="col-sm-6">
<label for="password_1" class="form-label">
{{ __('New password') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
<span class="visually-hidden">{{ __('Required') }}</span>
</label>
<input type="password"
class="form-control"
name="password_1"
id="password_1"
autocomplete="new-password"
required
aria-required="true" />
</div>
<div class="col-sm-6">
<label for="password_2" class="form-label">
{{ __('Re-enter new password') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
<span class="visually-hidden">{{ __('Required') }}</span>
</label>
<input type="password"
class="form-control"
name="password_2"
id="password_2"
autocomplete="new-password"
required
aria-required="true" />
</div>
<div class="card shadow-sm">
<div class="card-header">
<h2 class="h5 mb-0">
<i class="bi bi-shield-lock me-1" aria-hidden="true"></i>
{{ __('Set new password') }}
</h2>
</div>
<div class="card-body">
<form method="post" class="woocommerce-ResetPassword lost_reset_password">
<input type="hidden" name="reset_key" value="{{ args.key|esc_attr }}" />
<input type="hidden" name="reset_login" value="{{ args.login|esc_attr }}" />
<p class="text-body-secondary mb-3">
{{ apply_filters('woocommerce_reset_password_message', __('Enter a new password below.')) }}
</p>
{{ do_action('woocommerce_resetpassword_form') }}
<div class="row g-3 mb-3">
<div class="col-sm-6">
<label for="password_1" class="form-label">
{{ __('New password') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
<span class="visually-hidden">{{ __('Required') }}</span>
</label>
<input type="password"
class="form-control"
name="password_1"
id="password_1"
autocomplete="new-password"
required
aria-required="true" />
</div>
<div class="col-sm-6">
<label for="password_2" class="form-label">
{{ __('Re-enter new password') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
<span class="visually-hidden">{{ __('Required') }}</span>
</label>
<input type="password"
class="form-control"
name="password_2"
id="password_2"
autocomplete="new-password"
required
aria-required="true" />
</div>
</div>
<div class="mt-3">
<input type="hidden" name="wc_reset_password" value="true" />
<button type="submit" class="btn btn-primary" value="{{ __('Save') }}">
{{ __('Save') }}
</button>
<input type="hidden" name="reset_key" value="{{ args.key|esc_attr }}" />
<input type="hidden" name="reset_login" value="{{ args.login|esc_attr }}" />
{{ do_action('woocommerce_resetpassword_form') }}
<div class="mt-3">
<input type="hidden" name="wc_reset_password" value="true" />
<button type="submit" class="btn btn-primary" value="{{ __('Save') }}">
{{ __('Save') }}
</button>
</div>
{{ wp_nonce_field('reset_password', 'woocommerce-reset-password-nonce') }}
</form>
</div>
{{ wp_nonce_field('reset_password', 'woocommerce-reset-password-nonce') }}
</form>
</div>
{{ do_action('woocommerce_after_reset_password_form') }}