如何刪除 WooCommerce 側邊欄

已發表: 2023-06-17

你想刪除 WooCommerce 側邊欄嗎？如果您想進一步調整您的 WooCommerce 商店並進行更改，修改側邊欄選項將是最好的嘗試之一。如果您不知道如何正確操作，請繼續閱讀本文。

在這裡，我們將向您展示可用於從安裝中刪除側邊欄的分步過程。

在繼續之前，讓我們看看側邊欄是什麼。

什麼是邊欄？

側邊欄是網頁一側的窄欄，通常包含與頁面內容相關的附加信息或功能。在 WooCommerce 的上下文中，側邊欄通常顯示產品類別、購物車信息以及與在線商店相關的其他相關元素。

WooCommerce 側邊欄旨在幫助客戶瀏覽在線商店並使他們的購物體驗更加人性化。通過在側邊欄顯示產品類別和其他信息，客戶可以快速找到他們想要的產品並將其添加到購物車。

雖然側邊欄對某些網站很有幫助，但對其他網站來說它們也可能會分散注意力或不必要。一些網站所有者可能更喜歡不包含側邊欄的更簡潔、簡約的設計。在這種情況下，您可以刪除 WooCommerce 側邊欄以幫助簡化網站設計並改善用戶體驗。

為什麼要刪除 WooCommerce 側邊欄

網站所有者可能選擇從其在線商店中刪除 WooCommerce 側邊欄的原因有多種：

簡化網站設計：刪除側邊欄有助於為您的網站創建更簡潔、更簡約的設計。這可以改善您網站的整體外觀，使其在視覺上更具吸引力並且更易於瀏覽。
提高頁面加載速度：側邊欄可以增加您網站上的頁面加載時間。您可以刪除側邊欄以提高頁面加載速度，從而帶來更好的用戶體驗和更高的搜索引擎排名。
專注於產品：通過刪除側邊欄中分散注意力的元素，您可以將客戶的注意力集中在產品上。這有助於提高轉化率並推動更多銷售。
創建一個更適合移動設備的網站：在屏幕較小的移動設備上導航側邊欄可能具有挑戰性。通過刪除 WooCommerce 側邊欄，您可以創建一個更適合移動設備的網站，讓客戶更容易在他們的移動設備上使用。

現在您知道為什麼刪除側邊欄是一個不錯的選擇了。接下來，讓我們看看如何完成任務。

如何刪除 WooCommerce 側邊欄？

有幾種方法可以從商店的不同位置刪除 WooCommerce 側邊欄。您可以從以下內容中刪除 WooCommerce 側邊欄：

整個商店
個別產品頁面
商店頁面
靜態頁面

我們將一一探討這些選項。但是，我們將在這些任務中處理幾行 PHP 代碼。因此，我們強烈建議您在執行任何這些任務之前對您的 WordPress 站點進行完整備份。或者，您也可以創建本地 WordPress 安裝並測試那裡的每個代碼。

事不宜遲，讓我們進入教程。

1) 從整個商店

如果您需要從整個商店中刪除側邊欄，請使用此方法。您需要做的第一件事是登錄您的 WooCommerce 商店並打開主題編輯器。

主題編輯器

默認情況下，頁面將打開 style.css 文件。現在，從右側選擇 functions.php 文件。

函數.php 文件

接下來，將此代碼添加到您的函數文件中：

 函數 disable_woo_commerce_sidebar() {
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10); 
}
add_action('init', 'disable_woo_commerce_sidebar');

添加片段後，更新文件。

更新函數.php

此代碼向 WooCommerce 產品添加到購物車部分添加了一個過濾器，該過濾器從所有 WooCommerce 頁面中刪除了側邊欄。

通過從整個商店中刪除 WooCommerce 側邊欄，您可以為您的客戶提供專注於您的產品的簡化購物體驗。

注意：除了直接編輯 functions.php 文件，您還可以使用代碼片段插件。 這樣，您可以確保您添加的自定義代碼不會在主題更新後被替換。

2) 從單個產品頁面

從單個產品頁面中刪除側邊欄是您應該學習的下一件事。為此，請打開 functions.php 文件或代碼片段插件。從現在開始，我們將開始使用代碼片段插件。接下來，複製這段代碼：

 add_action( 'wp', 'ql_remove_sidebar_product_pages' );

函數 ql_remove_sidebar_product_pages() {
如果（is_product（））{
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
}
}

將其粘貼到插件設置中並激活代碼段。

從單個產品頁面中刪除側邊欄

現在你已經完成了！

如果您查看 WooCommerce 商店中的各個產品頁面，您將不會在左側或右側看到側邊欄。如果您使用的是 Storefront WordPress 主題，則應使用以下代碼：

 add_action( 'get_header', 'ql_remove_storefront_sidebar' );

函數 ql_remove_storefront_sidebar() {
如果（is_product（））{
remove_action('storefront_sidebar', 'storefront_get_sidebar', 10);
}
}

接下來，讓我們進入最後一個主題，我們將在其中教您從整個商店檔案中刪除側邊欄。