Template Overrides

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 ) und 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:

/* 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 (Dashboard Customisation and theme colour options).