# Woo Account Dashboard Widget

> Customisable WooCommerce My Account page replacement. Renders user dashboard with sidebar navigation (orders, downloads, addresses, account, logout) using one of 3 layout presets. Custom tabs supported via Repeater.

**Class file:** `includes/Elements/Woo_Account_Dashboard.php` (3,036 lines)
**Slug:** `woo-account-dashboard` (widget id `eael-woo-account-dashboard`)
**Public docs:** <https://essential-addons.com/elementor/docs/woo-account-dashboard/>
**Pro-shared:** Pro-only. **Requires WooCommerce active + logged-in user context.**

## Overview

A drop-in My Account page widget. Intended to be placed on a page set as WooCommerce's "My Account page" via WC settings. Sidebar shows WooCommerce endpoint links (Orders, Downloads, Addresses, Account Details, Logout) plus user-defined custom tabs. Content area shows the active endpoint's content via `wc_get_template( 'myaccount/...' )` calls. 3 layout presets (preset-1, preset-2, preset-3) with substantially different sidebar / content positioning.

## Pro vs Lite

Pro-only.

## File Map

| File | Role |
| --- | --- |
| `includes/Elements/Woo_Account_Dashboard.php` | Widget class (3,036 lines) |
| `includes/Template/Woo-Account-Dashboard/preset-1.php` | Preset 1 layout template |
| `includes/Template/Woo-Account-Dashboard/preset-2.php` | Preset 2 |
| `includes/Template/Woo-Account-Dashboard/preset-3.php` | Preset 3 |
| `src/css/view/woo-account-dashboard.scss` → `assets/front-end/css/view/woo-account-dashboard.min.css` | Per-preset styling |
| `src/js/view/woo-account-dashboard.js` → `assets/front-end/js/view/woo-account-dashboard.min.js` | Tab switch + responsive sidebar |
| `config.php` entry `'woo-account-dashboard'` | Self CSS + self JS |

## Architecture

- **WC My Account context required** — the widget reads `WC()->query->get_current_endpoint()` (line 2858) and `WC()->customer` (line 2950). Outside My Account page, endpoints return empty / customer is null — widget renders only the user-profile header.
- **WC template inclusion** — `wc_get_template( 'myaccount/navigation.php' )` (line 2890) and per-endpoint templates (line 2940). Pro doesn't reimplement My Account internals — delegates to WC's overridable templates. Theme overrides in `your-theme/woocommerce/myaccount/*.php` apply.
- **Payment gateways listed** — `WC()->payment_gateways->get_available_payment_gateways()` (line 2792). Used for the "saved payment methods" tab.
- **Custom tabs via Repeater** — user can add tabs with `field_custom_key` keys. `eael_account_dashboard_menu_items` filter callback (line 2817) injects them into WC's navigation. Endpoint detection at line 2844 walks the custom-tab list against the active endpoint.
- **Endpoint title** — `eael_wc_endpoint_title` (line 2855) — wraps WC's `get_endpoint_title` for display. Defaults to "My Account" when no endpoint active.
- **`get_current_endpoint`** — wraps WC's query method, handles the edge case where `WC()->query` isn't available (line 2752).
- **Layout dispatcher** — `render()` (line 2971) → `$this->get_template( $woo_account_dashboard['layout'] )` (line 3023). Same template-include pattern as siblings.
- **`eael_account_dashboard_layout`** — separate `register_controls` method (line 156) registers the layout-picker section. Method-extracted for the largest control set.
- **Heavy preset-specific control sets** — Pro registers tab/profile/avatar/greeting controls per preset (`_preset_1`, `_preset_2`, `_preset_3` suffixes throughout). 3,036 lines mostly spent here.

## Render Output (preset-1 — high level)

```html
<div class="eael-woo-account-dashboard eael-wad-preset-1">
  <div class="eael-wad-sidebar">
    <div class="eael-wad-profile">
      [?] <img src="{avatar}" />
      [?] <span class="greeting">Welcome,</span>
      <span class="user-name">{display_name}</span>
    </div>
    <nav class="eael-wad-nav">
      <!-- WC navigation template -->
      <ul>
        <li class="dashboard active"><a href="{my-account-url}">Dashboard</a></li>
        <li class="orders"><a>Orders</a></li>
        <li class="downloads"><a>Downloads</a></li>
        <li class="edit-address"><a>Addresses</a></li>
        <li class="edit-account"><a>Account details</a></li>
        [?] <li class="{custom-key}"><a>{custom-title}</a></li>
        <li class="customer-logout"><a>Logout</a></li>
      </ul>
    </nav>
  </div>
  <div class="eael-wad-content">
    <h2 class="eael-wad-endpoint-title">{endpoint_title}</h2>
    <!-- wc_get_template loaded based on active endpoint -->
    {endpoint_content}
  </div>
</div>
```

## Controls Reference

| Control id | Tab → Section | Type | Purpose |
| --- | --- | --- | --- |
| `layout` (within `eael_section_account_dashboard_layouts`) | Content → Layout | SELECT | `preset-1` / `preset-2` / `preset-3` |
| Custom tabs Repeater (`field_custom_key`, `field_custom_title`, etc.) | Content → Custom Tabs | REPEATER | User-defined tabs |
| `eael_account_dashboard_tabs_account_profile_avatar_show_preset_1` | Style → Profile | SWITCHER | Avatar toggle per preset |
| Similar `_show_preset_X` suffixed switchers | Style → Profile | SWITCHER | Per-preset visibility |
| Tab padding / background / item margin / item padding (per preset) | Style → Tabs | various | Per-preset styling |

## Conditional Dependencies

Most controls are gated on the active preset via `_preset_1` / `_preset_2` / `_preset_3` suffix conventions. Switching presets reveals the corresponding control subset.

## JavaScript Lifecycle

`src/js/view/woo-account-dashboard.js` — handles tab click navigation, responsive sidebar toggle (mobile collapse). Possibly AJAX endpoint switching depending on preset.

## Hooks & Filters

### WC hooks consumed

| Hook / call | Where | Purpose |
| --- | --- | --- |
| `wc_get_template( 'myaccount/navigation.php' )` | line 2890 | WC's nav template — theme-overridable |
| `WC()->query->get_current_endpoint()` | line 2858 | Active endpoint detection |
| `WC()->customer` | line 2950 | Customer object for profile rendering |
| `WC()->payment_gateways->get_available_payment_gateways()` | line 2792 | Saved payments tab |
| `woocommerce_account_menu_items` filter via `eael_account_dashboard_menu_items` | line 2817 | Inject custom tabs |
| `woocommerce_account_menu_item_classes` via `eael_account_dashboard_menu_item_classes` | line 2839 | Active-state class on custom tabs |

### Pro / EA hooks emitted

None directly.

## Common Issues

| Symptom | Likely cause | Diagnose | Fix |
| --- | --- | --- | --- |
| Empty dashboard for non-logged-in users | Outside WC My Account flow | Visit `/my-account/` while logged in | Set the page as WC's My Account page (WC settings → Advanced) |
| Custom tab doesn't show | Repeater `field_custom_key` collides with WC built-in endpoint | Inspect repeater value | Use unique keys (e.g. `eael-loyalty`, not `orders`) |
| Theme override not applying | Theme's `woocommerce/myaccount/` template path mismatch | `wc_locate_template` resolution | Verify theme uses `woocommerce/myaccount/{template}.php` path |
| Endpoint title wrong on custom tab | `get_endpoint_title` doesn't know the custom key | `eael_wc_endpoint_title` falls back to "My Account" | Pro's filter callback should set the title; verify callback handles custom keys |
| Logout link does nothing | WC nonce missing | View page source — `/?customer-logout` should include nonce | Standard WC behaviour — confirm WC version |

## Known Limitations

- **3,036 lines** — per-preset control bloat
- **WC template overrides depend on theme** — Pro can't enforce; user may see theme styling bleed
- **No granular cap check** — anyone logged-in sees the dashboard; restricting by capability requires Conditional_Display extension
- **3 presets with very different control sets** — preset switching can leave orphan setting keys in saved data
- **`woo-checkout` slug exists in `config.php` but no class** — appears to be CSS-only deps for a planned checkout widget; verify before referencing
- **Custom tabs lack CRUD UI for endpoint URL slug** — each custom tab uses the `field_custom_key` as the URL slug; renaming breaks bookmarks

## Cross-References

- Sibling: [`woo-thank-you.md`](woo-thank-you.md), [`woo-product-slider.md`](woo-product-slider.md)
- Shared patterns: [`_patterns.md`](_patterns.md)
- Architecture: [`docs/architecture/pro-lite-bridge.md`](../architecture/pro-lite-bridge.md)