Soleman Elementor Checkout Coupon

WordPress 外掛：在 Elementor（含 Jet Woo Builder 結帳模板）提供「結帳優惠券」小工具。訪客可輸入優惠代碼，以 AJAX 套用至目前購物車，不會誤送出訂單。

解決的問題

Jet Woo Builder 的結帳模板會把整份 Elementor 內容包在 <form class="checkout"> 內。若再放入官方或 Jet 的 Coupon Form（內部又是一個 <form class="checkout_coupon">），會形成 form 包 form（無效 HTML）。

瀏覽器通常會把「套用優惠券」按鈕當成外層結帳表單的 submit，結果是：

• 優惠代碼尚未套用
• 訂單卻已經送出

本外掛不輸出 <form>，套用按鈕使用 type="button"，並呼叫 WooCommerce 既有的 apply_coupon / remove_coupon AJAX。成功後再觸發 update_checkout，只更新結帳金額。

需求

• WordPress 6.0+
• PHP 7.4+
• WooCommerce 8.0+
• Elementor

相容 WooCommerce High-Performance Order Storage（HPOS）。

選用：Jet Woo Builder（此小工具就是為了取代其 Checkout Coupon Form）。

安裝

1. 下載此外掛資料夾，放到 wp-content/plugins/soleman-elementor-checkout-coupon/
2. 在 WordPress 後台「外掛」啟用 Soleman Elementor Checkout Coupon
3. 確認 WooCommerce 與 Elementor 已啟用

缺少依賴時，後台會顯示錯誤提示，小工具不會註冊。

使用方式

1. 用 Elementor 編輯結帳頁（Jet Woo Builder 請編輯結帳模板）
2. 若模板裡已有 Jet 的 Checkout Coupon Form，請刪除
3. 從 Soleman Checkout（或 WooCommerce）分類加入 結帳優惠券
4. 放在結帳表單內即可（本小工具刻意不是巢狀 form）
5. 更新／發布模板後，在前台結帳頁測試：輸入優惠碼按「套用」，應只更新訂單金額，不送出訂單

此外掛不會自動移除 Jet 的 Coupon Form widget，需在模板中手動替換。

小工具設定

內容

已套用的優惠金額仍會顯示在 WooCommerce 結帳訂單明細；上述開關只決定輸入區附近要不要再列出優惠碼。

樣式

• 標籤：顏色、字體、與輸入欄的間距
• 輸入欄：文字色、佔位文字色、字體、背景、邊框、圓角、內距、寬度（對齊 Elementor Form Field）
• 按鈕：對齊、字體、文字陰影、Normal／Hover（顏色、背景、陰影、邊框色、過場、懸停動畫）、邊框、圓角、內距（對齊 Elementor 原生 Button）
• 已套用優惠券（僅在內容開關開啟時出現）：文字色、字體、移除連結顏色

前台行為

• 永遠顯示輸入欄與套用按鈕（沒有「有優惠券？」折疊）
• 點按鈕或在輸入欄按 Enter：以 AJAX 套用，不會送出結帳表單
• 套用成功：清空輸入欄、顯示 WooCommerce 通知、刷新結帳金額
• 套用失敗：在小工具內顯示錯誤，訂單不會送出
• 套用過程中按鈕與輸入欄會停用，避免連點
• 若後台關閉優惠券功能，前台顯示提示而不輸出可送出的按鈕
• Elementor 編輯／預覽模式只顯示外觀，不發送 AJAX

檔案結構

soleman-elementor-checkout-coupon.php   外掛入口
includes/
  Autoloader.php
  Plugin.php
  Dependencies.php
  Assets.php
  Elementor/
    Elementor_Integration.php
    Widgets/Checkout_Coupon_Widget.php
assets/
  css/frontend.css
  js/frontend.js

授權與作者

• Author: Soleman
• Text domain: soleman-elementor-checkout-coupon

Changelog

1.0.0

• 初版：Elementor「結帳優惠券」小工具
• 以 WooCommerce AJAX 套用／移除優惠券，避免 Jet Woo Builder 結帳模板巢狀 form 誤送訂單