Checkout Box & Cart Redemption Display

When the Points Discount at Checkout feature is enabled, customers can redeem points for a discount directly in the cart and checkout. The appearance of this redemption interface is fully customisable under Points & Rewards → Settings → Checkout Box.

What the Checkout Box Shows #

The checkout box displays the customer’s current points balance and a control to apply some or all of those points as a monetary discount on their order. It appears automatically in the cart and checkout totals areas.

Customisation Options #

• Theme Style – Choose a light or dark visual style for the box to match your store.
• Colours – Customise the box’s accent and background colours.
• Button Text – Customise the label of the “Add Discount to Cart” button.
• Points Summary Tooltip – Show a tooltip explaining the points-to-currency conversion.
• Confetti Animation – Optionally trigger a celebratory confetti animation when a customer applies their points discount.

Classic vs. Block Checkout #

The redemption interface supports both the classic WooCommerce cart/checkout shortcodes and the newer WooCommerce Blocks (Cart and Checkout blocks). The plugin detects which checkout type your store uses and renders the appropriate interface.

Placing the Box Manually #

If you want to place the redemption interface somewhere other than the default location, you can use these shortcodes (see the Shortcodes Reference for details):

• [spar_checkout_rewards_box] – The full rewards box.
• [spar_redeem_discount_tool] – The full redemption tool.
• [spar_redeem_discount_compact] – A compact redemption row for totals areas.

Enabling Redemption #

The checkout box only appears when Points Discount at Checkout is enabled under Settings → Rewards (Redeem) and the customer has a redeemable balance. See the “Points Discount at Checkout” doc for details on the conversion rate and earning interactions.