曜輝工作室的網站設計費用大概多少？

當我們將 WooCommerce 改造成 B2B 詢價系統時，最常遇到的症狀就是介面語法對不上業務流程。雖然可以透過 Loco Translate 修改靜態翻譯，但 WooCommerce 的「查看購物車」連結（.added_to_cart）是透過 AJAX 加入商品後動態產生的，這類由腳本觸發的元件往往會跳過標準的翻譯處理流程，導致頁面出現「加入詢價」按鈕旁卻彈出「查看購物車」的尷尬情況。

為什麼不能只用一般的 PHP Hook 修改？

在 WordPress 佈景主題的 functions.php 中使用 gettext 濾鏡雖然能修改大部分文字，但對於非同步加載（AJAX）生成的內容，PHP 程式碼在頁面初始化後就已經結束執行。為了確保按鈕在任何時間點出現都能被正確替換，使用 JavaScript 監聽 DOM 變化是更直接且輕量化的解法。

實作程式碼

<script>
document.addEventListener('DOMContentLoaded', function () {
    // 確認當前語言為繁體或簡體中文
    if (document.documentElement.lang.startsWith('zh')) {
        function replaceCartText() {
            const links = document.querySelectorAll('.added_to_cart.wc-forward');
            links.forEach(function (link) {
                if (link.textContent.trim() === '查看購物車') {
                    link.textContent = '查看詢價車';
                    link.setAttribute('title', '查看詢價車');
                }
            });
        }

        // 頁面加載時先執行一次
        replaceCartText();

        // 監控 DOM 是否有動態新增元件
        const observer = new MutationObserver(replaceCartText);
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }
});
</script>

邏輯拆解與設定重點

多國語言判斷：透過 document.documentElement.lang.startsWith('zh') 判斷，確保只在中文語系環境執行，避免影響英文版的 View Cart 文字。
精準選取器：鎖定 .added_to_cart.wc-forward 類別，這是 WooCommerce 標準的「已加入後出現的按鈕」選取器，不會誤傷到選單列或其他區塊。
MutationObserver 監控機制：這是本實作的核心。它會持續監聽網頁內部的節點變化，一旦偵測到使用者點擊「加入詢價」並由 AJAX 產生新按鈕時，會立即觸發取代函式。
屬性同步更新：除了 textContent 文字內容外，同時更新 title 屬性，確保滑鼠懸停時顯示的文字與按鈕一致。

實務踩坑提醒與注意事項

在實作過程中，有幾點細節建議特別注意：

效能平衡：MutationObserver 雖然強大，但過度頻繁的 DOM 掃描會影響瀏覽效能。本段 code 僅針對特定 class 進行處理，對效能影響極低。
文字對齊：link.textContent.trim() === '查看購物車' 必須與你當前網站顯示的原文完全一致。若網站安裝了自訂翻譯外掛，請務必確認該字串是否包含空格或標點符號。
快取影響：若網站有使用 WP Rocket 或 Autoptimize 等縮減（Minify）工具，請確認 JavaScript 載入順序，建議將此段腳本放在頁尾（Footer）執行。