Wallet Dashboard

The Wallet Dashboard is the customer-facing hub inside WooCommerce My Account where customers view their balance, review transaction history, print statements, and initiate transfers, top-ups, and money requests, all from a single screen.

Overview

When WalletPro is active, a Wallet tab is automatically added to the WooCommerce My Account area. Customers do not need to navigate away from their account to manage wallet activity. The dashboard surfaces:

• Current confirmed balance and any pending credits
• Paginated, filterable transaction ledger
• Quick-action buttons for top-up, transfer, money request, and withdrawal (whichever the merchant has enabled)
• Cashback and milestone reward progress if those programs are active
• Referral code and referral link if the referral program is enabled
• Printable monthly statement

The dashboard is rendered as a server-side WordPress template and does not require JavaScript to display the balance or transaction list, ensuring it remains functional when JavaScript is disabled. Interactive elements (top-up modal, transfer form) progressively enhance with JavaScript.

Where to Find It

Customers access the dashboard at:

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

The URL slug wallet is generated from the endpoint name WalletPro registers via woocommerce_account_menu_items. The slug can be changed under WooCommerce > WalletPro > Settings > Customer Dashboard > Dashboard endpoint slug.

The tab label defaults to Wallet and is translatable. Merchants can relabel it under WooCommerce > WalletPro > Settings > Customer Dashboard > Dashboard tab label.

Dashboard Sections

Balance Card

The balance card appears at the top of the dashboard. It displays:

• Available balance, funds immediately spendable at checkout
• Pending balance, credits that have not yet cleared (e.g., cashback in a holding period)
• Currency, shown using the store currency symbol or, in multi-currency mode, the wallet's assigned currency code

The balance figure updates in real time after any action that modifies the wallet (top-up confirmation, transfer received, etc.) without requiring a full page reload.

Quick Actions Bar

Below the balance card, a row of action buttons appears. Each button is individually enabled or disabled by the merchant. The possible actions are:

If a feature is disabled, its button does not render, it is not merely hidden. This avoids confusing customers with unavailable options.

Reward Progress (Conditional)

If Cashback Rewards or Milestone Rewards are active, a progress section appears beneath the quick actions bar. It shows:

• Cashback rate currently applied to the customer's account
• Next milestone threshold and how much spend remains to reach it
• A visual progress bar indicating distance to the next milestone

This section is omitted entirely when both reward programs are disabled.

Referral Section (Conditional)

When the referral program is enabled, a referral block appears with:

• The customer's unique referral code (copyable with one click)
• A shareable referral link
• A count of successful referrals and total referral credit earned

Transaction History

The transaction history table lists every credit and debit to the wallet in reverse chronological order. Each row contains:

Customers can filter the history by:

• Date range (from / to date pickers)
• Transaction type (all, credits only, debits only)

The table paginates at 20 rows per page by default. The page size is configurable under WooCommerce > WalletPro > Settings > Customer Dashboard > Transactions per page.

Printable Statement

A Print Statement link appears at the top-right of the transaction history section. Clicking it opens a browser print dialog targeting a print-optimized view of the currently filtered transaction set. The print stylesheet hides navigation, the quick actions bar, and WooCommerce chrome, leaving only:

• Store name and logo
• Customer name and account email
• Statement period (derived from the active date filter, or "All time" if no filter is set)
• Full transaction table
• Opening balance, closing balance, and net movement summary at the bottom

The print view is also usable as a PDF by selecting "Save as PDF" in the browser print dialog, no server-side PDF generation is required.

Merchant Configuration

All customer dashboard settings are under WooCommerce > WalletPro > Settings > Customer Dashboard.

Accessibility

The wallet dashboard is built to WCAG 2.1 AA. Specific implementation details:

• The balance card amount is wrapped in an aria-label that spells out the full value (e.g., "Available balance: forty-two dollars and fifty cents") to avoid screen readers reading raw currency symbols unpredictably
• The transaction table uses <th scope="col"> headers and aria-sort attributes on sortable columns
• Credit amounts include a visually hidden "credit" label and debits include a visually hidden "debit" label so color is not the only distinguishing cue
• All action buttons have descriptive aria-label values (e.g., "Add funds to your wallet") rather than relying solely on icon context
• Date picker inputs are native <input type="date"> elements, relying on browser-native accessibility rather than a custom widget
• The print statement link focuses correctly after the print dialog closes

Customer Usage, Step by Step

Viewing Your Balance

1. Log in to your account on the store.
2. Navigate to My Account > Wallet.
3. Your available balance appears in the balance card at the top of the page. If the merchant has enabled it, a pending balance figure appears below the main balance.

Adding Funds (Top-Up)

1. On the Wallet dashboard, click Add Funds.
2. Enter the amount you want to add. The minimum and maximum top-up amounts, if set by the merchant, are displayed below the amount field.
3. Select a payment method from the available gateways.
4. Complete payment. On success, your balance updates immediately and a confirmation entry appears at the top of the transaction history.

Reviewing Transaction History

1. Scroll down to the Transaction History section.
2. To filter by date range, enter dates in the From and To fields and click Apply.
3. To filter by type, select Credits or Debits from the type dropdown and click Apply.
4. Use the pagination controls at the bottom to move between pages.
5. To clear filters and return to the full history, click Reset.

Printing a Statement

1. Apply any date or type filters you want the statement to cover.
2. Click Print Statement in the top-right corner of the transaction history section.
3. Your browser print dialog opens. Select a printer or choose Save as PDF.
4. Click Print or Save.

Developer Customization

Changing the Tab Position

WalletPro registers the Wallet tab with a menu order of 30 by default (after Orders and Downloads). Use the walletpro_account_menu_order filter to adjust this:

// Move Wallet tab to appear second in My Account navigation
add_filter( 'walletpro_account_menu_order', function( $order ) {
    return 15;
} );

Adding Content to the Dashboard

Two action hooks let you inject content before or after the main dashboard sections:

// Add a banner above the balance card
add_action( 'walletpro_before_dashboard', function() {
    echo '<p class="wallet-promo">Earn double cashback this weekend!</p>';
} );

// Add content below the transaction table
add_action( 'walletpro_after_dashboard', function() {
    echo '<p>Questions? <a href="/contact.html">Contact support</a></p>';
} );

Overriding the Dashboard Template

Copy the template from the plugin to your theme and modify it:

# Source path inside the plugin
wp-content/plugins/walletpro-for-woocommerce/templates/myaccount/wallet-dashboard.php

# Destination in your theme (WooCommerce template override convention)
wp-content/themes/your-theme/woocommerce/myaccount/wallet-dashboard.php

WalletPro follows the same template override resolution WooCommerce uses: if the file exists in the active theme under woocommerce/myaccount/, that file is loaded instead of the plugin's copy. Child themes are checked before parent themes.

Filtering Transaction History Data

Use walletpro_dashboard_transactions_query_args to modify the query that fetches dashboard transactions before they render:

add_filter( 'walletpro_dashboard_transactions_query_args', function( $args, $customer_id ) {
    // Exclude internal system entries from the customer-facing view
    $args['exclude_types'] = [ 'system_adjustment' ];
    return $args;
}, 10, 2 );