Using Gift Cards

This walkthrough goes from a fresh install to a sold and redeemed gift card, covering what the buyer, the recipient and the store see at each step.

1. Set up codes and the email

Open WooCommerce → Gift Cards. Set a code prefix so cards are recognisable, the checkout discount label (use {code} to show which card was applied on the total), and the recipient email subject and body (use {code} and {amount}). The token buttons insert tokens at the cursor, and the live preview renders the email with a sample code and value so you can check it reads well before going live.

2. Create a gift-card product

Add a product for each value you want to sell, a $25, a $50, a $100 card. For each, set the price to the card value and tick Gift card on the General tab. Save. That product now sells a card worth its price.

3. Sell the card

A shopper buys the gift-card product like any other line item. If a per-line recipient email was captured at add-to-cart, the code goes straight to that address; otherwise it goes to the order’s billing email so it is always deliverable. Buying a quantity of two issues two separate codes.

4. Deliver the code

Codes are issued and emailed when the order reaches Completed, not on payment. At that point the plugin issues one code per unit (each worth the line total divided by quantity) and emails it with your subject and body via wp_mail. If Show codes on order is on, the codes also appear on the buyer’s order-confirmation page and in their customer order emails, each with a copy button on the page (the email version is copy-button-free).

A per-order guard means a re-completed order (for example completed → refunded → completed, or a manual re-trigger) does not re-issue codes or decrement balances a second time.

5. Redeem at checkout

The recipient enters their code in the Have a gift card? field at checkout and presses Apply (or Enter). That triggers a WooCommerce checkout recalculation: the engine looks up the code, and if it has a positive balance, adds a negative fee labelled with your checkout discount label. The amount applied is the lesser of the card balance and the order subtotal (including subtotal tax), a card never discounts more than the order is worth. When the order completes, the balance is reduced by the amount actually used.

A worked example

A customer buys a $50 card and has it emailed to a friend. The friend later places a $30 order and applies the code: the order is discounted by $30, the card’s stored balance drops to $20 on completion, and that $20 is available next time. Nothing is lost on a partial spend. Spend more than the balance and only the balance comes off; the rest is paid normally and the card reaches zero.

Accessibility and performance

The redeem field has a real <label>, an autocapitalize="characters" hint, and an aria-live="polite" feedback line whose height is reserved in CSS so applying a code does not shift the payment section (no layout shift). The only front-end script is a small vanilla-JS file (no jQuery dependency of its own) loaded defer in the footer, and only on the checkout, order-received and account “view order” pages where the markup appears. It cosmetically uppercases the input (the server re-normalises regardless) and powers the copy buttons via the Clipboard API with a selection fallback, announcing success in an aria-live region. Styles follow the theme and respect dark mode and prefers-reduced-motion.

Developer notes

The free edition exposes no merchant- or developer-facing filters, actions, shortcodes or REST routes for gift cards. To change the redeem-field markup, override the packaged template by copying templates/checkout-redeem-field.php into your own integration; to populate a per-line recipient, set the _giftcards_recipient_email cart-item/order-item meta. (giftcards/booted fires after boot, but it is an internal signal for Pro companions, not a public extension point.) A balance-check shortcode and additional hooks are part of Gift Cards Pro.

When to reach for Pro

The free edition covers selling cards, the emailed code, redemption at checkout and a stored balance with partial redemption. Gift Cards Pro adds buyer-chosen custom amounts, scheduled delivery, a balance-check shortcode, admin redemption history, custom card email designs and bulk CSV generation. See Gift Cards Pro.