Wallet Dashboard

The Wallet dashboard is the customer-facing hub inside WooCommerce My Account where customers see their balance, three lifetime stat cards, quick action buttons, and a filterable transaction history, plus a field to redeem a code, all on a single My Account page.

Customer Feature My Account Balance Overview Stat Cards Transaction History Redeem a Code

Overview

When WalletPro is active, a wallet tab is added to the WooCommerce My Account area. The tab label is the configurable wallet term (the same word the merchant uses for the wallet, "Wallet" by default), and the tab is slotted in just after the Dashboard item. Customers do not need to navigate away from their account to manage wallet activity. The page is wrapped in a labelled landmark region with an in-page section nav, so the parts read as one coherent dashboard. It surfaces:

The current wallet balance
Three lifetime stat cards: Total earned, Total spent, and Orders paid
An action bar with four buttons: Add Funds, Gift, Transfer, and Statement
A filterable, cursor-paginated transaction history table
A field to redeem a code
A pending section for incoming money requests and held withdrawals, when present

The dashboard is rendered server-side and does not require JavaScript to display the balance, stat cards, or transaction list. The page is assembled by composing each wallet surface onto the single account-funds My Account endpoint by hook priority, so deep links to individual sections keep resolving.

Where to Find It

Customers access the dashboard at the account-funds endpoint under My Account:

https://example.com/my-account/account-funds/

WalletPro registers this endpoint via woocommerce_account_menu_items and inserts the tab immediately after the Dashboard item. The endpoint self-heals its rewrite rules: when the stored endpoint version differs from the current one (right after install or an update), it flushes rewrite rules once so the pretty permalink resolves.

Dashboard Sections

In-Page Section Nav

At the top of the dashboard, a labelled navigation lists the sections so keyboard and screen-reader users can jump straight to one. The links are Balance, Add funds, Transaction history, Pending, and Redeem a code. Each target anchor is a programmatic focus target, so jumping moves focus to the section rather than only scrolling to it.

Balance

The balance line appears near the top of the dashboard and shows the customer's current wallet balance, formatted with the store currency via WooCommerce price formatting. It reads as a single sentence, for example "Your current balance is $42.50."

Stat Cards

Directly below the balance line, three headline stat cards summarise the account over its lifetime. All figures are scoped to the logged-in customer, so a customer only ever sees their own numbers.

Card	What It Shows
Total earned	Every lifetime credit to the wallet. This includes top-ups, along with top-up bonuses, cashback, referral credit, refunds credited back to the wallet, transfers and gifts received, redeemed codes, grants, and manual credits. In short, every inflow that increases the spendable balance.
Total spent	Lifetime purchase debits, that is, what the wallet has actually paid out.
Orders paid	The count of distinct orders the wallet has paid, in full or in part. When at least one order has been paid, the card shows an "across N orders" sub-line; with no orders yet the card simply reads "Orders paid / 0" and the sub-line is omitted.

ℹ️

Total earned counts top-ups. An earlier summary card elsewhere in My Account excluded top-ups from its "earned" figure; the wallet dashboard's Total earned card is the correct figure and includes top-ups along with every other inflow type.

Action Bar

Below the balance and stat cards, an action bar of four buttons takes the customer straight to each action. The first three are in-page jumps to form sections that render lower on the same page; Statement is a direct, nonce-protected link.

Button	What It Does
Add Funds	Jumps to the quick top-up form lower on the page, where the customer can add money.
Gift	Jumps to the gift form section, for sending wallet credit as a gift.
Transfer	Jumps to the wallet-to-wallet transfer form section.
Statement	A one-click, nonce-protected link to the printable statement. It carries the active history filter, so the statement matches what the customer is currently viewing.

Transaction History

The transaction history table lists the customer's wallet entries, newest first. Each row shows four columns:

Column	Description
Type	The kind of transaction (for example top-up, cashback, debit, transfer in). The same type values drive the Type filter.
Amount	The transaction amount, formatted with the store currency.
Balance	The wallet balance recorded with the entry.
Date	When the transaction occurred.

Above the table, a GET filter form lets customers narrow the history. Submitting reloads the wallet page with the chosen query args, which both the history read and the Statement link pick back up. The filter fields are:

Type, a dropdown defaulting to "All types" plus one option per transaction type
From and To, native <input type="date"> date pickers for a date range
Search, a text field that matches against the note or type

A Filter button submits the form. Once any filter is active, a Reset link appears to clear the filters and return to the full history.

ℹ️

The history uses cursor (keyset) pagination, not numbered pages. The controls are Previous and Next links rather than a numbered pager, because keyset pagination has no random page access or total page count. Each link carries the active filter args plus the cursor, so filters apply across pages and Previous returns to the exact earlier page. The page size is 10 rows. Unlike an offset pager, a cursor page stays stable when new rows are inserted between fetches.

Redeem a Code

The dashboard includes a redeem-a-code field where a customer can enter a redemption code to add credit to their wallet. It is one of the sections listed in the in-page nav. For how codes are created and how redemption works, see Redemption Codes.

Pending (When Present)

A pending section gathers incoming money requests and any held or pending withdrawals for the customer, so outstanding items needing attention are grouped together. It is reachable from the Pending link in the in-page nav.

Accessibility

The dashboard is built with assistive technology in mind:

The whole dashboard is a labelled region landmark, named by its visible title via aria-labelledby, so screen-reader users can jump straight to the wallet.
The in-page section nav is a labelled nav landmark, and each section anchor carries tabindex="-1" so jumping moves focus to the section, not just the scroll position.
The history filter form is a labelled form, with explicit for/id associations on every control so each field has an unambiguous programmatic label.
The Previous and Next pagination controls are real anchors inside a labelled nav, so they are keyboard operable and announced by assistive tech.
A plugin-provided stylesheet guarantees a visible, high-contrast focus ring on every wallet control and contrast-safe colors for the wallet's own colored text, independent of the active theme. The stylesheet is RTL-aware: WordPress swaps in the RTL variant under right-to-left locales.

Customer Usage, Step by Step

Viewing Your Balance and Totals

Log in to your account on the store.
Open the wallet tab in My Account.
Your current balance appears near the top of the page, with the three stat cards (Total earned, Total spent, Orders paid) directly below it.

Adding Funds (Top-Up)

On the wallet dashboard, click Add Funds in the action bar.
The page jumps to the quick top-up form lower down. Enter the amount you want to add.
Complete the top-up. On success, your balance updates and the credit appears in the transaction history. Top-ups count toward your Total earned figure.

Reviewing Transaction History

Scroll to the Transaction history section.
To narrow the list, choose a Type, set a From and/or To date, or enter a Search term, then click Filter.
Use the Next and Previous links to move between pages. The page size is 10 rows.
To clear the filters and return to the full history, click Reset.

Printing a Statement

Apply any history filters you want the statement to cover. The Statement link carries the active filter.
Click Statement in the action bar.
The printable statement opens. Use your browser print dialog to print or choose Save as PDF.

Redeeming a Code

Find the Redeem a code field on the dashboard (or use the Redeem a code link in the in-page nav).
Enter your redemption code and submit it.
On success, the credit is added to your balance and appears in the transaction history. See Redemption Codes for details.