如何在 WooCommerce 中隱藏添加到購物車按鈕
已發表: 2020-09-21
您是否正在尋找一種方法來隱藏 WooCommerce 中的“添加到購物車”按鈕？ 如果是，那麼您來對地方了，因為這個簡短的教程，我將為您提供解決此問題的方法。 如果您熟悉 WooCommerce，那麼您就會知道 WooCommerce 商店頁面定制會帶來更好的定制用戶體驗。 我們都知道默認版本需要一些升級才能讓您的商店看起來更好。
但是，在進行所有這些更改之前，您需要做的第一件事是安裝 WooCommerce 插件。 它是免費提供的，您可以直接在網站後端下載。
在這個簡短的教程中，我將向您展示如何在產品和商店頁面上隱藏特定產品的添加到購物車按鈕以及特定時間。
在我們了解執行此操作的詳細步驟之前，您可能想知道為什麼要隱藏特定產品的添加到購物車按鈕。 您可能想要這樣做的原因有很多，例如，如果您正在處理移動設備等電子產品，許多產品會在允許購買前幾天推出。
規格發布較早，因此許多在線商店所有者在產品可供購買之前都會提供產品的詳細規格。
這意味著店主不能在頁面上擁有“添加到購物車”按鈕，因為他們不希望人們在產品可供購買之前購買該產品。
隱藏添加到購物車按鈕 WooCommerce
說了這麼多，現在讓我們轉向解決方案。 在處理這個特定問題時，首先想到的是編輯模板文件。
這可能是一個很好的方法，但對於像手頭這樣的小定制來說，這不是一個明智的解決方案。 然後我意識到 WooCommerce 允許多個鉤子，並且在這些鉤子的幫助下，我們可以刪除價格和按鈕。 現在讓我們看看您需要遵循的步驟來實現這一目標。
a) 在 WooCommerce 中為特定產品隱藏添加到購物車按鈕的步驟
對於這個解決方案，我們將使用一個名為“woocommerce_is_purchasable”的過濾器，您可以在其中檢查產品是否可購買。
此外，我們將使用您對商店和產品頁面進行更改所需的產品 ID。 對於此示例，我將使用我在 WooCommerce 商店中擁有的產品，產品 ID 為 185，如下所示： 
以下是您需要遵循的簡單步驟：
- 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
- 從儀表板菜單中，單擊外觀菜單 > 主題編輯器菜單。 當主題編輯器頁面打開時，查找主題函數文件，我們將在其中添加將隱藏 WooCommerce 中特定產品的添加到購物車按鈕的函數。
- 將以下代碼添加到php文件中：
/**
* @snippet 隱藏 WooCommerce 中的添加到購物車按鈕
*/
add_filter('woocommerce_is_purchasable', 'woocommerce_hide_add_to_cart_button', 10, 2);
功能 woocommerce_hide_add_to_cart_button( $is_purchasable = true, $product ) {
返回 ( $product->get_id() == 185 ? false : $is_purchasable );
}- 要查看結果，只需刷新頁面，您應該會看到：
代碼如何運作
在上面的代碼中，我們檢查當前產品 ID 是否為 185。如果是該產品，則返回 false，表示該產品不可購買。 但是，如果產品 ID 不是 185，則返回 true。
這意味著該產品是可購買的。 如果產品不可購買，“加入購物車”按鈕將不會顯示在產品頁面上。
b) 在特定日期之後顯示“添加到購物車”按鈕的步驟
現在我們知道如何從商店和產品頁面隱藏“添加到購物車”按鈕，對於特定產品，讓我們看看如何在特定時間隱藏它。
這非常簡單，您只需按照以下步驟操作即可。 如果特定產品有發布日期，並且您不想進行兩次自定義，您可能需要執行此操作。
這種方法將為您節省大量時間，因為它會在後台自動完成，您無需執行任何操作。 這意味著您需要發布或發布日期，就我而言，我將在 2020 年 8 月 10 日之後顯示按鈕。
- 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
- 從儀表板菜單中，單擊外觀菜單 > 主題編輯器菜單。 當主題編輯器頁面打開時，查找主題函數文件，我們將在其中添加將在特定日期後顯示添加到購物車按鈕的函數。
- 將以下代碼添加到php文件中：
/** * @snippet 在特定日期之後顯示添加到購物車按鈕 */ add_filter('woocommerce_is_purchasable', 'woocommerce_hide_add_to_cart_button', 10, 2); 功能 woocommerce_hide_add_to_cart_button( $is_purchasable = true, $product ) { $current_date = date('Ymd'); $release_date = date('Ymd', strtotime('2020-08-10') ); if(strtotime($current_date) < strtotime($release_date) && $product->get_id() == 185) { $is_purchasable = 假； } 返回 $is_purchasable; }要查看結果，您需要刷新產品頁面，您應該會看到：
時間過去後，您應該會看到“添加到購物車”按鈕：
代碼如何運作
在上面的代碼中，我們首先檢查當前日期是否小於發布日期。 換句話說，我們只是檢查當前日期是否不是發布日期。 如果是這樣，則代碼返回 false，這意味著不會顯示“添加到購物車”按鈕。
但是，需要注意的是，本文中的所有解決方案都將在商店頁面上顯示該產品的“閱讀更多”，並帶有指向產品頁面的鏈接。 這是產品在商店頁面上的顯示方式： 
結論
在本教程中，我為您提供了詳細的系統指南，說明如何在產品頁面上隱藏 WooCommerce 中的“添加到購物車”按鈕。 在第一個示例中，我向您展示瞭如何在特定產品的產品頁面上隱藏此按鈕。 在第二個中，我演示瞭如何在特定時間隱藏 WooCommerce 中的“添加到購物車”按鈕。 這可能會派上用場，特別是如果產品有發布或發布日期。
類似文章
- 如何通過 3 個簡單的選項刪除 WooCommerce 中的相關產品
- 如何在 WooCommerce 中設置特色產品
- 如何調整 WooCommerce 產品圖像的大小
- 如何將刪除圖標添加到 WooCommerce 結帳頁面
- 如何刪除已添加到您的購物車消息 WooCommerce
- 如何在 WooCommerce 的商店頁面中隱藏所有產品
- 如何通過示例更改添加到購物車文本 WooCommerce 指南
- 如何在 WooCommerce 中重命名訂單狀態消息
- 如何使用 WooCommerce 銷售數字產品
- 如何隱藏 WooCommerce 優惠券代碼字段
- 如何從 WooCommerce 產品頁面隱藏或刪除數量字段
- 如何按類別顯示 WooCommerce 產品
- 如何在 WooCommerce 中更改庫存文本
- 如何對 WooCommerce 類別進行排序以獲得更好的用戶體驗
- 如何在 WooCommerce 中的價格後添加描述
- 如何向 WooCommerce 產品添加類別
- 如何禁用特定類別的付款方式
- 如何禁用運送到另一個地址選項
- 如何跳過購物車並重定向到結帳頁面 WooCommerce
- 如何為插件創建 WooCommerce 管理員通知 – WooCommerce 開發