The customer-facing Rewards components are rendered from PHP in the plugin. As of version 2.0.0, output is customised with hooks and CSS rather than by copying template files into your theme. Editing the plugin’s own files is not recommended, as changes are lost on update.

Template files

The Rewards dashboard is assembled from a few template partials that live in the plugin’s templates/ directory and are used internally:

• ways-to-earn.php – the “Ways to Earn” list on the Rewards dashboard.
• ways-to-redeem.php – the list of redemption options / rewards.
• redeemed-vouchers.php – a customer’s claimed (redeemed) vouchers.

These files are loaded directly from the plugin, so copies placed in your theme are not picked up. Use the hooks and CSS below to customise the output instead.

Customising with hooks

Add to, replace, or reorder dashboard content without touching template files:

• spar_before_rewards_tab( $user_id, $visible_tabs ) – output content at the top of the Rewards dashboard.
• spar_after_rewards_tab( $user_id ) – output content at the bottom of the Rewards dashboard.
• spar_rewards_visible_tabs( $visible_tabs, $user_id, $available_tabs ) – add, remove, or reorder dashboard tabs (filter).
• spar_render_tab_{key}( $user_id ) – render the body of a custom tab you added via the filter above (the {key} matches your tab key).
• spar_rewards_overview_html( $overview_html, $user_id, $points, $options ) – replace the points-overview markup (filter).
• spar_account_menu_items( $items ) and spar_rewards_menu_label( $label, $items ) – customise the My Account menu entry (filters).

For data-level changes (reward definitions, point costs, labels, and so on) see the Actions & Filters Reference.

// Add a banner to the top of the Rewards dashboard
add_action( 'spar_before_rewards_tab', function ( $user_id ) {
    echo '<div class="my-rewards-banner">Double points this weekend!</div>';
} );

// Add a custom tab, then render its contents
add_filter( 'spar_rewards_visible_tabs', function ( $tabs, $user_id, $available ) {
    $tabs['my_tab'] = array( 'label' => 'My Tab' );
    return $tabs;
}, 10, 3 );
add_action( 'spar_render_tab_my_tab', function ( $user_id ) {
    echo '<p>Custom content for user ' . esc_html( $user_id ) . '</p>';
} );

Styling with CSS

Most visual tweaks can be achieved with CSS alone. The dashboard exposes CSS custom properties you can override from your theme’s stylesheet:

Custom property	Controls
--spar-theme-color-1	Primary dashboard theme colour (headers, gradients).
--spar-theme-color-2	Secondary dashboard theme colour.
--spar-theme-accent-color	Accent colour for highlights and buttons.
--spar-rewards-color-primary	Primary colour used by the rewards UI components.
--spar-rewards-color-secondary	Secondary colour used by the rewards UI components.
--spar-redeem-text-color	Descriptive text colour inside the redemption tool.

/* In your theme or a custom CSS plugin */
.spar-rewards-dashboard {
    --spar-theme-color-1: #0b5cff;
    --spar-theme-accent-color: #00c48c;
}

Many of these colours can also be set without code from Points & Rewards › Settings › Rewards Dashboard (the Theme Colors and Dark Mode sections).