magdev/wc-bootstrap
1
Fork 0
Code Issues Pull Requests Actions Releases 8 Activity

Implement Phase 6 & 7: My Account and Order Details templates (Bootstrap 5, HPOS)

Browse Source 
Phase 6 - My Account (15 templates):
- Account layout with sidebar navigation (list-group) and content area
- Orders table with status badges, pagination, and responsive design
- View order with order notes as list-group items
- Address cards with edit/add buttons
- Login/Register side-by-side card layout
- Account edit, password change, downloads, payment methods forms
- Lost/reset password forms and confirmation

Phase 7 - Order Details (5 templates):
- Order details table with items, totals, and customer note
- Line item rows with refund quantity display
- Customer billing/shipping address cards
- Order tracking form
- Order again button

All order templates use WC_Order object methods only (HPOS compatible).
Bootstrap 5 components: cards, tables, list-groups, badges, forms, alerts.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Marco Grätsch
2026-02-28 10:43:30 +01:00
parent 594d810439
commit 8b1793097c
22 changed files with 1377 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
templates/myaccount/form-edit-account.html.twig Normal file
View File

@@ -0,0 +1,138 @@
{#
# Edit Account Form (Bootstrap 5 Override)
#
# Account details editing form with Bootstrap form styling.
#
# Expected context:
# user - WP_User object
#
# WooCommerce PHP equivalent: myaccount/form-edit-account.php
#
# @package WcBootstrap
# @since 0.1.0
#}
{{ do_action('woocommerce_before_edit_account_form') }}
<form class="woocommerce-EditAccountForm edit-account" action="" method="post" {{ do_action('woocommerce_edit_account_form_tag') }}>
{{ 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>
<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-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">
{{ wp_nonce_field('save_account_details', 'save-account-details-nonce') }}
<button type="submit" class="btn btn-primary" name="save_account_details" value="{{ __('Save changes') }}">
<i class="bi bi-check-lg me-1" aria-hidden="true"></i>
{{ __('Save changes') }}
</button>
<input type="hidden" name="action" value="save_account_details" />
</div>
{{ do_action('woocommerce_edit_account_form_end') }}
</form>
{{ do_action('woocommerce_after_edit_account_form') }}