From 7034134678ae6b62ba2afc8e2920f819cfa7b333 Mon Sep 17 00:00:00 2001 From: magdev Date: Sat, 28 Feb 2026 13:28:15 +0100 Subject: [PATCH] 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 --- CLAUDE.md | 32 ++- assets/css/wc-bootstrap.css | 39 +++- templates/myaccount/dashboard.html.twig | 71 ++++-- .../myaccount/form-edit-account.html.twig | 211 ++++++++++-------- .../myaccount/form-edit-address.html.twig | 58 +++-- .../myaccount/form-lost-password.html.twig | 69 +++--- .../myaccount/form-reset-password.html.twig | 103 +++++---- .../lost-password-confirmation.html.twig | 7 +- templates/myaccount/my-account.html.twig | 4 +- templates/myaccount/navigation.html.twig | 62 ++++- templates/myaccount/view-order.html.twig | 74 ++++-- 11 files changed, 471 insertions(+), 259 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index eb6cff3..412b414 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -299,7 +299,11 @@ The child theme inherits from `wp-bootstrap` via WordPress `Template: wp-bootstr ## 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 `` 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 `
/`. - **Detail pages** use 8+4 column layout with sticky sidebar. - **Cards** use `
` 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 %} +
+ +
+
+ +
+
+

{{ action.label }}

+

{{ action.desc }}

+
+
+ +
+ {% endfor %} +
{{ do_action('woocommerce_account_dashboard') }} {{ do_action('woocommerce_before_my_account') }} diff --git a/templates/myaccount/form-edit-account.html.twig b/templates/myaccount/form-edit-account.html.twig index 200acec..c705b11 100644 --- a/templates/myaccount/form-edit-account.html.twig +++ b/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') }} -
-
- - +
+
+

+ + {{ __('Personal information') }} +

-
- - +
+
+
+ + +
+
+ + +
+
+ +
+ + +
+ {{ __('This will be how your name will be displayed in the account section and in reviews') }} +
+
+ +
+ + +
+ + {{ do_action('woocommerce_edit_account_form_fields') }}
-
- - -
- {{ __('This will be how your name will be displayed in the account section and in reviews') }} +
+
+

+ + {{ __('Password change') }} +

+
+
+
+ + +
+ +
+ + +
+ +
+ + +
-
- - -
- - {{ do_action('woocommerce_edit_account_form_fields') }} - -
- {{ __('Password change') }} - -
- - -
- -
- - -
- -
- - -
-
- {{ do_action('woocommerce_edit_account_form') }}
diff --git a/templates/myaccount/form-edit-address.html.twig b/templates/myaccount/form-edit-address.html.twig index 597254d..546c8c5 100644 --- a/templates/myaccount/form-edit-address.html.twig +++ b/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 %} -
-

{{ apply_filters('woocommerce_my_account_edit_address_title', page_title, load_address) }}

- -
- {{ do_action('woocommerce_before_edit_address_form_' ~ load_address) }} - -
- {% for key, field in address %} - {{ woocommerce_form_field(key, field, wc_get_post_data_by_key(key, field.value)) }} - {% endfor %} -
- - {{ do_action('woocommerce_after_edit_address_form_' ~ load_address) }} - -
- - {{ wp_nonce_field('woocommerce-edit_address', 'woocommerce-edit-address-nonce') }} - -
+
+
+

+ + {{ apply_filters('woocommerce_my_account_edit_address_title', page_title, load_address) }} +

- +
+
+
+ {{ do_action('woocommerce_before_edit_address_form_' ~ load_address) }} + +
+ {% for key, field in address %} + {{ woocommerce_form_field(key, field, wc_get_post_data_by_key(key, field.value)) }} + {% endfor %} +
+ + {{ do_action('woocommerce_after_edit_address_form_' ~ load_address) }} + +
+ + {{ wp_nonce_field('woocommerce-edit_address', 'woocommerce-edit-address-nonce') }} + +
+
+
+
+
{% endif %} {{ do_action('woocommerce_after_edit_account_address_form') }} diff --git a/templates/myaccount/form-lost-password.html.twig b/templates/myaccount/form-lost-password.html.twig index cbcf70a..58b821e 100644 --- a/templates/myaccount/form-lost-password.html.twig +++ b/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') }} -
- -

- {{ 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.')) }} -

- -
- - +
+
+

+ + {{ __('Lost your password?') }} +

+
+ - {{ do_action('woocommerce_lostpassword_form') }} +

+ {{ 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.')) }} +

-
- - +
+ + +
+ + {{ do_action('woocommerce_lostpassword_form') }} + +
+ + +
+ + {{ wp_nonce_field('lost_password', 'woocommerce-lost-password-nonce') }} + +
- - {{ wp_nonce_field('lost_password', 'woocommerce-lost-password-nonce') }} - - +
{{ do_action('woocommerce_after_lost_password_form') }} diff --git a/templates/myaccount/form-reset-password.html.twig b/templates/myaccount/form-reset-password.html.twig index ffa17ba..9d9bd53 100644 --- a/templates/myaccount/form-reset-password.html.twig +++ b/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') }} -
- -

- {{ apply_filters('woocommerce_reset_password_message', __('Enter a new password below.')) }} -

- -
-
- - -
-
- - -
+
+
+

+ + {{ __('Set new password') }} +

+
+ - - +

+ {{ apply_filters('woocommerce_reset_password_message', __('Enter a new password below.')) }} +

- {{ do_action('woocommerce_resetpassword_form') }} +
+
+ + +
+
+ + +
+
-
- - + + + + {{ do_action('woocommerce_resetpassword_form') }} + +
+ + +
+ + {{ wp_nonce_field('reset_password', 'woocommerce-reset-password-nonce') }} + +
- - {{ wp_nonce_field('reset_password', 'woocommerce-reset-password-nonce') }} - - +
{{ do_action('woocommerce_after_reset_password_form') }} diff --git a/templates/myaccount/lost-password-confirmation.html.twig b/templates/myaccount/lost-password-confirmation.html.twig index d7beba7..5493add 100644 --- a/templates/myaccount/lost-password-confirmation.html.twig +++ b/templates/myaccount/lost-password-confirmation.html.twig @@ -16,8 +16,13 @@ {{ do_action('woocommerce_before_lost_password_confirmation_message') }} -

+

{{ 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.')) }}

+ + + {{ __('Back to login') }} + + {{ do_action('woocommerce_after_lost_password_confirmation_message') }} diff --git a/templates/myaccount/my-account.html.twig b/templates/myaccount/my-account.html.twig index d081944..1d42622 100644 --- a/templates/myaccount/my-account.html.twig +++ b/templates/myaccount/my-account.html.twig @@ -13,11 +13,11 @@ {{ do_action('woocommerce_before_my_account') }}
-
+
{% include 'myaccount/navigation.html.twig' %}
-
+
{{ do_action('woocommerce_account_content') }}
diff --git a/templates/myaccount/navigation.html.twig b/templates/myaccount/navigation.html.twig index ee2be81..9ffff4c 100644 --- a/templates/myaccount/navigation.html.twig +++ b/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 #} - +
+ +
+
+ +{{ do_action('woocommerce_after_account_navigation') }} diff --git a/templates/myaccount/view-order.html.twig b/templates/myaccount/view-order.html.twig index 1390198..d83c116 100644 --- a/templates/myaccount/view-order.html.twig +++ b/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() %} -

- {{ __('Order #%1$s was placed on %2$s and is currently %3$s.')|format( - '' ~ order.get_order_number() ~ '', - '' ~ wc_format_datetime(order.get_date_created()) ~ '', - '' ~ wc_get_order_status_name(order.get_status()) ~ '' - )|wp_kses_post }} -

+
+
+

+ {{ __('Order #%s')|format(order.get_order_number()) }} +

+ {% include 'components/status-badge.html.twig' with { status: order.get_status() } %} +
+
    +
  • + {{ __('Date') }} + +
    • +
  • + {{ __('Status') }} + {% include 'components/status-badge.html.twig' with { status: order.get_status() } %} +
    • +
  • + {{ __('Total') }} + {{ order.get_formatted_order_total()|wp_kses_post }} +
    • + {% if order.get_payment_method_title() %} +
  • + {{ __('Payment method') }} + {{ order.get_payment_method_title()|esc_html }} +
    • + {% endif %} +
+
{% if notes %} -

{{ __('Order updates') }}

-
- {% for note in notes %} -
-
- - {{ date_i18n(__('l jS \\o\\f F Y, h:ia'), strtotime(note.comment_date)) }} - +
+
+

+ + {{ __('Order updates') }} +

+
+
+ {% for note in notes %} +
+
+ + + {{ date_i18n(__('l jS \\o\\f F Y, h:ia'), strtotime(note.comment_date)) }} + +
+
+ {{ wpautop(wptexturize(note.comment_content))|raw }} +
-
- {{ wpautop(wptexturize(note.comment_content))|raw }} -
-
- {% endfor %} + {% endfor %} +
{% endif %}