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

58
templates/myaccount/form-edit-address.html.twig
View File

@@ -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 %}
<form method="post" novalidate>
<h2 class="h4 mb-4">{{ apply_filters('woocommerce_my_account_edit_address_title', page_title, load_address) }}</h2>
<div class="woocommerce-address-fields">
{{ do_action('woocommerce_before_edit_address_form_' ~ load_address) }}
<div class="woocommerce-address-fields__field-wrapper">
{% for key, field in address %}
{{ woocommerce_form_field(key, field, wc_get_post_data_by_key(key, field.value)) }}
{% endfor %}
</div>
{{ do_action('woocommerce_after_edit_address_form_' ~ load_address) }}
<div class="mt-3">
<button type="submit" class="btn btn-primary" name="save_address" value="{{ __('Save address') }}">
<i class="bi bi-check-lg me-1" aria-hidden="true"></i>
{{ __('Save address') }}
</button>
{{ wp_nonce_field('woocommerce-edit_address', 'woocommerce-edit-address-nonce') }}
<input type="hidden" name="action" value="edit_address" />
</div>
<div class="card shadow-sm">
<div class="card-header">
<h2 class="h5 mb-0">
<i class="bi {{ address_icon }} me-1" aria-hidden="true"></i>
{{ apply_filters('woocommerce_my_account_edit_address_title', page_title, load_address) }}
</h2>
</div>
</form>
<div class="card-body">
<form method="post" novalidate>
<div class="woocommerce-address-fields">
{{ do_action('woocommerce_before_edit_address_form_' ~ load_address) }}
<div class="woocommerce-address-fields__field-wrapper">
{% for key, field in address %}
{{ woocommerce_form_field(key, field, wc_get_post_data_by_key(key, field.value)) }}
{% endfor %}
</div>
{{ do_action('woocommerce_after_edit_address_form_' ~ load_address) }}
<div class="mt-3">
<button type="submit" class="btn btn-primary" name="save_address" value="{{ __('Save address') }}">
<i class="bi bi-check-lg me-1" aria-hidden="true"></i>
{{ __('Save address') }}
</button>
{{ wp_nonce_field('woocommerce-edit_address', 'woocommerce-edit-address-nonce') }}
<input type="hidden" name="action" value="edit_address" />
</div>
</div>
</form>
</div>
</div>
{% endif %}
{{ do_action('woocommerce_after_edit_account_address_form') }}