` with `stretched-link`.
- **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
-
+### 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 `` tags with welcome card (avatar + greeting) and 5 quick-action cards in responsive grid
+- `templates/myaccount/view-order.html.twig` — Replaced `` 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`
diff --git a/assets/css/wc-bootstrap.css b/assets/css/wc-bootstrap.css
index 0ec7c2b..96e935c 100644
--- a/assets/css/wc-bootstrap.css
+++ b/assets/css/wc-bootstrap.css
@@ -280,16 +280,47 @@ header.sticky-top.is-stuck {
/* ==========================================================================
My Account
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 {
font-weight: 600;
}
-/* Order status marks */
-.woocommerce-order-details mark {
- background: none;
- font-weight: 600;
+/* Dashboard: avatar rounding */
+.woocommerce-MyAccount-content .avatar {
+ border-radius: 50%;
+}
+
+/* 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 */
diff --git a/templates/myaccount/dashboard.html.twig b/templates/myaccount/dashboard.html.twig
index 5740c97..f844636 100644
--- a/templates/myaccount/dashboard.html.twig
+++ b/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
#}
-
- {{ __('Hello %1$s (not %1$s? Log out )')|format(
- '' ~ current_user.display_name|esc_html ~ ' ',
- wc_logout_url()|esc_url
- )|wp_kses_post }}
-
+{% 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') },
+] %}
-
- {% if wc_shipping_enabled() %}
- {{ __('From your account dashboard you can view your recent orders , manage your shipping and billing addresses , and edit your password and account details .')|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 recent orders , manage your billing address , and edit your password and account details .')|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 %}
-
+
+
+
+ {{ get_avatar(current_user.ID, 64)|raw }}
+
+
+
+ {{ __('Hello, %s!')|format(current_user.display_name|esc_html) }}
+
+
+ {{ __('Not %s?')|format(current_user.display_name|esc_html) }}
+ {{ __('Log out') }}
+
+
+
+
+ {% for action in quick_actions %}
+
+ {% endfor %}
+
-
-
- {{ __('First name') }} *
- {{ __('Required') }}
-
-
+
+
-
-
- {{ __('Last name') }} *
- {{ __('Required') }}
-
-
+
+
+
+
+
+ {{ __('Display name') }} *
+ {{ __('Required') }}
+
+
+
+ {{ __('This will be how your name will be displayed in the account section and in reviews') }}
+
+
+
+
+
+ {{ __('Email address') }} *
+ {{ __('Required') }}
+
+
+
+ {{ do_action('woocommerce_edit_account_form_fields') }}
-
-
- {{ __('Display name') }} *
- {{ __('Required') }}
-
-
-