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

32
CLAUDE.md
View File

@@ -299,7 +299,11 @@ The child theme inherits from `wp-bootstrap` via WordPress `Template: wp-bootstr
## Architecture Decisions ## Architecture Decisions
- **Edit forms** use 3+9 column layout: `col-lg-3` sticky sidebar (progress indicator, section nav) + `col-lg-9` card-based sections. - **My Account layout** uses `col-lg-auto` (nav) + `col-lg` (content) so the nav auto-sizes to its content and the main area fills remaining space. Requires CSS resets for WooCommerce's float-based layout (`float: none; width: auto/100%`) and `max-width: none` on `.woocommerce-account main .woocommerce` to override the plugin's `max-width: 1000px`.
- **My Account navigation** uses `offcanvas-lg offcanvas-start` responsive pattern: full sidebar with icons on desktop (sticky via `position-sticky`), offcanvas slide-in on mobile with toggle button. Icons are mapped per endpoint via a Twig hash.
- **My Account dashboard** uses card-based quick actions (`row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3`) with `bg-primary-subtle` icon containers that adapt to dark mode. Each action card is an `<a class="card">` for full-card clickability.
- **My Account forms** (edit-account, edit-address, lost-password, reset-password) are wrapped in `card shadow-sm` sections with icon headers for visual consistency.
- **Edit forms** use card-based section grouping (e.g., "Personal information" + "Password change" as separate cards) instead of `<fieldset>/<legend>`.
- **Detail pages** use 8+4 column layout with sticky sidebar. - **Detail pages** use 8+4 column layout with sticky sidebar.
- **Cards** use `<article class="card h-100">` with `stretched-link`. - **Cards** use `<article class="card h-100">` with `stretched-link`.
- **Form layout** uses centered `col-lg-8 col-xl-7` with card + shadow for auth forms. - **Form layout** uses centered `col-lg-8 col-xl-7` with card + shadow for auth forms.
@@ -313,4 +317,28 @@ Current version: **v0.0.1**
## Session History ## Session History
<!-- AI assistants: document key learnings and session outcomes here --> ### 2026-02-28 — My Account Bootstrap 5 Polish
**Scope:** Redesigned 8 my-account Twig templates + CSS overrides to feel like a polished Bootstrap 5 application.
**Files changed (10):**
- `templates/myaccount/navigation.html.twig` — Added endpoint icon map, `offcanvas-lg` responsive pattern, sticky sidebar
- `templates/myaccount/dashboard.html.twig` — Replaced plain `<p>` tags with welcome card (avatar + greeting) and 5 quick-action cards in responsive grid
- `templates/myaccount/view-order.html.twig` — Replaced `<mark>` tags with summary card using `list-group-flush` and `components/status-badge.html.twig`; notes wrapped in card
- `templates/myaccount/form-edit-account.html.twig` — Wrapped in two card sections (Personal info + Password change) with icons
- `templates/myaccount/form-edit-address.html.twig` — Wrapped in card with dynamic icon (`bi-receipt` billing / `bi-truck` shipping)
- `templates/myaccount/form-lost-password.html.twig` — Wrapped in card with `bi-key` icon
- `templates/myaccount/form-reset-password.html.twig` — Wrapped in card with `bi-shield-lock` icon
- `templates/myaccount/lost-password-confirmation.html.twig` — Added `text-body-secondary` styling and "Back to login" button
- `templates/myaccount/my-account.html.twig` — Changed grid from `col-lg-3`/`col-lg-9` to `col-lg-auto`/`col-lg`
- `assets/css/wc-bootstrap.css` — Reset WooCommerce float layout, override `max-width: 1000px`, avatar rounding, card hover lift
**Design decisions:**
- **Nav column auto-sizing (`col-lg-auto`)**: Fixed-width columns (e.g., `col-lg-3` = 285px) caused label overflow with icons. Auto-sizing lets the nav take exactly the space it needs across locales while the content fills the rest.
- **WooCommerce layout overrides require matching specificity**: The plugin uses `.woocommerce-account .woocommerce-MyAccount-navigation` (specificity `0,2,0`) — single-class selectors don't override. Also `.woocommerce-account main .woocommerce` sets `max-width: 1000px` (specificity `0,2,1`) which must be reset to `none`.
- **`offcanvas-lg` over `d-none d-lg-block`**: Bootstrap's responsive offcanvas natively handles the desktop/mobile switch without duplicating nav markup. The toggle button uses `d-lg-none` visibility.
- **`bg-primary-subtle` for icon containers**: These Bootstrap 5.3 contextual utilities automatically adapt to dark mode, unlike hardcoded colors.
- **Welcome message restructured**: Separated greeting from logout link instead of using WooCommerce's default inline-linked `__()` string. This gives full control over card layout and avoids translated strings containing HTML structure assumptions.
- **Templates NOT changed** (already well-done): `orders.html.twig`, `my-address.html.twig`, `form-login.html.twig`, `payment-methods.html.twig`, `form-add-payment-method.html.twig`, `downloads.html.twig`

39
assets/css/wc-bootstrap.css
View File

@@ -280,16 +280,47 @@ header.sticky-top.is-stuck {
/* ========================================================================== /* ==========================================================================
My Account My Account
Navigation and layout for the My Account area. Navigation and layout for the My Account area.
Reset WooCommerce's float-based layout to let Bootstrap flex grid handle it.
========================================================================== */ ========================================================================== */
.woocommerce-account main .woocommerce,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout main .woocommerce {
max-width: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
float: none;
width: auto;
}
.woocommerce-account .woocommerce-MyAccount-content {
float: none;
width: 100%;
}
.woocommerce-MyAccount-navigation .list-group-item {
white-space: nowrap;
}
.woocommerce-MyAccount-navigation .list-group-item.active { .woocommerce-MyAccount-navigation .list-group-item.active {
font-weight: 600; font-weight: 600;
} }
/* Order status marks */ /* Dashboard: avatar rounding */
.woocommerce-order-details mark { .woocommerce-MyAccount-content .avatar {
background: none; border-radius: 50%;
font-weight: 600; }
/* Dashboard: quick action card hover lift */
.woocommerce-MyAccount-content a.card {
transition: transform 0.15s ease, box-shadow 0.15s ease;
color: inherit;
}
.woocommerce-MyAccount-content a.card:hover {
transform: translateY(-2px);
box-shadow: var(--bs-box-shadow) !important;
} }
/* View-order notes */ /* View-order notes */

71
templates/myaccount/dashboard.html.twig
View File

@@ -1,7 +1,8 @@
{# {#
# My Account Dashboard (Bootstrap 5 Override) # My Account Dashboard (Bootstrap 5 Override)
# #
# Shows the welcome screen on the account dashboard. # Shows a card-based dashboard with welcome greeting and
# quick action links to each account section.
# #
# Expected context: # Expected context:
# current_user - WP_User object # current_user - WP_User object
@@ -12,28 +13,54 @@
# @since 0.1.0 # @since 0.1.0
#} #}
<p> {% set quick_actions = [
{{ __('Hello %1$s (not %1$s? <a href="%2$s">Log out</a>)')|format( { endpoint: 'orders', icon: 'bi-bag', label: __('Orders'), desc: __('View and track your orders') },
'<strong>' ~ current_user.display_name|esc_html ~ '</strong>', { endpoint: 'edit-address', icon: 'bi-geo-alt', label: __('Addresses'), desc: __('Manage billing & shipping') },
wc_logout_url()|esc_url { endpoint: 'edit-account', icon: 'bi-person-gear', label: __('Account details'), desc: __('Update name, email & password') },
)|wp_kses_post }} { endpoint: 'downloads', icon: 'bi-download', label: __('Downloads'), desc: __('Access purchased files') },
</p> { endpoint: 'payment-methods', icon: 'bi-credit-card', label: __('Payment methods'), desc: __('Manage saved cards') },
] %}
<p> <div class="card shadow-sm mb-4">
{% if wc_shipping_enabled() %} <div class="card-body d-flex align-items-center gap-3">
{{ __('From your account dashboard you can view your <a href="%1$s">recent orders</a>, manage your <a href="%2$s">shipping and billing addresses</a>, and <a href="%3$s">edit your password and account details</a>.')|format( <div class="flex-shrink-0">
wc_get_endpoint_url('orders')|esc_url, {{ get_avatar(current_user.ID, 64)|raw }}
wc_get_endpoint_url('edit-address')|esc_url, </div>
wc_get_endpoint_url('edit-account')|esc_url <div class="flex-grow-1">
)|wp_kses_post }} <h2 class="h5 mb-1">
{% else %} {{ __('Hello, %s!')|format(current_user.display_name|esc_html) }}
{{ __('From your account dashboard you can view your <a href="%1$s">recent orders</a>, manage your <a href="%2$s">billing address</a>, and <a href="%3$s">edit your password and account details</a>.')|format( </h2>
wc_get_endpoint_url('orders')|esc_url, <p class="text-body-secondary mb-0">
wc_get_endpoint_url('edit-address')|esc_url, {{ __('Not %s?')|format(current_user.display_name|esc_html) }}
wc_get_endpoint_url('edit-account')|esc_url <a href="{{ wc_logout_url()|esc_url }}">{{ __('Log out') }}</a>
)|wp_kses_post }} </p>
{% endif %} </div>
</p> </div>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4">
{% for action in quick_actions %}
<div class="col">
<a href="{{ wc_get_endpoint_url(action.endpoint)|esc_url }}"
class="card h-100 text-decoration-none shadow-sm">
<div class="card-body d-flex align-items-start gap-3">
<div class="flex-shrink-0">
<span class="d-inline-flex align-items-center justify-content-center
bg-primary-subtle text-primary rounded-3"
style="width: 3rem; height: 3rem;"
aria-hidden="true">
<i class="bi {{ action.icon }} fs-4"></i>
</span>
</div>
<div>
<h3 class="h6 mb-1 text-body">{{ action.label }}</h3>
<p class="text-body-secondary small mb-0">{{ action.desc }}</p>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
{{ do_action('woocommerce_account_dashboard') }} {{ do_action('woocommerce_account_dashboard') }}
{{ do_action('woocommerce_before_my_account') }} {{ do_action('woocommerce_before_my_account') }}

211
templates/myaccount/form-edit-account.html.twig
View File

@@ -1,7 +1,8 @@
{# {#
# Edit Account Form (Bootstrap 5 Override) # 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: # Expected context:
# user - WP_User object # user - WP_User object
@@ -18,109 +19,125 @@
{{ do_action('woocommerce_edit_account_form_start') }} {{ do_action('woocommerce_edit_account_form_start') }}
<div class="row g-3 mb-3"> <div class="card shadow-sm mb-4">
<div class="col-sm-6"> <div class="card-header">
<label for="account_first_name" class="form-label"> <h2 class="h5 mb-0">
{{ __('First name') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span> <i class="bi bi-person me-1" aria-hidden="true"></i>
<span class="visually-hidden">{{ __('Required') }}</span> {{ __('Personal information') }}
</label> </h2>
<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>
<div class="col-sm-6"> <div class="card-body">
<label for="account_last_name" class="form-label"> <div class="row g-3 mb-3">
{{ __('Last name') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span> <div class="col-sm-6">
<span class="visually-hidden">{{ __('Required') }}</span> <label for="account_first_name" class="form-label">
</label> {{ __('First name') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
<input type="text" <span class="visually-hidden">{{ __('Required') }}</span>
class="form-control" </label>
name="account_last_name" <input type="text"
id="account_last_name" class="form-control"
autocomplete="family-name" name="account_first_name"
value="{{ user.last_name|esc_attr }}" id="account_first_name"
required autocomplete="given-name"
aria-required="true" /> 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') }}&nbsp;<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') }}&nbsp;<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') }}&nbsp;<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> </div>
<div class="mb-3"> <div class="card shadow-sm mb-4">
<label for="account_display_name" class="form-label"> <div class="card-header">
{{ __('Display name') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span> <h2 class="h5 mb-0">
<span class="visually-hidden">{{ __('Required') }}</span> <i class="bi bi-shield-lock me-1" aria-hidden="true"></i>
</label> {{ __('Password change') }}
<input type="text" </h2>
class="form-control" </div>
name="account_display_name" <div class="card-body">
id="account_display_name" <div class="mb-3">
aria-describedby="account_display_name_description" <label for="password_current" class="form-label">
value="{{ user.display_name|esc_attr }}" {{ __('Current password (leave blank to leave unchanged)') }}
required </label>
aria-required="true" /> <input type="password"
<div id="account_display_name_description" class="form-text"> class="form-control"
{{ __('This will be how your name will be displayed in the account section and in reviews') }} 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> </div>
<div class="mb-3">
<label for="account_email" class="form-label">
{{ __('Email address') }}&nbsp;<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') }} {{ do_action('woocommerce_edit_account_form') }}
<div class="mt-3"> <div class="mt-3">

58
templates/myaccount/form-edit-address.html.twig
View File

@@ -1,7 +1,8 @@
{# {#
# Edit Address Form (Bootstrap 5 Override) # Edit Address Form (Bootstrap 5 Override)
# #
# Address editing form with Bootstrap form styling. # Address editing form wrapped in a Bootstrap card with
# contextual icon for billing/shipping.
# #
# Expected context: # Expected context:
# load_address - Address type ('billing' or 'shipping'), or empty # load_address - Address type ('billing' or 'shipping'), or empty
@@ -14,36 +15,45 @@
#} #}
{% set page_title = load_address == 'billing' ? __('Billing address') : __('Shipping address') %} {% set page_title = load_address == 'billing' ? __('Billing address') : __('Shipping address') %}
{% set address_icon = load_address == 'billing' ? 'bi-receipt' : 'bi-truck' %}
{{ do_action('woocommerce_before_edit_account_address_form') }} {{ do_action('woocommerce_before_edit_account_address_form') }}
{% if not load_address %} {% if not load_address %}
{% include 'myaccount/my-address.html.twig' %} {% include 'myaccount/my-address.html.twig' %}
{% else %} {% else %}
<form method="post" novalidate> <div class="card shadow-sm">
<h2 class="h4 mb-4">{{ apply_filters('woocommerce_my_account_edit_address_title', page_title, load_address) }}</h2> <div class="card-header">
<h2 class="h5 mb-0">
<div class="woocommerce-address-fields"> <i class="bi {{ address_icon }} me-1" aria-hidden="true"></i>
{{ do_action('woocommerce_before_edit_address_form_' ~ load_address) }} {{ apply_filters('woocommerce_my_account_edit_address_title', page_title, load_address) }}
</h2>
<div class="woocommerce-address-fields__field-wrapper">
{% for key, field in address %}
{{ woocommerce_form_field(key, field, wc_get_post_data_by_key(key, field.value)) }}
{% endfor %}
</div>
{{ do_action('woocommerce_after_edit_address_form_' ~ load_address) }}
<div class="mt-3">
<button type="submit" class="btn btn-primary" name="save_address" value="{{ __('Save address') }}">
<i class="bi bi-check-lg me-1" aria-hidden="true"></i>
{{ __('Save address') }}
</button>
{{ wp_nonce_field('woocommerce-edit_address', 'woocommerce-edit-address-nonce') }}
<input type="hidden" name="action" value="edit_address" />
</div>
</div> </div>
</form> <div class="card-body">
<form method="post" novalidate>
<div class="woocommerce-address-fields">
{{ do_action('woocommerce_before_edit_address_form_' ~ load_address) }}
<div class="woocommerce-address-fields__field-wrapper">
{% for key, field in address %}
{{ woocommerce_form_field(key, field, wc_get_post_data_by_key(key, field.value)) }}
{% endfor %}
</div>
{{ do_action('woocommerce_after_edit_address_form_' ~ load_address) }}
<div class="mt-3">
<button type="submit" class="btn btn-primary" name="save_address" value="{{ __('Save address') }}">
<i class="bi bi-check-lg me-1" aria-hidden="true"></i>
{{ __('Save address') }}
</button>
{{ wp_nonce_field('woocommerce-edit_address', 'woocommerce-edit-address-nonce') }}
<input type="hidden" name="action" value="edit_address" />
</div>
</div>
</form>
</div>
</div>
{% endif %} {% endif %}
{{ do_action('woocommerce_after_edit_account_address_form') }} {{ do_action('woocommerce_after_edit_account_address_form') }}

69
templates/myaccount/form-lost-password.html.twig
View File

@@ -1,7 +1,8 @@
{# {#
# Lost Password Form (Bootstrap 5 Override) # Lost Password Form (Bootstrap 5 Override)
# #
# Form to request a password reset email. # Form to request a password reset email, wrapped in a
# Bootstrap card for visual consistency.
# #
# WooCommerce PHP equivalent: myaccount/form-lost-password.php # WooCommerce PHP equivalent: myaccount/form-lost-password.php
# #
@@ -11,37 +12,47 @@
{{ do_action('woocommerce_before_lost_password_form') }} {{ do_action('woocommerce_before_lost_password_form') }}
<form method="post" class="woocommerce-ResetPassword lost_reset_password"> <div class="card shadow-sm">
<div class="card-header">
<p class="mb-3"> <h2 class="h5 mb-0">
{{ apply_filters('woocommerce_lost_password_message', __('Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.')) }} <i class="bi bi-key me-1" aria-hidden="true"></i>
</p> {{ __('Lost your password?') }}
</h2>
<div class="mb-3">
<label for="user_login" class="form-label">
{{ __('Username or email') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
<span class="visually-hidden">{{ __('Required') }}</span>
</label>
<input type="text"
class="form-control"
name="user_login"
id="user_login"
autocomplete="username"
required
aria-required="true" />
</div> </div>
<div class="card-body">
<form method="post" class="woocommerce-ResetPassword lost_reset_password">
{{ do_action('woocommerce_lostpassword_form') }} <p class="text-body-secondary mb-3">
{{ apply_filters('woocommerce_lost_password_message', __('Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.')) }}
</p>
<div class="mt-3"> <div class="mb-3">
<input type="hidden" name="wc_reset_password" value="true" /> <label for="user_login" class="form-label">
<button type="submit" class="btn btn-primary" value="{{ __('Reset password') }}"> {{ __('Username or email') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
{{ __('Reset password') }} <span class="visually-hidden">{{ __('Required') }}</span>
</button> </label>
<input type="text"
class="form-control"
name="user_login"
id="user_login"
autocomplete="username"
required
aria-required="true" />
</div>
{{ do_action('woocommerce_lostpassword_form') }}
<div class="mt-3">
<input type="hidden" name="wc_reset_password" value="true" />
<button type="submit" class="btn btn-primary" value="{{ __('Reset password') }}">
{{ __('Reset password') }}
</button>
</div>
{{ wp_nonce_field('lost_password', 'woocommerce-lost-password-nonce') }}
</form>
</div> </div>
</div>
{{ wp_nonce_field('lost_password', 'woocommerce-lost-password-nonce') }}
</form>
{{ do_action('woocommerce_after_lost_password_form') }} {{ do_action('woocommerce_after_lost_password_form') }}

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

@@ -1,7 +1,8 @@
{# {#
# Reset Password Form (Bootstrap 5 Override) # 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: # Expected context:
# args - Array with 'key' and 'login' values # args - Array with 'key' and 'login' values
@@ -14,55 +15,65 @@
{{ do_action('woocommerce_before_reset_password_form') }} {{ do_action('woocommerce_before_reset_password_form') }}
<form method="post" class="woocommerce-ResetPassword lost_reset_password"> <div class="card shadow-sm">
<div class="card-header">
<p class="mb-3"> <h2 class="h5 mb-0">
{{ apply_filters('woocommerce_reset_password_message', __('Enter a new password below.')) }} <i class="bi bi-shield-lock me-1" aria-hidden="true"></i>
</p> {{ __('Set new password') }}
</h2>
<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>
<div class="card-body">
<form method="post" class="woocommerce-ResetPassword lost_reset_password">
<input type="hidden" name="reset_key" value="{{ args.key|esc_attr }}" /> <p class="text-body-secondary mb-3">
<input type="hidden" name="reset_login" value="{{ args.login|esc_attr }}" /> {{ 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="reset_key" value="{{ args.key|esc_attr }}" />
<input type="hidden" name="wc_reset_password" value="true" /> <input type="hidden" name="reset_login" value="{{ args.login|esc_attr }}" />
<button type="submit" class="btn btn-primary" value="{{ __('Save') }}">
{{ __('Save') }} {{ do_action('woocommerce_resetpassword_form') }}
</button>
<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> </div>
</div>
{{ wp_nonce_field('reset_password', 'woocommerce-reset-password-nonce') }}
</form>
{{ do_action('woocommerce_after_reset_password_form') }} {{ do_action('woocommerce_after_reset_password_form') }}

7
templates/myaccount/lost-password-confirmation.html.twig
View File

@@ -16,8 +16,13 @@
{{ do_action('woocommerce_before_lost_password_confirmation_message') }} {{ do_action('woocommerce_before_lost_password_confirmation_message') }}
<p> <p class="text-body-secondary">
{{ apply_filters('woocommerce_lost_password_confirmation_message', __('A password reset email has been sent to the email address on file for your account, but may take several minutes to show up in your inbox. Please wait at least 10 minutes before attempting another reset.')) }} {{ apply_filters('woocommerce_lost_password_confirmation_message', __('A password reset email has been sent to the email address on file for your account, but may take several minutes to show up in your inbox. Please wait at least 10 minutes before attempting another reset.')) }}
</p> </p>
<a href="{{ wc_get_page_permalink('myaccount')|esc_url }}" class="btn btn-outline-primary">
<i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
{{ __('Back to login') }}
</a>
{{ do_action('woocommerce_after_lost_password_confirmation_message') }} {{ do_action('woocommerce_after_lost_password_confirmation_message') }}

4
templates/myaccount/my-account.html.twig
View File

@@ -13,11 +13,11 @@
{{ do_action('woocommerce_before_my_account') }} {{ do_action('woocommerce_before_my_account') }}
<div class="row g-4"> <div class="row g-4">
<div class="col-lg-3"> <div class="col-lg-auto">
{% include 'myaccount/navigation.html.twig' %} {% include 'myaccount/navigation.html.twig' %}
</div> </div>
<div class="col-lg-9"> <div class="col-lg">
<div class="woocommerce-MyAccount-content"> <div class="woocommerce-MyAccount-content">
{{ do_action('woocommerce_account_content') }} {{ do_action('woocommerce_account_content') }}
</div> </div>

62
templates/myaccount/navigation.html.twig
View File

@@ -2,7 +2,8 @@
# My Account Navigation (Bootstrap 5 Override) # My Account Navigation (Bootstrap 5 Override)
# #
# Renders the sidebar navigation for the My Account area # Renders the sidebar navigation for the My Account area
# using Bootstrap list-group component. # using Bootstrap list-group component with icons.
# Responsive: offcanvas on mobile, sticky sidebar on desktop.
# #
# WooCommerce PHP equivalent: myaccount/navigation.php # WooCommerce PHP equivalent: myaccount/navigation.php
# #
@@ -10,14 +11,53 @@
# @since 0.1.0 # @since 0.1.0
#} #}
<nav class="woocommerce-MyAccount-navigation" aria-label="{{ __('Account navigation') }}"> {% set endpoint_icons = {
<div class="list-group"> 'dashboard': 'bi-speedometer2',
{% for endpoint, label in wc_get_account_menu_items() %} 'orders': 'bi-bag',
<a href="{{ wc_get_account_endpoint_url(endpoint)|esc_url }}" 'downloads': 'bi-download',
class="list-group-item list-group-item-action{% if wc_get_account_menu_item_classes(endpoint) matches '/is-active/' %} active{% endif %}" 'edit-address': 'bi-geo-alt',
{% if wc_get_account_menu_item_classes(endpoint) matches '/is-active/' %}aria-current="page"{% endif %}> 'payment-methods': 'bi-credit-card',
{{ label|esc_html }} 'edit-account': 'bi-person-gear',
</a> 'customer-logout': 'bi-box-arrow-right',
{% endfor %} } %}
{{ do_action('woocommerce_before_account_navigation') }}
<button class="btn btn-outline-secondary w-100 mb-3 d-lg-none"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#accountNav"
aria-controls="accountNav">
<i class="bi bi-list me-1" aria-hidden="true"></i>
{{ __('Account menu') }}
</button>
<div class="offcanvas-lg offcanvas-start" id="accountNav" tabindex="-1"
aria-labelledby="accountNavLabel">
<div class="offcanvas-header d-lg-none">
<h5 class="offcanvas-title" id="accountNavLabel">{{ __('Account menu') }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
data-bs-target="#accountNav" aria-label="{{ __('Close') }}"></button>
</div> </div>
</nav> <div class="offcanvas-body p-0">
<nav class="woocommerce-MyAccount-navigation position-sticky"
style="top: 5rem;"
aria-label="{{ __('Account navigation') }}">
<div class="list-group">
{% for endpoint, label in wc_get_account_menu_items() %}
{% set is_active = wc_get_account_menu_item_classes(endpoint) matches '/is-active/' %}
<a href="{{ wc_get_account_endpoint_url(endpoint)|esc_url }}"
class="list-group-item list-group-item-action d-flex align-items-center{% if is_active %} active{% endif %}"
{% if is_active %}aria-current="page"{% endif %}>
{% if endpoint_icons[endpoint] is defined %}
<i class="bi {{ endpoint_icons[endpoint] }} me-2" aria-hidden="true"></i>
{% endif %}
{{ label|esc_html }}
</a>
{% endfor %}
</div>
</nav>
</div>
</div>
{{ do_action('woocommerce_after_account_navigation') }}

74
templates/myaccount/view-order.html.twig
View File

@@ -1,7 +1,8 @@
{# {#
# View Order (Bootstrap 5 Override) # View Order (Bootstrap 5 Override)
# #
# Shows details of a specific order on the account page. # Shows details of a specific order on the account page
# with summary card, status badge, and order notes.
# HPOS compatible: uses WC_Order methods only. # HPOS compatible: uses WC_Order methods only.
# #
# Expected context: # Expected context:
@@ -16,29 +17,60 @@
{% set notes = order.get_customer_order_notes() %} {% set notes = order.get_customer_order_notes() %}
<p> <div class="card shadow-sm mb-4">
{{ __('Order #%1$s was placed on %2$s and is currently %3$s.')|format( <div class="card-header d-flex justify-content-between align-items-center">
'<mark class="order-number">' ~ order.get_order_number() ~ '</mark>', <h2 class="h5 mb-0">
'<mark class="order-date">' ~ wc_format_datetime(order.get_date_created()) ~ '</mark>', {{ __('Order #%s')|format(order.get_order_number()) }}
'<mark class="order-status">' ~ wc_get_order_status_name(order.get_status()) ~ '</mark>' </h2>
)|wp_kses_post }} {% include 'components/status-badge.html.twig' with { status: order.get_status() } %}
</p> </div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between">
<span class="text-body-secondary">{{ __('Date') }}</span>
<time datetime="{{ order.get_date_created().date('c')|esc_attr }}">
{{ wc_format_datetime(order.get_date_created())|esc_html }}
</time>
</li>
<li class="list-group-item d-flex justify-content-between">
<span class="text-body-secondary">{{ __('Status') }}</span>
{% include 'components/status-badge.html.twig' with { status: order.get_status() } %}
</li>
<li class="list-group-item d-flex justify-content-between">
<span class="text-body-secondary">{{ __('Total') }}</span>
<strong>{{ order.get_formatted_order_total()|wp_kses_post }}</strong>
</li>
{% if order.get_payment_method_title() %}
<li class="list-group-item d-flex justify-content-between">
<span class="text-body-secondary">{{ __('Payment method') }}</span>
<span>{{ order.get_payment_method_title()|esc_html }}</span>
</li>
{% endif %}
</ul>
</div>
{% if notes %} {% if notes %}
<h2 class="h5 mt-4 mb-3">{{ __('Order updates') }}</h2> <div class="card shadow-sm mb-4">
<div class="list-group mb-4"> <div class="card-header">
{% for note in notes %} <h3 class="h6 mb-0">
<div class="list-group-item"> <i class="bi bi-chat-left-text me-1" aria-hidden="true"></i>
<div class="d-flex justify-content-between align-items-center mb-1"> {{ __('Order updates') }}
<small class="text-body-secondary"> </h3>
{{ date_i18n(__('l jS \\o\\f F Y, h:ia'), strtotime(note.comment_date)) }} </div>
</small> <div class="list-group list-group-flush">
{% for note in notes %}
<div class="list-group-item">
<div class="d-flex justify-content-between align-items-center mb-1">
<small class="text-body-secondary">
<i class="bi bi-clock me-1" aria-hidden="true"></i>
{{ date_i18n(__('l jS \\o\\f F Y, h:ia'), strtotime(note.comment_date)) }}
</small>
</div>
<div class="mb-0">
{{ wpautop(wptexturize(note.comment_content))|raw }}
</div>
</div> </div>
<div class="mb-0"> {% endfor %}
{{ wpautop(wptexturize(note.comment_content))|raw }} </div>
</div>
</div>
{% endfor %}
</div> </div>
{% endif %} {% endif %}