從 WooCommerce 主題的產品頁面中刪除側邊欄的 5 種以上方法

已發表: 2020-09-15

WooCommerce 刪除側邊欄產品頁面 您想從 WooCommerce 的產品頁面中刪除側邊欄嗎？ 如果您正在尋找解決方案，我在此快速 Woocommerce 教程中概述瞭如何逐步從產品頁面中刪除側邊欄。 它很容易理解，並且可以由每個 WordPress 用戶來實施，無論技能水平如何。 如果您想從 WordPress 站點或特定主題中刪除側邊欄，我在此處詳細說明。

WooCommerce 產品頁面側邊欄

在 WooCommerce 中，產品頁面在大多數主題中都帶有默認側邊欄，這對於許多 WooCommerce 用戶來說可能是個問題。 例如，默認的WooCommerce 主題 – Storefront帶有產品頁面側邊欄，如下圖所示：

從 WooCommerce 產品頁面中刪除側邊欄

今天我將指導您如何在產品頁面上刪除此 WooCommerce 側邊欄。 出於說明目的，我將使用 WooCommerce 店面 WordPress 主題，但這種方法適用於所有 WooCommerce 主題。

一步一步如何從產品頁面中刪除 WooCommerce 側邊欄

以下是從 WooCommerce 產品頁面中刪除側邊欄的步驟和選項：

  1. 登錄您的 WooCommerce 網站並打開主題編輯器和 functions.php 文件
  2. 您還可以使用託管公司的 FTP 或 CPanel將代碼片段添加到特定主題的 functions.php文件中。
  3. 將包含刪除操作掛鉤的代碼片段添加到“ wp” ，該掛鉤掛鉤woocommerce_sidebar事件，該事件負責在 WooCommerce 主題中添加側邊欄操作。
  4. 對於店面 WooCommerce 主題，有一個特殊的鉤子 storefront_sidebar ，您應該使用它來從產品頁面中刪除 WooCommerce 側邊欄。
  5. 您還可以使用條件標籤 is_product 來檢查您是否在產品頁面上，然後才能從 WooCommerce 中的產品頁面中刪除側邊欄。
  6. 在 functions.php 和 update 中添加此代碼片段，然後在前端訪問您的 WooCommerce 產品頁面以查看更改是否有效。
  7. 您可以用來從產品頁面刪除側邊欄的另一個解決方案是設置一個全角自定義帖子模板，這篇文章中清楚地解釋瞭如何從 WordPress 中刪除側邊欄對於這種情況，您需要一個支持自定義帖子模板的 WordPress 主題，例如最好的高級 WordPress 主題之一 – DIVI

從 WooCommerce 中的產品頁面中刪除側邊欄的代碼片段

您可以使用三種方法從 WooCommerce 的產品頁面中刪除側邊欄，如上面的分步摘要中所述。

#1) 使用 WooCommerce 側邊欄將操作掛鉤刪除到“WP”

所以我們將從添加到 'wp' 事件的 remove_action 鉤子開始。 代碼應如下所示：

 add_action('wp', 'njengah_remove_sidebar_product_pages');

功能 njengah_remove_sidebar_product_pages() {

    如果 ( is_product() ) {

    remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar', 10);

   }

}

當添加到您的 functions.php 主題文件或您的自定義 WooCommerce 插件時，此代碼段將從所有產品頁面中刪除側邊欄。

怎麼運行的

此代碼片段包含一個添加到“wp”事件的操作掛鉤，其回調函數使用remove_action 掛鉤來刪除產品頁面中的所有側邊欄，因為它指定了 woocommerce_sidebar。

這是從所有 WooCommerce 產品的產品頁面中刪除側邊欄的最有效方法。

#2) 使用 is_active_sidebar() 從 WooCommerce 產品頁面中刪除側邊欄

您可以用來從 WooCommerce 中的產品頁面刪除側邊欄的另一種技術是使用is_active_sidebar WordPress 功能。 這是使用is_active_sidebar刪除 WooCommerce 側邊欄的代碼片段示例：

 /**
 * 在 WooCoomerce 的產品頁面上禁用側邊欄。
 *
 */

功能 njengah_remove_sidebar( $is_active_sidebar, $index ) {              

    if( $index !== "sidebar-1" ) {

        返回 $is_active_sidebar；

    }

    如果（！is_product（））{

        返回 $is_active_sidebar；

    }

    返回假；

}

add_filter('is_active_sidebar', 'njengah_remove_sidebar', 10, 2);

怎麼運行的

此代碼包含一個過濾器鉤子，用於檢查是否存在帶有sidebar-1索引的側邊欄，可以將其更改為匹配任何其他側邊欄 ID/名稱。

如果找到側邊欄，則返回設置為 false 以禁用側邊欄。 為了使其在產品頁面中生效，最後一部分使用is_product()來驗證我們是否在產品頁面上。

從 WooCommerce 產品頁面中刪除側邊欄

要了解與側邊欄名稱或 ID 等效的側邊欄索引的更多信息，您應該在此處閱讀 -如何在 WordPress 中添加側邊欄或此處 -如何在 WordPress 中註冊側邊欄。

#3) 使用 storefront_sidebar 操作上的 Remove Hook 從 Storefront WooCommerce 主題中刪除側邊欄

對於這個特定的片段，您可以使用它來刪除 WooCommerce 產品頁面側邊欄，因為它作用於 Storefront 主題的特定掛鉤，即 storefront_sidebar 以下代碼應刪除 Storefront 主題中的側邊欄：

 add_action('get_header', 'njengah_remove_storefront_sidebar');

功能 njengah_remove_storefront_sidebar() {

     如果 ( is_product() ) {

       remove_action('storefront_sidebar', 'storefront_get_sidebar', 10);

    }

}

怎麼運行的

這只是get_header操作的一個鉤子，回調函數有一個 remove_action，它針對特定的鉤子storefront_sidebar ，它在店面 Woocommerce 主題中添加側邊欄。

您還可以從您的特定主題文檔中找到您當前的 WooCommerce 主題是否具有這種鉤子，您現在可以在上面的代碼中替換它並且它將無縫工作。

#4) 使用自定義產品頁面模板刪除 WooCommerce 側邊欄

一些高級和免費的 WooCommerce 主題帶有用於產品頁面的自定義帖子模板，該模板設置了一個消除側邊欄的全寬頁面。

一個經典的例子是Divi 主題，如下圖所示，您只需選擇全角模板，側邊欄就會被刪除。

從 WooCommerce 產品頁面中刪除側邊欄

怎麼運行的

使用全角自定義帖子模板是本文中解釋的一種技術——如何刪除 WordPress 側邊欄

#5) 使用 CSS 從 WooCommerce 產品頁面中刪除側邊欄

您可以從產品頁面隱藏 WooCommerce 側邊欄的另一種常見且簡單的方法是使用 CSS 顯示屬性。 此類代碼的示例如下共享：

 .right-sidebar .widget-area {

       寬度：21.7391304348%；

       浮動：對；

       右邊距：0；

      顯示：無；

}

怎麼運行的

CSS display 屬性設置為 none 時會從視圖中刪除元素，另一個可用於隱藏側邊欄的 CSS 屬性是可見性。

當可見性設置為隱藏時，HTML 元素將從視圖中隱藏。 在使用此技術之前，您應該檢查主題側邊欄的類，如下所示：

從 WooCommerce 產品頁面中刪除側邊欄

WooCommerce 從產品頁麵店面主題中刪除側邊欄

#1) 添加代碼片段以刪除店面主題側邊欄

當您在店面主題的functions.php 文件中添加上面的代碼片段時，您的側邊欄應該被刪除，它應該如下圖所示：

#2) 刪除小部件從店面主題中刪除 WooCommerce

從店面主題中刪除側邊欄的另一個簡單技巧是確保沒有小部件添加到主側邊欄，如下圖所示：

從 WooCommerce 產品頁面中刪除側邊欄

包起來

本教程涵蓋了可用於從 WooCommerce 的產品頁面中刪除側邊欄的所有最佳方法。 如本文所述，您還可以採用其他方法從 WordPress 站點中刪除側邊欄–如何刪除 WordPress 側邊欄。 它還有助於了解如何在 WordPress 中添加側邊欄，特別是對於WordPress 開發人員或WooCommerce 主題開發人員。 我希望你發現這篇文章中分享的這些技巧很有用。

類似文章

  1. 如何調整 WooCommerce 產品圖像的大小
  2. 如何刪除 WooCommerce 產品圖像的縮放效果
  3. 如何在 WooCommerce 中設置特色產品
  4. 如何刪除已添加到您的購物車消息 WooCommerce
  5. 如何將刪除圖標添加到 WooCommerce 結帳頁面
  6. 如何在 WooCommerce 中更改庫存文本
  7. 如何從 WooCommerce 結帳中刪除帳單詳細信息
  8. 如何計算添加到購物車 WooCommerce 購物車計數代碼的項目
  9. 如何刪除下載菜單我的帳戶頁面 WooCommerce
  10. 如何通過 2 個簡單的選項從產品頁面 WooCommerce 中刪除類別
  11. 如何從 WordPress 頁面中刪除側邊欄或隱藏 WordPress 側邊欄
  12. 在 WooCommerce 中如何在價格前添加文本 » 在價格前添加文本
  13. 如何在 WooCommerce 中以編程方式更改產品價格
  14. 如何在 WooCommerce 中的價格後添加描述
  15. 如何在 WooCommerce 中更改繼續結帳文本
  16. 如何在 WooCommerce 中創建我的帳戶頁面
  17. 如何創建 WooCommerce 註銷按鈕
  18. 如何向 WooCommerce 產品添加類別
  19. 結帳後如何重定向 WooCommerce : 重定向到自定義感謝頁面
  20. 如何按類別顯示 WooCommerce 產品