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>

templates/myaccount/dashboard.html.twig

@@ -1,7 +1,8 @@
 {#
  # 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:
  #   current_user - WP_User object
@@ -12,28 +13,54 @@
  # @since 0.1.0
  #}
 
-<p>
-    {{ __('Hello %1$s (not %1$s? <a href="%2$s">Log out</a>)')|format(
-        '<strong>' ~ current_user.display_name|esc_html ~ '</strong>',
-        wc_logout_url()|esc_url
-    )|wp_kses_post }}
-</p>
+{% set quick_actions = [
+    { endpoint: 'orders',          icon: 'bi-bag',         label: __('Orders'),          desc: __('View and track your orders') },
+    { endpoint: 'edit-address',    icon: 'bi-geo-alt',     label: __('Addresses'),       desc: __('Manage billing & shipping') },
+    { endpoint: 'edit-account',    icon: 'bi-person-gear', label: __('Account details'), desc: __('Update name, email & password') },
+    { endpoint: 'downloads',       icon: 'bi-download',    label: __('Downloads'),       desc: __('Access purchased files') },
+    { endpoint: 'payment-methods', icon: 'bi-credit-card', label: __('Payment methods'), desc: __('Manage saved cards') },
+] %}
 
-<p>
-    {% if wc_shipping_enabled() %}
-        {{ __('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(
-            wc_get_endpoint_url('orders')|esc_url,
-            wc_get_endpoint_url('edit-address')|esc_url,
-            wc_get_endpoint_url('edit-account')|esc_url
-        )|wp_kses_post }}
-    {% else %}
-        {{ __('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(
-            wc_get_endpoint_url('orders')|esc_url,
-            wc_get_endpoint_url('edit-address')|esc_url,
-            wc_get_endpoint_url('edit-account')|esc_url
-        )|wp_kses_post }}
-    {% endif %}
-</p>
+<div class="card shadow-sm mb-4">
+    <div class="card-body d-flex align-items-center gap-3">
+        <div class="flex-shrink-0">
+            {{ get_avatar(current_user.ID, 64)|raw }}
+        </div>
+        <div class="flex-grow-1">
+            <h2 class="h5 mb-1">
+                {{ __('Hello, %s!')|format(current_user.display_name|esc_html) }}
+            </h2>
+            <p class="text-body-secondary mb-0">
+                {{ __('Not %s?')|format(current_user.display_name|esc_html) }}
+                <a href="{{ wc_logout_url()|esc_url }}">{{ __('Log out') }}</a>
+            </p>
+        </div>
+    </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_before_my_account') }}

templates/myaccount/form-edit-account.html.twig

@@ -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') }}&nbsp;<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') }}&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 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') }}&nbsp;<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') }}&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 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 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') }}&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') }}
 
     <div class="mt-3">

templates/myaccount/form-edit-address.html.twig

@@ -1,7 +1,8 @@
 {#
  # 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:
  #   load_address - Address type ('billing' or 'shipping'), or empty
@@ -14,36 +15,45 @@
  #}
 
 {% 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') }}
 
 {% if not load_address %}
     {% include 'myaccount/my-address.html.twig' %}
 {% else %}
-    <form method="post" novalidate>
-        <h2 class="h4 mb-4">{{ apply_filters('woocommerce_my_account_edit_address_title', page_title, load_address) }}</h2>
-
-        <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 class="card shadow-sm">
+        <div class="card-header">
+            <h2 class="h5 mb-0">
+                <i class="bi {{ address_icon }} me-1" aria-hidden="true"></i>
+                {{ apply_filters('woocommerce_my_account_edit_address_title', page_title, load_address) }}
+            </h2>
         </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 %}
 
 {{ do_action('woocommerce_after_edit_account_address_form') }}

templates/myaccount/form-lost-password.html.twig

@@ -1,7 +1,8 @@
 {#
  # 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
  #
@@ -11,37 +12,47 @@
 
 {{ do_action('woocommerce_before_lost_password_form') }}
 
-<form method="post" class="woocommerce-ResetPassword lost_reset_password">
-
-    <p class="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="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 class="card shadow-sm">
+    <div class="card-header">
+        <h2 class="h5 mb-0">
+            <i class="bi bi-key me-1" aria-hidden="true"></i>
+            {{ __('Lost your password?') }}
+        </h2>
     </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">
-        <input type="hidden" name="wc_reset_password" value="true" />
-        <button type="submit" class="btn btn-primary" value="{{ __('Reset password') }}">
-            {{ __('Reset password') }}
-        </button>
+            <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>
+
+            {{ 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>
-
-    {{ wp_nonce_field('lost_password', 'woocommerce-lost-password-nonce') }}
-
-</form>
+</div>
 
 {{ do_action('woocommerce_after_lost_password_form') }}

templates/myaccount/form-reset-password.html.twig

@@ -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') }}

templates/myaccount/lost-password-confirmation.html.twig

@@ -16,8 +16,13 @@
 
 {{ 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.')) }}
 </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') }}

templates/myaccount/my-account.html.twig

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

templates/myaccount/navigation.html.twig

@@ -2,7 +2,8 @@
  # My Account Navigation (Bootstrap 5 Override)
  #
  # 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
  #
@@ -10,14 +11,53 @@
  # @since 0.1.0
  #}
 
-<nav class="woocommerce-MyAccount-navigation" aria-label="{{ __('Account navigation') }}">
-    <div class="list-group">
-        {% for endpoint, label in wc_get_account_menu_items() %}
-            <a href="{{ wc_get_account_endpoint_url(endpoint)|esc_url }}"
-               class="list-group-item list-group-item-action{% if wc_get_account_menu_item_classes(endpoint) matches '/is-active/' %} active{% endif %}"
-               {% if wc_get_account_menu_item_classes(endpoint) matches '/is-active/' %}aria-current="page"{% endif %}>
-                {{ label|esc_html }}
-            </a>
-        {% endfor %}
+{% set endpoint_icons = {
+    'dashboard':       'bi-speedometer2',
+    'orders':          'bi-bag',
+    'downloads':       'bi-download',
+    'edit-address':    'bi-geo-alt',
+    'payment-methods': 'bi-credit-card',
+    'edit-account':    'bi-person-gear',
+    'customer-logout': 'bi-box-arrow-right',
+} %}
+
+{{ 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>
-</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') }}

templates/myaccount/view-order.html.twig

@@ -1,7 +1,8 @@
 {#
  # 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.
  #
  # Expected context:
@@ -16,29 +17,60 @@
 
 {% set notes = order.get_customer_order_notes() %}
 
-<p>
-    {{ __('Order #%1$s was placed on %2$s and is currently %3$s.')|format(
-        '<mark class="order-number">' ~ order.get_order_number() ~ '</mark>',
-        '<mark class="order-date">' ~ wc_format_datetime(order.get_date_created()) ~ '</mark>',
-        '<mark class="order-status">' ~ wc_get_order_status_name(order.get_status()) ~ '</mark>'
-    )|wp_kses_post }}
-</p>
+<div class="card shadow-sm mb-4">
+    <div class="card-header d-flex justify-content-between align-items-center">
+        <h2 class="h5 mb-0">
+            {{ __('Order #%s')|format(order.get_order_number()) }}
+        </h2>
+        {% include 'components/status-badge.html.twig' with { status: order.get_status() } %}
+    </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 %}
-    <h2 class="h5 mt-4 mb-3">{{ __('Order updates') }}</h2>
-    <div class="list-group mb-4">
-        {% 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">
-                        {{ date_i18n(__('l jS \\o\\f F Y, h:ia'), strtotime(note.comment_date)) }}
-                    </small>
+    <div class="card shadow-sm mb-4">
+        <div class="card-header">
+            <h3 class="h6 mb-0">
+                <i class="bi bi-chat-left-text me-1" aria-hidden="true"></i>
+                {{ __('Order updates') }}
+            </h3>
+        </div>
+        <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 class="mb-0">
-                    {{ wpautop(wptexturize(note.comment_content))|raw }}
-                </div>
-            </div>
-        {% endfor %}
+            {% endfor %}
+        </div>
     </div>
 {% endif %}