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

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

@@ -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 %}