重點整理
WooCommerce 傳統購物車頁在改商品數量後，必須按「更新購物車」才會重新計算總計。只要在主題的 functions.php 加入一段掛在 woocommerce_after_cart 的 jQuery 程式碼，數量變更時就會自動更新金額。
WooCommerce 購物車教學 – WooCommerce 購物車預設的操作方式中，如果增加或減少商品數量，必須要點選更新購物車按鈕才會重新計算商品總計金額，雖然只是多了點擊按鈕動作，對使用者而言卻是讓結帳流程變得複雜，在現今電商網站競爭激烈的狀態下，我們更希望的是提供一個自動化的操作流程，提供更好的網站購物體驗，因此在本篇教學中，將分享一個簡單的 jQuery 函數，讓購物車中的商品數量變更時會同步更新總計金額。
變更商品數量時自動更新總計金額
第一步：購物車預設的操作是變更數量後需要更新購物車。
第二步：在主題編輯器中的 function.php 加入以下函數，設定在 woocommerce_after_cart hook 的位置觸發。
第三步：加入完成後只要變更商品數量就會重新計算總計金額。
新版購物車區塊還需要這段程式碼嗎？
不需要。WooCommerce 近年把購物車、結帳頁改為區塊版，新安裝的網站預設就是區塊購物車，修改數量時會自動重新計算小計與總計，畫面上也沒有「更新購物車」按鈕。
本文的程式碼是掛在 woocommerce_after_cart hook，這個 hook 只在傳統短代碼購物車頁輸出，所以在區塊版購物車上不會有作用，也不會造成錯誤。若網站是舊版升級上來、購物車頁仍是短代碼，這段程式碼才派得上用場。
加入程式碼前要準備什麼？
這段程式碼要寫進主題的 functions.php，建議依下列順序操作：
- 建立或使用子主題，避免父主題更新時程式碼被覆蓋。
- 備份原本的 functions.php，並確認可以用 FTP 或主機檔案管理員修改檔案。
- 貼在檔案最後面，用純文字編輯器貼上，避免夾帶全形符號。
- 清除快取後測試：加入兩樣商品，分別增加、減少數量，確認金額會即時更新，且不會重複送出更新。
不熟悉檔案操作的話，也可以用程式碼片段外掛加入，出問題時直接停用該片段即可。
常見問題
WooCommerce 購物車改數量後為什麼金額沒有變？
使用傳統短代碼購物車頁時，WooCommerce 預設要按「更新購物車」才會重新計算金額。加入本文的 jQuery 程式碼後，數量一變更就會自動觸發更新；若用的是新版購物車區塊，數量改變時本來就會自動重算。
怎麼知道我的購物車是區塊版還是短代碼版？
到後台編輯購物車頁面，如果內容只有 woocommerce_cart 短代碼（外面加中括號），就是傳統版；如果看到「購物車」區塊與可編輯的區塊內容，就是區塊版。本文的程式碼只適用傳統版購物車。
加了程式碼還是要按更新按鈕怎麼辦？
先清除網站與瀏覽器快取，再用瀏覽器開發者工具的 Console 檢查是否有 JavaScript 錯誤。常見原因是佈景主題改寫了購物車範本、按鈕名稱不同，或程式碼放在沒有啟用的主題 functions.php 中。