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

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

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