wc-bootstrap/templates/myaccount/form-edit-account.html.twig

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