Skip to main content

Apply Giftcards Code

  1. Home
  2. Docs
  3. Gift Card for WooCommerce
  4. Block Elements
  5. Apply Giftcards Code

Apply Giftcards Code

The Apply Giftcards Code block allows customers to redeem their gift card codes directly on the Cart or Checkout page. Once applied, the gift card balance is validated, and the discount is applied to the order total.


🎯 Block Details

  • Block Name: Gift Card Apply
  • Icon: 💰 money-alt
  • Description: Gift card apply block for cart & checkout page.

🚀 Features

  • Input field for customers to enter their gift card code.
  • Button to apply the code and update totals instantly.
  • Works with both Cart and Checkout pages.
  • Customizable padding and background color in block settings.
  • Secure validation of gift card codes via AJAX.
  • Integrated with WooCommerce totals to adjust discounts automatically.

🛠️ How to Use

  1. Add the Block
    • In the WordPress editor, search for “Gift Card Apply”.
    • Insert it into your Cart or Checkout page.
  2. Customize Settings
    • Adjust padding and background color from the block sidebar.
  3. Save & Publish
    • Once placed, the block will appear on the front end.
  4. Customer Interaction
    • Customers enter their gift card code.
    • Click Apply Gift Card.
    • The system validates the code and updates the cart/checkout totals.

🖼️ Example Preview

Frontend Output Example:

[ Gift Card Code Input Field ] [ Apply Button ]
-----------------------------------------------
Cart Total: $100
Gift Card Applied: -$25
New Total: $75

🔌 Technical Notes

  • Render: Handled via render.php to ensure compatibility with WooCommerce cart/checkout templates.
  • AJAX Handling: Uses view.js for frontend validation & applying the gift card.
  • Styling: Controlled via style-index.css.
  • Editor Styles: Controlled via index.css for a live preview in block editor.

How can we help?