如何在 WooCommerce 缺貨時隱藏價格與加入購物車按鈕

在經營電商網站時，遇到商品缺貨的情況是再正常不過的事。然而，若在缺貨時，網站仍然顯示價格或加入購物車按鈕，可能會導致消費者混淆或增加客服負擔。因此，本文將介紹如何透過 WooCommerce 自訂程式碼，在商品缺貨時隱藏價格與加入購物車按鈕。

以下教學將包含程式碼範例以及詳細的運作原理解釋，適合有基本 WordPress 知識的使用者。

文章目錄

實作目的

當 WooCommerce 商品缺貨時：

隱藏商品價格。
隱藏加入購物車按鈕。

運作原理

這個功能主要透過 WordPress 的 Action 與 Filter 系統運作，搭配 WooCommerce 的 API：

add_action()：新增動作以修改 WooCommerce 預設的商品頁面設計。
add_filter()：過濾價格顯示邏輯，根據庫存狀態動態調整。

當商品缺貨時，程式碼會移除 WooCommerce 預設顯示價格與加入購物車按鈕的動作。這些操作都是基於 WooCommerce 提供的鉤子（Hooks）實現。

程式碼範例

將以下程式碼加入 WordPress 佈景主題的 functions.php 檔案，或使用外掛如 Code Snippet 實現：

add_action('woocommerce_single_product_summary', 'hide_elements_and_price_when_out_of_stock', 1);
add_filter('woocommerce_get_price_html', 'hide_price_on_archive_and_single', 10, 2);

function hide_elements_and_price_when_out_of_stock() {
    global $product;

    // 檢查商品是否缺貨
    if (!$product->is_in_stock()) {
        // 隱藏價格
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
        
        // 隱藏加入購物車按鈕
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
    }
}

function hide_price_on_archive_and_single($price, $product) {
    // 檢查商品是否缺貨
    if (!$product->is_in_stock()) {
        return ''; // 返回空字串以隱藏價格
    }
    return $price; // 商品有庫存時顯示原價格
}

程式碼解釋

hide_elements_and_price_when_out_of_stock()
- 使用 global $product 獲取當前商品資訊。
- 檢查是否缺貨，若缺貨則透過 remove_action() 移除顯示價格和加入購物車按鈕的預設動作。
hide_price_on_archive_and_single()
- 使用 add_filter() 過濾價格顯示的 HTML。
- 若商品缺貨，直接返回空字串，隱藏價格資訊。

功能測試與注意事項

測試建議

庫存商品：確認價格與加入購物車按鈕顯示正常。
缺貨商品：檢查是否正確隱藏價格與加入購物車按鈕。

注意事項

若您的網站使用自訂佈景主題，請確認程式碼中的鉤子名稱是否與 WooCommerce 預設一致。
測試前務必備份網站資料，避免程式碼錯誤影響網站運作。

透過以上程式碼，您可以輕鬆實現 WooCommerce 商品缺貨時自動隱藏價格與加入購物車按鈕的功能。不僅讓網站操作更加直覺，也能減少消費者對缺貨商品的混淆。若您對此有任何疑問，歡迎聯絡我們。

實用文章