100 多個提示、技巧和片段終極 WooCommerce 隱藏指南

已發表: 2021-04-24

WooCommerce 隱藏指南 WooCommerce 得到 WordPress 社區中超過 500 萬個活躍安裝的支持,並且這個數字每天都在持續增長。 借助所有用戶數據,WooCommerce 可以獲得足夠的反饋,從而顯著改善用戶的需求。

毫無疑問,WooCommerce 不能一時興起做出改變。 這是因為您需要考慮許多因素,特別是如果您有一個複雜的網站。 這意味著微小的變化可能會導致您在前端看到的內容髮生顯著差異,最壞的情況下,您甚至可能會造成嚴重的負面客戶體驗。 這就是我決定創建Ultimate WooCommerce Hide Guide的原因。

WooCommerce 終極隱藏指南

在這篇文章中,您將學習如何在您的 WooCommerce 商店中隱藏某些元素。 重要的是要注意 WooCommerce 帶來的靈活性被低估了。 但是,您需要具備技能和經驗才能使用 WordPress/WooCommerce 網站完成很多您想做的事情。 本終極指南將確保您能夠隱藏任何元素而不會破壞您的網站。

在我們開始之前,請確保您始終準備好備份,因為更新和添加特性和功能到您的 WordPress 網站需要很多關注。 這只是一個公平的警告。 最大的缺點是一旦開發者更新主題,以這種方式對主題所做的任何修改都會丟失。

克服這個問題的最好方法是使用子主題。 子主題允許您在不觸及任何原始主題文件的情況下對網站進行任意數量的更改。 子主題完全取決於其父主題的工作。 如果沒有它的父主題,它就不會做任何事情,甚至不能被激活。 您可以在此處了解有關創建子主題的更多信息。

話雖如此,讓我們看看如何在 WooCommerce 商店頁面中隱藏不同的元素,例如商店頁面、單一產品頁面、我的帳戶頁面、主頁、結帳頁面和購物車頁面。

WooCommerce 隱藏商店頁面

在本節中,您將學習如何在 Shop 頁面上隱藏不同的元素。 商店頁面是您展示產品的地方,因此它是您商店中最重要的頁面之一。 這就是為什麼它應該有一個有吸引力和用戶友好的設計。

但是,商店頁面是您商店的預設計組件,沒有內置工具來更改其外觀。 這就是為什麼我們將使用自定義代碼片段來隱藏元素。

WooCommerce 產品可見性

在某些情況下,您可能需要從 WooCommerce 商店中隱藏產品。 其中一些包括:

  1. 如果產品僅對某些客戶可用,則需要對公眾隱藏這些產品。
  2. 如果產品不再銷售,但將來可能會再次銷售。
  3. 如果您提供基於服務的產品,則需要將它們手動添加到銷售代表報價中。

還有許多其他情況,但這些情況很突出。 首先,我將分享如何使用內置的 WooCommerce 和 WordPress 功能從前端隱藏單個 WooCommerce 產品。 我還將分享如何從 WooCommerce 購物車、結帳、訂單和電子郵件中隱藏隱藏的產品。 您可以在此處了解有關產品可見性的更多信息。

隱藏 WooCommerce 產品(單個產品)的步驟

  1. 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板
  2. 從儀表板菜單中,單擊產品並選擇您想從網站隱藏的產品。 點擊產品標題,進入編輯頁面,如下圖:
  3. 在右側,您將看到熟悉的“發布”元框。 它允許您設置發布選項並發布您的帖子、產品或頁面。 那裡有一個名為“目錄可見性”的選項。
  4. 單擊它旁邊的編輯鏈接。 您將在前端看到產品可見性的選項列表。 點擊產品標題
  5. 選擇隱藏選項設置隱藏產品
  6. 單擊更新按鈕,該產品將從您的 WooCommerce 商店的前端完全消失。

重要的是要注意,如果“以編程方式”將隱藏的產品添加到購物車中,它們就會出現在購物車上。

從 WooCommerce 購物車、結帳、訂單和電子郵件中隱藏隱藏產品的步驟

如果您想從 WooCommerce 購物車、結帳、訂單和電子郵件中隱藏隱藏的產品,您應該考慮在您的子主題 functions.php 文件中添加以下代碼。

 /**

  * 隱藏購物車、結帳、訂單中的隱藏產品 - WooCommerce

   */

   add_filter('woocommerce_cart_item_visible', 'njengah_hide_hidden_​​product_from_cart', 10, 3);

add_filter('woocommerce_widget_cart_item_visible', 'njengah_hide_hidden_​​product_from_cart', 10, 3);
add_filter('woocommerce_checkout_cart_item_visible', 'njengah_hide_hidden_​​product_from_cart', 10, 3);

add_filter('woocommerce_order_item_visible', 'njengah_hide_hidden_​​product_from_order_woo333', 10, 2);
   功能njengah_hide_hidden_​​product_from_cart($可見,$cart_item,$cart_item_key){
    $product = apply_filters('woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key);

    if ( $product->get_catalog_visibility() == 'hidden' ) {
        $可見=假;
     }
     返回$可見;

 }

   功能 njengah_hide_hidden_​​product_from_order_woo333( $visible, $order_item ) {

    $product = $order_item->get_product();

    if ( $product->get_catalog_visibility() == 'hidden' ) {

         $可見=假;
     }
     返回$可見;
 }

請記住保存您所做的更改。

WooCommerce 隱藏空類別

WooCommerce 允許您將產品分類為不同的類別和標籤。 這意味著即使是空的類別也會顯示在商店和主頁上。 您可能希望隱藏空類別,以便用戶找不到它們。

但是,WooCommerce 沒有內置選項來隱藏主頁或檔案中的類別。 即使它是空的,它也會顯示類別。 如果您是一位經驗豐富的 WordPress 開發人員,隱藏一個空類別是一件容易的事。

我們將使用 PHP 代碼片段來隱藏空類別。 但是,您也可以使用 CSS,但這會收到搜索引擎的負面評價,這會損害您的 SEO。 您可以在此處了解如何隱藏空類別。

從 WooCommerce 中的類別小部件隱藏空類別的步驟

以下是您應該遵循的步驟:

  1. 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
  2. 首先,我們需要創建一些類別並分配產品。 為此,請單擊產品 > 類別。 您可以從此處分配類別。 您已經從下面的屏幕截圖中看到,我已將 5 種產品分配到汽車零件類別,將 4 種產品分配給 Njengah Tech。 第一類是空的。 產品類別
  3. 或者,您也可以從產品添加/編輯屏幕為產品分配類別,如下所示: 分配類別
  4. 下一步是將類別小部件添加到側邊欄或您想要 WooCommerce 商店的任何其他區域。 為此,請轉到外觀 > 小部件,將 WooCommerce 產品類別小部件拖放到主側邊欄區域,如下所示: 添加小部件
  5. 如果刷新前端,您將看到列出的所有類別: 產品類別側邊欄
  6. 要隱藏或刪除此處列出的空類別,請在主題的 functions.php 文件末尾添加以下代碼行。
 功能 woo_hide_product_categories_widget( $list_args ){

            $list_args['hide_empty'] = 1;

            返回 $list_args;

}

add_filter('woocommerce_product_categories_widget_args','woo_hide_product_categories_widget')
  1. 把上面的代碼放好後,記得保存文件。 轉到前端並刷新頁面。 您會注意到空類別已從列表中刪除。 隱藏的空類別

為註銷的用戶隱藏價格並添加到購物車的步驟

下圖顯示了默認情況下價格和“添加到購物車”按鈕的顯示方式,即使對於已註銷的用戶也是如此: WooCommerce 價格並添加到購物車按鈕

如果您想為退出的用戶隱藏價格和添加到購物車按鈕,您應該考慮在您的子主題 functions.php 文件中添加以下代碼:

 /**

  * 為已註銷的用戶隱藏價格並添加到購物車

 */

 add_action('init', 'njengah_hide_price_add_cart_not_logged_in');

 功能 njengah_hide_price_add_cart_not_logged_in() { 

    如果(!is_user_logged_in()){    

       remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);

       remove_action('woocommerce_single_product_summary','woocommerce_template_single_add_to_cart',30);

       remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);

       remove_action('woocommerce_after_shop_loop_item_title','woocommerce_template_loop_price',10); 

       add_action('woocommerce_single_product_summary','njengah_print_login_to_see',31);

       add_action('woocommerce_after_shop_loop_item','njengah_print_login_to_see',11);

    }

 }

 功能 njengah_print_login_to_see() {

    echo '<a href="' . get_permalink(wc_get_page_id('myaccount')) . '">' . __('登錄查看價格', 'theme_name') . '</a>';

 }

請記住保存更改。

這將是前端的結果: WooCommerce 為已註銷的用戶隱藏價格並添加到購物車按鈕

您可以從價格字段中刪除該數字,這意味著該產品將不再有價格,因此,添加到購物車按鈕。

或者,您可以編寫一個文件管理器。 此過濾器將檢測目標產品的產品 id 並返回 false。 這將刪除“添加到購物車”按鈕。

 /**

* 隱藏 ID = 10 和可變產品的按鈕

 */

 add_filter('woocommerce_loop_add_to_cart_link', function($add_to_cart_html, $product) {

 if( $product->get_id() == 604 || $product->is_type( '變量' ) ) {

 返回 '​​';

 }

 返回 $add_to_cart_html;

 }, 10, 2);

請記住添加正確的產品 ID。 這是結果: 刪除特定產品的添加到購物車按鈕

WooCommerce 隱藏缺貨產品

WooCommerce 為用戶提供了出色的庫存管理系統,可幫助在盡可能短的時間內建立電子商務網站。 電子商務中庫存管理的最重要要求之一是隱藏缺貨產品的選項。 幸運的是,WooCommerce 提供了一個開箱即用的解決方案,可以在設置中隱藏缺貨產品。 您可以在此處了解有關添加產品的更多信息。

在單個產品中隱藏缺貨產品的步驟

  1. 轉到 WordPress 儀表板中的 WooCommerce -> 設置子菜單。
  2. 單擊產品選項卡 > 庫存子選項卡。
  3. 檢查隱藏缺貨產品的“缺貨可見性”選項。

導航到 WooCommerce 儀表板菜單並使用產品選項卡單擊庫存子選項卡以查看隱藏缺貨產品的選項,如下圖所示:

選中此選項並保存設置,您將成功從目錄中隱藏缺貨產品。

或者,您可以在 functions.php 文件中添加自定義 PHP 腳本。 您可以添加一個掛鉤pre_get_posts的操作掛鉤,並且回調函數應該具有使用分類查詢隱藏缺貨產品的邏輯。 下面是一個代碼片段示例,可以完美地隱藏缺貨產品:

 <?php

add_action('pre_get_posts', 'njengah_hide_out_of_stock_products');

功能njengah_hide_out_of_stock_products($查詢){

if ( ! $query->is_main_query() || is_admin() ) {

返回;

}

if ( $outofstock_term = get_term_by( 'name', 'outofstock', 'product_visibility' ) ) {

$tax_query = (array) $query->get('tax_query');

$tax_query[] = 數組(

'分類' => 'product_visibility',

'field' => 'term_taxonomy_id',

'terms' => 數組($outofstock_term->term_taxonomy_id),

'操作員' => '不在'

);

$query->set('tax_query', $tax_query);

}

remove_action('pre_get_posts', 'njengah_hide_out_of_stock_products');

}

請記住保存更改。

WooCommerce 隱藏商店頁面中的所有產品

如果您經營的是 B2B/批發商店或會員專賣店,並且不希望所有產品都向公眾開放,那麼此解決方案將為您提供幫助。 這種對開發人員友好的解決方案涉及使用自定義 PHP 腳本。

WooCommerce 具有用於在商店頁面上隱藏特定產品的內置解決方案。 您可以在此處了解有關此解決方案的更多信息。

隱藏所有產品 WooCommerce 商店頁面的步驟

以下是您需要遵循的步驟:

  1. 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
  2. 從儀表板菜單中,單擊外觀菜單 > 主題編輯器菜單。 打開主題編輯器頁面後,查找主題功能文件以添加將添加功能以隱藏 WooCommerce 商店頁面中的所有產品的功能。
  3. 將以下代碼添加到 functions.php 文件中:
 /**

 * @snippet 刪除產品循環 @WooCommerce 商店

*/

add_action('pre_get_posts', 'njengah_remove_products_from_shop_page');

 功能 njengah_remove_products_from_shop_page( $q ) {

   if ( ! $q->is_main_query() ) 返回;

   如果(!$q->is_post_type_archive())返回;

   if ( ! is_admin() && is_shop() ) {

      $q->set('post__in', array(0));

   }

   remove_action('pre_get_posts', 'njengah_remove_products_from_shop_page');

 }
  1. 這將是結果: 刪除 WooCommerce 中的所有產品
  2. 要隱藏“未找到與您的選擇相匹配的產品”,請在 functions.php 文件的末尾添加這行代碼。
 /**

* @snippet 刪除“沒有找到與您的選擇相匹配的產品”@ WooCommerce 循環頁面

*/

remove_action('woocommerce_no_products_found', 'wc_no_products_found');
  1. 這將是結果: 刪除沒有找到與您的選擇相匹配的產品

在上面的代碼中,“ pre_get_posts ”、“ njengah_remove_products_from_shop_page ”操作將針對商店頁面。 為了隱藏產品,我創建了一個刪除產品的函數,輔以一系列循環和一個刪除操作。

WooCommerce 隱藏尾隨零

默認情況下,WooCommerce 顯示帶有尾隨零的價格。 此外,WooCommerce 沒有隱藏或禁用此功能的選項。 如果您正在尋找一種在 WooCommerce 商店中隱藏尾隨零的方法,那麼您來對地方了。 在本節中,我們將使用我為此目的準備的自定義 PHP 腳本。 如果您的主題不支持,您還可以在此處了解如何顯示尾隨零。

值得一提的是,此解決方案將從您的整個商店中刪除尾隨零。

要隱藏 WooCommerce 商店頁面中的尾隨零​​,請在 functions.php 文件的底部添加以下代碼:

 // 隱藏價格的尾隨零。

add_filter('woocommerce_price_trim_zeros', 'njengah_hide_trailing_zeros', 10, 1);

功能 njengah_hide_trailing_zeros($trim){

返回真;

}

請記住單擊文本編輯器屏幕底部的保存更改按鈕。

現在您已成功添加隱藏尾隨零所需的代碼片段。 這將是前端的結果:

如何隱藏 WooCommerce 產品數量

您可能希望刪除類別或子類別中的產品計數的原因有很多。 如果您的主題不能很好地顯示產品數量,我強烈建議您將其隱藏。

這篇文章分享瞭如何使用自定義 PHP 腳本完全隱藏類別計數。 此外,您將學習如何使用我將分享的 CSS 代碼片段來隱藏它。

您還可以使用 CSS 隱藏 WooCommerce 產品數量。 您可以在此處了解如何添加 CSS 代碼片段。

但是,重要的是要注意這些代碼片段應該添加到您的子主題 functions.php 文件中。 您還可以使用站點自定義插件,以便在更新 WordPress 主題時不會丟失更改。

默認情況下,這是 WooCommerce 在 Shop 頁面上顯示產品數量的方式:

如果您想在 WooCommerce 商店頁面上隱藏產品數量,您應該考慮在您的子主題 functions.php 文件中添加以下代碼:

 /*

 *

 * 刪除類別名稱後的產品數量

 *

 */

add_filter('woocommerce_subcategory_count_html', 'njengah_remove_category_products_count');

功能 njengah_remove_category_products_count() {

  返回;

}

請記住保存更改。 這將是前端的結果:

值得一提的是,WooCommerce 還顯示子類別的產品數量。 您可以通過在 functions.php 文件的底部添加以下代碼來隱藏產品計數:

add_filter( 'woocommerce_subcategory_count_html', '__return_false' );

此代碼將刪除子類別的產品計數。

WooCommerce 按用戶角色隱藏產品價格

作為營銷策略,您可能希望根據 WooCommerce 商店中的某些用戶角色隱藏產品價格。

但是,默認情況下,WooCommerce 沒有隱藏價格的選項。 這篇文章的重點是基於用戶角色的定價,或者缺乏角色(訪客用戶)。

這樣做的主要目的是鼓勵用戶註冊以查看價格。 如果要添加此功能,請堅持到底。 最好的部分是我將為您提供有關如何隱藏價格的分步指南。 但是,您需要具備一些技術知識。

您可以更進一步,為來賓用戶隱藏購物車和結帳價格和總計。 你可以在這裡學習如何做到這一點。

為訪客用戶隱藏價格的步驟

如果您想在 WooCommerce 商店中為來賓用戶隱藏價格,您應該考慮將以下代碼添加到主題的 functions.php 文件中:

 /**

  *根據用戶角色隱藏產品價格。

  */

 功能 njengah_hide_prices_guests( $price ) {

             如果(!is_user_logged_in()){

                         返回 '​​'; // 返回一個空字符串,不顯示價格。

            }

             返回$價格;

}

add_filter('woocommerce_get_price_html', 'njengah_hide_prices_guests'); // 隱藏產品價格

請記住保存更改。 這是前端的結果: 對客人隱藏產品

WooCommerce 隱藏類別

在本節中,我將向您展示如何隱藏 WooCommerce 類別以使其不顯示在商店頁面上。 WooCommerce 允許您決定您希望您的產品如何在商店頁面上顯示。 您可以在此處了解如何顯示類別。

由於各種原因,您可能不想在主頁上顯示某些類別。 在此示例中,我將刪除“附件”類別。 我們可以通過為該類別提供正確的名稱或將其隱藏而不被列出來做到這一點。

這是類別在前端的顯示方式: 顯示類別

如果你想隱藏一個類別,你應該考慮在functions.php文件的底部添加以下代碼:

 /**

  * 僅顯示所選類別的產品。

  */

 函數 get_subcategory_terms( $terms, $taxonomies, $args ) {

             $new_terms = 數組();

             $hide_category = 數組(19); // 您不想在商店頁面上顯示的類別的 ID

                          // 如果一個產品類別和商店頁面上

             if ( in_array( 'product_cat', $taxonomies ) && !is_admin() && is_shop() ) {

                 foreach ( $terms as $key => $term ) {

                         if ( ! in_array( $term->term_id, $hide_category ) ) {

                                     $new_terms[] = $term;

                         }

                 }

                 $terms = $new_terms;

             }

   返回$條款;

}

add_filter('get_terms', 'get_subcategory_terms', 10, 3);

要查看結果,請刷新頁面。 刪除類別

從上面的屏幕截圖中,您可以看到代碼刪除了“附件”類別 ID=19。 請記住添加正確的 ID,以便代碼可以工作。

如何在 WooCommerce 中隱藏沒有價格的產品

如果你想隱藏沒有價格的產品,你可以在你的functions.php或你的插件代碼中快速實現這個片段,所有沒有價格的產品都將從客戶視圖中隱藏起來。 這並不復雜。 您需要做的就是在主題函數或插件文件中添加代碼。

首先,您需要為所有將獲取產品的產品創建一個元查詢,並且在元查詢中,您將查找鍵的空值-價格,如果該值為空,您可以重置元詢問。

這個元查詢需要掛鉤這個動作 woocommerce_product_query,並且回調函數將包含顯示所有產品的邏輯,除了那些沒有價格的產品。 您可以在此處了解有關元查詢和接受的參數的更多信息。

這是代碼:

 add_action('woocommerce_product_query', 'njengah_hide_products_without_price');

 功能 njengah_hide_products_without_price($q){

   $meta_query = $q->get('meta_query');

   $meta_query[] = 數組(

      'key' => '_price',

      '價值' => '',

      '比較' => '!='

   );

   $q->set('meta_query', $meta_query);

}

這段代碼應該添加到functions.php中,您將成功隱藏所有沒有價格的產品。 正如您在代碼回調函數中看到的,元查詢的值設置為空字符串“”這是 WooCommerce 隱藏產品沒有價格邏輯的基礎。

WooCommerce 隱藏銷售徽章

WooCommerce on sale 徽章是顯示在單個產品頁面、產品檔案頁面、追加銷售、交叉銷售和相關產品上的標籤。 理想情況下,此按鈕旨在通知您的商店訪客某些產品有特價。

您可以通過添加同一產品的銷售價格和正常價格來為每個產品設置 WooCommerce 促銷徽章。 在這篇文章中,我想說明如何更改銷售徽章以及如何將其移除或完全隱藏。

根據商店的主題,打折徽章設計可能因 WooCommerce 網站而異。 默認的 WooCommerce 主題 – Storefront 帶有一個默認的普通促銷徽章,沒有任何設計,如下圖所示: woocommerce 銷售徽章

如果您想從您的 WooCommerce 商店中刪除銷售徽章,您應該考慮將以下代碼添加到您的子主題 functions.php 文件中:

 // 添加過濾器以刪除 sale_badge

  add_filter('woocommerce_sale_flash', 'njengah_remove_on_sale_badge');

  功能 njengah_remove_on_sale_badge($sale_badge){

    返回 '​​';

 }

此代碼是一個過濾器,用於檢查頁面上的銷售徽章,並在回調函數的返回語句中將其替換為空字符串。 這是結果:

隱藏woocommerce 特價徽章| 高分辨率照片| CLIPARTO刪除 woocommerce on sale 徽章

或者,您可以學習如何使用 CSS 隱藏銷售徽章並在此處更改徽章。

WooCommerce 隱藏庫存數量

您可以通過對您用於 WooCommerce 商店的主題進行與代碼相關的更改來隱藏產品上的庫存消息。 我強烈建議您對 WooCommerce 商店進行完整備份。 如果您的代碼更改出現任何問題,這可以幫助您恢復到原來的狀態。 或者,您可以使用子主題。

WooCommerce 配備了不錯的庫存控制能力。 您可以使用 WordPress 管理區域中產品編輯屏幕的“庫存”選項卡在您的商店中啟用此選項。 您可以在此處查看如何顯示庫存數量。

默認情況下,這是庫存消息在單個產品頁面上的顯示方式: 有貨留言

如果你想隱藏這個元素,你應該考慮在 functions.php 文件的底部添加以下代碼片段:

 /**

 * 隱藏產品頁面上的“有貨”消息。

 *

 * @param 字符串 $html

* @param 字符串 $text

 * @param WC_Product $product

 * @return 字符串

 */

 功能 njengah_wc_hide_in_stock_message($html,$text,$product){

 $availability = $product->get_availability();

 if ( isset( $availability['class'] ) && 'in-stock' === $availability['class'] ) {

 返回 '​​';

}

 返回 $html;

 }

 add_filter('woocommerce_stock_html', 'njengah_wc_hide_in_stock_message', 10, 3);

要查看結果,請刷新產品頁面,您將看到該消息已被刪除: 隱藏 woocommerce 股票消息

WooCommerce 隱藏產品重量

如果您銷售的是數字產品,則可能不需要顯示產品的重量和尺寸。 此外,如果您不運送產品,則無需顯示其重量。

但是,在我們開始之前,值得一提的是,除非在後端添加此信息,否則您的主題不會顯示產品的重量和尺寸。 您可以在此處了解有關添加產品重量的更多信息。 從圖中你可以看到我已經添加了權重,這是它在前端的顯示方式: 產品重量

如果要隱藏此元素,請考慮在主題的 functions.php 文件底部添加以下代碼:

 /**

* 在單個產品頁面隱藏產品的重量和尺寸。

 */

 add_filter('wc_product_enable_dimensions_display', '__return_false');

請記住保存您對此文件所做的更改。 這是前端的結果: 使用代碼刪除重量

WooCommerce 在產品頁面上隱藏 SKU、類別和標籤

如果您是 WordPress 開發人員,您會認為有一個特定的 WooCommerce 過濾器。 但是,沒有過濾器。 這意味著我們必須刪除整個“產品元”塊。 此外,您可以添加回所需的信息,例如類別。

如果您不是開發人員,請將代碼段複製粘貼到您的 functions.php 中並觀察更改。 此外,您需要了解如何顯示產品摘要並在刪除它們時再次顯示它們。 你可以在這裡學習如何做到這一點。

這是產品摘要在前端的顯示方式: 產品概要

如果要隱藏產品摘要,應考慮在主題的 functions.php 文件底部添加以下代碼:

 /**

  * 隱藏 SKU、貓、標籤@單個產品頁面 - WooCommerce

 */

  remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);

請記住保存您的更改。 這將是前端的結果: 隱藏產品摘要

WooCommerce 缺貨時隱藏價格

WooCommerce 照顧您的庫存需求。 WooCommerce 是一個優化的系統,可以節省您更新庫存所需的時間和精力。 此外,它可以靈活地進行定制以彌補其缺乏的功能。

當潛在買家看到缺貨通知或產品不可用時,他們會感到沮喪。 您可以做的一件事是隱藏缺貨產品的價格。

此外,在許多情況下,此功能是有意義的。 例如,如果您有一家 WooCommerce 會員商店,您可能希望對未註冊的訪問者隱藏您的價格。 您可以在此處了解有關隱藏價格的更多信息。

如果您想在單品頁面隱藏缺貨商品的價格,請在您的主題的functions.php文件中添加以下代碼:

 /**

  * 缺貨時隱藏價格

  */

 add_filter('woocommerce_variable_sale_price_html', 'njengah_remove_prices', 10, 2);

 add_filter('woocommerce_variable_price_html', 'njengah_remove_prices', 10, 2);

 add_filter('woocommerce_get_price_html', 'njengah_remove_prices', 10, 2);

 功能 theanand_remove_prices($price, $product) {

 如果 ( ! $product->is_in_stock()) {

 $價格='';

 }

 返回$價格;

 }

這是結果: 隱藏缺貨產品價格

WooCommerce 隱藏附加信息

當您向產品添加運輸信息(重量和尺寸)時,它們會自動添加到產品頁面上的 WooCommerce 附加信息選項卡中。

“附加信息”選項卡的模板添加了整個產品屬性的列表。 如果你做一些研究,你會發現這些屬性是通過這個函數從 product-attributes.php 模板中添加的:enable_dimensions_display()。 您可以在此處了解為什麼 PHP 解決方案優於 CSS 解決方案。

這是附加信息選項卡在 Storefront 主題中的顯示方式: 附加信息選項卡

如果你想隱藏 Additional Information 部分,你應該考慮在 functions.php 文件的底部添加以下代碼:

 /**

* 刪除附加信息選項卡@WooCommerce 單一產品頁面

*/

add_filter('woocommerce_product_tabs', 'njengah_remove_product_tabs', 9999);

功能 njengah_remove_product_tabs( $tabs ) {

未設置($tabs['additional_information']);

返回$標籤;

}

這是單個產品頁面上的結果: 刪除附加信息選項卡

WooCommerce 隱藏標籤標題

WooCommerce 具有三個不同的選項卡,並且它們具有標題。 這些選項卡是:

  • 附加信息
  • 評論
  • 描述(如果您為產品添加了描述內容,則顯示)

本節將向您展示如何在單個產品頁面上隱藏和更改描述選項卡標題的標題。 如果您想隱藏和更改附加信息和評論標籤標題,您可以在此處找到完整的解決方案。

這是描述選項卡標題在前端的顯示方式: 標籤標題

要隱藏和更改 Description 選項卡標題,您應該考慮在 functions.php 文件的末尾添加以下代碼片段:

 // 移除產品描述標題

 add_filter('woocommerce_product_description_heading', '__return_null');

 // 更改產品描述標題

 add_filter('woocommerce_product_description_heading', 'change_product_description_heading');

 功能 change_product_description_heading() {

  return __('NEW TITLE HERE', 'woocommerce');

 }

這是前端的結果: 隱藏和更改描述標題

WooCommerce 隱藏 SKU

WooCommerce 允許您在後端的產品設置頁面上為任何產品添加 SKU。 本部分將學習如何在管理部分完全隱藏產品 SKU。 但是,如果您的商店保留 SKU 進行管理,但您不想在管理區域禁用它,您可以在此處了解如何執行此操作。

這是 SKU 在產品頁面上的顯示方式: SKU在前端

如果您想完全隱藏在管理區域中的 SKU,請在主題的 functions.php 文件底部添加以下自定義 PHP 腳本:

add_filter( 'wc_product_sku_enabled', '__return_false' );

這將是結果: 隱藏 WooCommerce SKU在管理員中禁用 SKU

請記住,此解決方案會從您的整個 WooCommerce 商店中刪除 SKU。

如何在 WooCommerce 單一產品頁面中隱藏添加到購物車按鈕

在我們了解執行此操作的詳細步驟之前,您可能想知道為什麼要隱藏特定產品的添加到購物車按鈕。 您可能想要這樣做的原因有很多,例如,如果您正在處理諸如移動設備之類的電子產品,許多產品會在允許購買前幾天推出。

規格發布較早,因此許多網店老闆在產品上架之前都會給出產品的詳細規格。

這意味著店主不能在頁面上擁有“添加到購物車”按鈕,因為他們不希望人們在產品可供購買之前購買該產品。

或者,您可以決定在特定時期隱藏特定產品的購物車按鈕。 您可以在此處了解如何實現此功能。

這是添加到購物車按鈕在單個產品頁面上的顯示方式: 產品 ID 185 的默認外觀

如果您想在 WooCommerce 中為特定產品隱藏“添加到購物車”按鈕,請在 functions.php 文件的底部添加以下代碼。 請記住添加正確的產品 ID:

 /**

  * @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 );

 }

這是結果: 沒有添加到購物車按鈕的產品

WooCommerce 在單個產品頁面庫上隱藏特色圖片

WooCommerce 使用特色圖像在產品存檔頁面(如商店頁面、主頁、類別頁面、產品搜索結果頁面等)中表示產品。WooCommerce 在產品圖片庫中的產品頁面縮略圖上使用特色圖像。

但是,您可能不想在產品圖片庫中包含特色圖片。 在這篇文章中,您將看到如何很容易地從單個產品單頁的產品圖片庫中隱藏 WooCommerce 產品特色圖片。 如果您不知道如何添加產品庫,可以在此處了解如何操作。

這是圖像在前端的顯示方式: 產品庫前端

從屏幕截圖中,您可以看到特色圖像重複了兩次。

要隱藏特色圖像,您應該考慮在 functions.php 文件的底部添加以下代碼:

 /**

 * 如果有產品庫,則將特色圖片排除在產品庫中。

 *

 * @param array $html 要為產品庫輸出的 HTML 數組。

 * @param array $attachment_id 每個圖像變量的 ID。

 */

功能 njengah_woocommerce_remove_featured_image( $html, $attachment_id ) {

            全球 $post, $product;

            // 獲取 ID。

            $attachment_ids = $product->get_gallery_image_ids();

            // 如果沒有,請繼續並提前返回 - 將特色圖片包含在圖庫中。

            如果(!$attachment_ids){

                        返回 $html;

            }

            // 尋找特色圖片。

            $featured_image = get_post_thumbnail_id($post->ID);

            // 如果有,則將其從圖庫中排除。

            if ( is_product() && $attachment_id === $featured_image ) {

                        $html = '';

            }

            返回 $html;

}

add_filter('woocommerce_single_product_image_thumbnail_html', 'njengah_woocommerce_remove_featured_image', 10, 2);

這是結果: 在產品庫中隱藏特色圖片

從產品頁面隱藏 WooCommerce 產品數量字段

在本節中,您將看到如何輕鬆隱藏從單個產品頁面提交的產品數量。 我將向您展示如何為許多產品做到這一點。 但是,您可以使用自定義 PHP 或 CSS 代碼段隱藏特定產品的數量選擇器。 你可以在這裡了解更多。

這是數量選擇器在產品頁面上的顯示方式: 產品的默認數量級別

以下代碼將幫助您在產品很多時隱藏或刪除數量。 這樣做非常簡單,因為您需要將代碼複製並粘貼到 functions.php 文件中:

 /** * @desc 刪除所有產品類型 */

 功能 woo_remove_all_quantity_fields( $return, $product ) {

   返回真;

 }

 add_filter('woocommerce_is_sold_individually', 'woo_remove_all_quantity_fields', 10, 2);

這是結果: 完全刪除數量

如何隱藏 WooCommerce 中的缺貨變化

擁有數字產品將創建一個方便的地方,用戶可以訪問您的產品。 一個很好的例子是 Apple 公司創建的 iTunes Store,它提供了查找音樂的便利。 用戶也願意為這種便利付費,因為這些產品可以下載。

您需要避免用戶感到沮喪,永遠不要讓他們選擇缺貨的產品或產品變體,只是意識到他們無法購買。 默認情況下,WooCommerce 不會灰顯任何缺貨的變體。 它僅在先選擇變體後通知用戶產品缺貨。 缺貨變體的產品頁面的默認外觀如下所示: 缺貨

如果您不知道如何銷售複雜的 WooCommerce 可下載產品,您可以在此處了解如何創建和添加它們。

現在您知道如何銷售複雜的可下載產品,您需要在主題的 functions.php 文件底部添加以下代碼:

 /**

 * @snippet 禁用缺貨變化@WooCommerce Single

 */

 add_filter('woocommerce_variation_is_active', 'njengah_grey_out_variations_out_of_stock', 10, 2);

 功能 njengah_grey_out_variations_out_of_stock($is_active,$variation){

     如果 ( ! $variation->is_in_stock() ) 返回 false;

     返回$is_active;

 }

要查看結果,請刷新產品頁面,您將看到產品變體在缺貨時已被禁用: 禁用的產品變體

WooCommerce 隱藏移動元素

WooCommerce 店主需要做的最重要的事情之一就是確保他們的網站適合移動設備。 然而,這可能不像聽起來那麼簡單。 您可以擁有一個可在移動設備上運行的網站,並擁有一個專為移動設備設計的網站。 我強烈建議您確保您的網站可以在移動設備上運行。

在本節中,您將學習如何隱藏一些 WooCommerce 移動元素。

如何在 WooCommerce 中隱藏店面移動購物車圖標

Storefront 主題被稱為 WooCommerce 官方主題,響應速度非常快。 在本節中,您將了解如何隱藏移動購物車圖標。 我將使用儀表板中“外觀”下的“自定義”選項來隱藏此元素。 本部分可讓您以主題作者允許的多種方式輕鬆更改主題。 然而,訣竅只是找出要使用的 CSS。

當訪客來到您的商店時,他們會在移動屏幕底部看到一個小的菜單購物車圖標。 您可能想要隱藏此元素並將其放置在其他位置。 您可以在此處了解如何識別需要更改的元素。

這是移動購物車圖標在店面主題上的顯示方式: 移動購物車圖標

如果要刪除此圖標,應考慮在 Additional CSS 部分添加以下 CSS 代碼:

 .footer-cart-contents{

             顯示:無!重要;

 }

這是結果: 添加規則

如何從店面 WooCommerce 中隱藏移動頁腳

許多人將 Storefront 主題與 WooCommerce 一起使用,但僅用作目錄,因此客戶可以查看產品但不能購買。

在這種情況下,您可能不需要購物車和結帳頁面,因此您將它們刪除。 但是,當您在移動設備上訪問該站點時,Storefront 仍會在頁腳區域顯示一個菜單。 此菜單也將您帶到購物車頁面,您已將其刪除。 您可以在此處獲得有關如何使用 CSS 隱藏移動頁腳的詳細教程。

這是移動頁腳的顯示方式: 移動頁腳欄

如果要刪除移動頁腳,應考慮在主題的 functions.php 文件底部添加以下 CSS 代碼:

remove_action( 'storefront_footer', 'storefront_handheld_footer_bar', 999 );

要查看結果,請在移動設備上刷新站點,您會看到頁腳欄已被刪除: 刪除頁腳欄php

WooCommerce 隱藏標題

WordPress 網站的標題是出現在每個頁面和帖子上的通用元素。 考慮到其突出的位置,標題通常作為訪問者對您網站的第一印象。 您可以添加關鍵信息和號召性用語 (CTA) 關鍵信息和號召性用語 (CTA)。 這個重要的區域值得定制。 在本節中,您將學習如何隱藏頁眉上的一些元素。

如何在導航菜單中隱藏 WooCommerce 購物車

默認情況下,WooCommerce 不允許您從標題或導航中禁用 WooCommerce 購物車圖標。 有兩種方法可以在導航菜單中隱藏購物車圖標。 您可以使用 PHP 或 CSS。 CSS 解決方案要求您首先確定需要更改的元素。 你可以在這裡了解更多。

如果您使用的是 Chrome 或 Firefox,它們可以輕鬆檢查和操作 DOM 中的元素。 這些瀏覽器允許您查看網頁的整個結構,包括所有元素及其屬性。 在我們的例子中,我們想要選擇一個稱為購物車圖標的特定元素。

這是購物車圖標在標題上的顯示方式: 購物車圖標

如果要隱藏此元素,應考慮在主題的 functions.php 文件底部添加以下 PHP 代碼:

 /**

*禁用購物車圖標

*/

功能 remove_sf_actions() {

remove_action('storefront_header', 'storefront_header_cart', 60);

}

add_action('init', 'remove_sf_actions');

這是前端的結果: 沒有購物車的結果

WooCommerce 隱藏標題

對於普通的 WordPress 用戶來說,編輯主題的標題可能是一項艱鉅的任務。 但是,Storefront 主題很容易定制。 只需單擊幾下即可編輯標題格式、隱藏標題元素、更改背景、文本和鏈接顏色。 本節將與您分享刪除店面主題中標題的任何簡單方法。

首先,我們需要使用控制台識別標題及其所有元素。 之後,我將在控制台中添加一條新規則,看看它是否有效。 當我得到想要的結果時,我將通過在 Additional CSS 部分添加新規則來使更改永久化。 你可以在這裡了解更多。

如果要隱藏 Storefront 主題的標題,請在 Additional CSS 部分添加以下 CSS 代碼:

 .site-header {      

顯示:無;

}

這將是結果: 沒有標題

WooCommerce 隱藏我的帳戶頁面

自定義 WooCommerce“我的帳戶”頁面是開發人員最需要的功能之一。 此頁面對其業務的順利運行至關重要。 因此,這個頁面應該有一個簡潔的設計,讓用戶能夠充分利用帳戶管理。 您可以自定義此頁面以轉換更多銷售額或吸引客戶返回您的商店。 在本節中,我將分享如何在此頁面上隱藏元素。

這是我的帳戶頁面在前端的顯示方式: 我的帳戶頁面

WooCommerce 從我的帳戶中隱藏下載

要刪除 WooCommerce 商店中的“我的帳戶”頁面的下載菜單,您無需編寫任何代碼,因為通常會忽略簡單的設置選項。 WooCommerce 端點允許用戶創建為最常見的 WooCommerce 頁面定制的 URL 擴展。

理想情況下,此功能應該使 WooCommerce 更加靈活和可定制,以滿足廣泛的最終用戶需求。

以下是您可以從您的站點WooCommerce 設置 > 高級設置 > 端點自定義的各種 WooCommerce 端點的快速摘要。 您可以在此處了解有關 WooCommerce 端點的更多信息。

您可能希望從“我的帳戶”頁面中刪除“下載”菜單的眾多原因之一是您不銷售數字產品或可下載產品。

轉到 WooCommerce 設置將其刪除,然後轉到高級設置並查找端點部分。 在此部分下,查找下載端點,刪除文本字段的內容,然後更新設置。 刪除下載菜單 我的帳戶 WooCommerce

這將是前端的結果: 刪除下載菜單 我的帳戶 WooCommerce 已刪除

WooCommerce 隱藏儀表板

“我的帳戶”頁面非常重要,因為它將存儲您的用戶和客戶的重要信息。 此外,您的客戶可以在這裡管理他們的帳戶、添加賬單明細、地址等,以供您使用。

但是,我強烈建議您自定義此部分,以便給您的註冊用戶留下深刻印象,並讓他們放棄更多的商業機會。

您應該注意,儀表板頁面是帳戶頁面中唯一的頁面,它沒有端點。 因此,我們需要一個自定義的 PHP 腳本。

如果您想隱藏儀表板選項卡,您應該考慮在主題的 functions.php 文件底部添加以下代碼:

 /**

  * @snippet 在我的帳戶頁面上隱藏儀表板

   */

 add_filter('woocommerce_account_menu_items', 'njengah_remove_my_account_dashboard');

 功能 njengah_remove_my_account_dashboard( $menu_links ){

             未設置($menu_links['dashboard']);

             返回 $menu_links;

  }

您可以在此處了解代碼以及如何檢測儀表板頁面並重定向到訂單的工作方式。

這是結果:

如何隱藏任何選項卡我的帳戶頁面 WooCommerce

在本節中,您將學習如何使用自定義 PHP 代碼片段隱藏任何“我的帳戶”頁面選項卡。 如果您熟悉 PHP 自定義,那麼幾乎任何事情都可以通過簡單的代碼片段來實現。

您可以在此處了解有關端點的更多信息。 此外,您還可以重命名任何選項卡。

如果您想隱藏任何選項卡,您應該考慮在主題的 functions.php 文件底部添加以下代碼:

 add_filter ('woocommerce_account_menu_items', 'njengah_remove_my_account_links');

 功能 njengah_remove_my_account_links( $menu_links ){

             未設置($menu_links['edit-address']); // 地址

             //unset($menu_links['dashboard']); // 刪除儀表板

             //unset($menu_links['payment-methods']); // 刪除支付方式

             //unset($menu_links['orders']); // 刪除訂單

             //unset($menu_links['downloads']); // 禁用下載

             //unset($menu_links['edit-account']); // 刪除帳戶詳細信息選項卡

             //unset($menu_links['customer-logout']); // 刪除註銷鏈接

             返回 $menu_links;

 }

該代碼運行良好,但是當您想要刪除菜單項及其頁面時不需要任何編碼。 這是因為您可以在WooCommerce > Settings > Advanced中找到所有默認的 My Account 子頁面。 向下滾動到帳戶端點。 您只需將特定端點設置為空。

WooCommerce 隱藏管理區域

WooCommerce 管理區域是任何 WooCommerce 網站中最重要的部分之一。 您可以在管理區域查看您的報告,以使用統計數據跟踪您的表現。

在本節中,您將學習如何在 WooCommerce 網站的管理區域中隱藏不同的元素。

WooCommerce 向訪問者隱藏錯誤

過時的插件和主題大多會導致 PHP 錯誤消息。 核心文件經常會隨著 WordPress 的更新而改變,這使得部分代碼已經過時。

此外,主題和插件還可以在與不兼容的東西一起使用時顯示 PHP 警告消息。 兩個不同的插件本身可以很好地工作,但在配對時會出現問題。 這是因為並非所有開發人員在開發網站文件時都使用相同的語法。

但是,其中一些警告並不一定意味著您的網站已損壞。 對於毫無戒心的訪客來說,它們看起來並不好。 開發人員可以創建更新來修復警告,但這需要更長的時間。

本節涉及自定義 wp-config.php 文件。 我強烈建議您在對代碼進行任何更改之前創建站點的備份。 這是萬一出現問題時的預防措施。 您可以快速恢復您的網站。

在您的 wp-config.php 文件中,查找以下行:

define('WP_DEBUG', true);

但是,在某些情況下,它可能會設置為 false:

define('WP_DEBUG', false);

在這兩種情況下,您都需要將此行替換為以下代碼:

 ini_set('display_errors','Off');

ini_set('error_reporting', E_ALL );

定義('WP_DEBUG',假);

定義('WP_DEBUG_DISPLAY',假);

請記住保存您的更改並將您的 wp-config.php 文件上傳回服務器。

下一步是訪問前端,確認 PHP 錯誤、通知和警告已經消失。

如果您在網站上工作,也可以將它們轉回本地服務器或暫存區。

WooCommerce 隱藏更新通知

本節說明如何在 WooCommerce 商店中隱藏更新通知。 值得一提的是,WordPress 是一款如此精緻的軟件。 因此,在實際操作之前,您應該始終知道該做什麼。

理想情況下,最好在更新您的 WooCommerce 商店之前運行定期備份並測試 WooCommerce 的新版本。 使用正確的工具,您可以使您的 WooCommerce 網站保持最新。 但是,您可能想要隱藏更新通知。 您可以使用暫存環境來測試託管公司提供的更新。 WooCommerce 更新通知

當談到 WooCommerce 更新時,店主中有四種思想流派。

如果你想隱藏更新通知,你應該考慮在functions.php文件的底部添加以下代碼:

 /**

  * 禁用 WordPress 儀表板上的更新通知

 */

  add_action('admin_init', 'njengah_hide_update_notifications_users');

  功能 njengah_hide_update_notifications_users() {

     全局 $menu, $submenu;

     $user = wp_get_current_user();

     // 在此處輸入唯一允許的用戶名

     $allowed = array('felixmatara');

     // 隱藏所有其他用戶的 WP、插件、主題通知

     if ( $user && isset( $user->user_login ) && ! in_array( $user->user_login, $allowed ) ) {

         add_filter('pre_site_transient_update_core', 'njengah_disable_update_notifications');

         add_filter('pre_site_transient_update_plugins', 'njengah_disable_update_notifications');

         add_filter('pre_site_transient_update_themes', 'njengah_disable_update_notifications');

            // 同時刪除紅色更新計數器@側邊欄菜單項

         $menu[65][0] = '插件是最新的'; 

         $submenu['index.php'][10][0] = '更新禁用'; 

     }

 }

  功能 njengah_disable_update_notifications() {

     全局 $wp_version;

     返回(對象)數組('last_checked' => time(), 'version_checked' => $wp_version, );

 }

輸入代碼後,請記住更新 functions.php 文件。 這將隱藏其他用戶的更新通知,如下所示: 隱藏更新通知

WooCommerce 隱藏訂單狀態

由於各種原因,您可能希望隱藏一些核心訂單狀態。 但是,WooCommerce 的默認版本允許您將具有以下狀態之一的訂單標記為已完成、處理中、待付款、暫停、退款、取消或失敗。

讓我們看看如何使用代碼片段在 WooCommerce 中隱藏訂單狀態。 要檢查默認訂單狀態消息,請登錄您的 WordPress 站點,並以管理員用戶身份訪問儀表板。 然後,點擊WooCommerce > 訂單。 你會看到這個: 訂單狀態後端

值得一提的是,當您隱藏核心訂單狀態時,請確保沒有具有該狀態的產品。 此外,您應該確保您的 WooCommerce 商店不會在任何地方使用該狀態,因為它可能導致錯誤。 例如,如果您不打算在 WooCommerce 商店中進行退款,則可以隱藏退款狀態。

如果要隱藏訂單狀態,請在主題的 functions.php 文件底部添加以下代碼:

 /*

  * 移除核心訂單狀態

  * @param array $wc_statuses_arr 網站上所有訂單狀態的數組

  */

 功能 njengah_remove_order_statuses($wc_statuses_arr){

             // 加工

             if( isset( $wc_statuses_arr['wc-processing'] ) ) { // 如果存在

                         未設置($wc_statuses_arr['wc-processing']); // 從數組中刪除

             }

             // 退款

             if(isset($wc_statuses_arr['wc-refunded'])){

                         未設置($wc_statuses_arr['wc-refunded']);

             }

             // 等候接聽

             if(isset($wc_statuses_arr['wc-on-hold'])){

                         未設置($wc_statuses_arr['wc-on-hold']);

             }

             // 失敗的

             if(isset($wc_statuses_arr['wc-failed'])){

                         未設置($wc_statuses_arr['wc-failed']);

             }

             // 待付款

             if(isset($wc_statuses_arr['wc-pending'])){

                         未設置($wc_statuses_arr['wc-pending']);

             }

             // 完全的

             //if( isset( $wc_statuses_arr['wc-completed'] ) ){

             // 取消設置($wc_statuses_arr['wc-completed']);

             //}

             // 取消

             //if( isset( $wc_statuses_arr['wc-cancelled'] ) ){

             // 取消設置($wc_statuses_arr['wc-cancelled']);

             //}

             返回 $wc_statuses_arr; // 返回結果狀態

 }

 add_filter('wc_order_statuses', 'njengah_remove_order_statuses');

這是結果: 隱藏訂單狀態

您還可以添加自定義訂單狀態。

WooCommerce 向 Google 隱藏價格

在產品搜索方面,谷歌是一個強大的組織。 谷歌在產品搜索範圍內擊敗了亞馬遜。 此外,值得一提的是,許多在線購物都是從谷歌搜索開始的。 谷歌使用豐富的片段,這就是它擅長產品搜索的原因。

豐富的摘要使購物者能夠查看與他們的搜索相關的產品。 此外,他們可以從一個地方閱讀評論並比較價格。 豐富的摘要充當完整的產品百科全書。 因此,您的在線商店需要加入 Google 豐富片段的行列。

默認情況下,架構標記會在 Google 的搜索結果中顯示產品價格。 此外,還會顯示評論星級、庫存狀態和評論數量等數據。

但是,在某些情況下,您可能希望從 Google 搜索結果中隱藏 WooCommerce 產品價格。 Google 搜索引擎中的 WooCommerce 價格

要對 Google 隱藏價格,請在主題的 functions.php 文件底部添加以下代碼:

 /**

 * @snippet 對搜索引擎隱藏價格

 */

 add_filter('woocommerce_structured_data_product_offer', '__return_empty_array');

請記住保存您所做的更改。

WooCommerce 隱藏營銷中心

從 WooCommerce 4.1 開始,“分析”菜單項下方有一個“營銷”選項卡。 此部分被稱為 WooCommerce 營銷中心。 本節展示了一個推薦插件列表,以幫助店主開始營銷他們的商店。 對於任何新的 WooCommerce 店主來說,這都是一個很好的開始。 此外,您可以在此部分創建優惠券。

但是,一些店主可能想要隱藏營銷中心,因為它只建議您可以使用的最佳營銷插件。 將來,這個部分可能會增長到包含更多有用的信息,但如果你的商店不發放優惠券,它看起來很抽象,甚至可能毫無意義。

這是營銷中心在管理區域中的顯示方式: WooCommerce 營銷中心

如果要刪除此部分,則應在主題的 functions.php 文件底部添加以下代碼:

 /**

 * @snippet 隱藏 WooCommerce 營銷中心

 */

 add_filter('woocommerce_admin_features',函數($features){

     /**

      *過濾功能列表並刪除不需要的功能*

      */

     返回數組值(

         數組過濾器($特徵,函數($特徵){

             return $feature !== '營銷';

         }

  )

     );

 }

 );

請記住保存您所做的更改。

WooCommerce 隱藏客戶訂單電子郵件以獲取免費訂單

雖然製作令人印象深刻的 HTML 電子郵件本身確實是一項成就,但 WooCommerce 提供了多種選擇,因此即使是 WordPress 初學者也可以創建電子郵件。 您可以詳細了解“Vanilla”為響應客戶與商店的互動而發送給客戶的 WooCommerce 電子郵件通知。

有時您會出售免費產品以讓客戶訪問註冊會員。 這意味著您可能不想向他們發送“訂單已完成”電子郵件,因為您的電子郵件營銷軟件會執行後續工作,或者他們會在結帳時自動重定向到資源。

對於非 0 美元的訂單,您需要保留“訂單已完成”電子郵件。 但是,WooCommerce 沒有此內置功能。 我們將使用自定義 PHP 代碼片段來實現這一點:

 /**

  * @snippet 禁用免費訂單的客戶訂單電子郵件 - WooCommerce

   */

   // 要定位另一封電子郵件,您可以將過濾器更改為例如:

 // “woocommerce_email_recipient_customer_processing_order”

 add_filter('woocommerce_email_recipient_customer_completed_order', 'njengah_disable_customer_order_email_if_free', 10, 2);

 功能 njengah_disable_customer_order_email_if_free($recipient, $order) {

     $page = $_GET['page'] = isset($_GET['page']) ? $_GET['page'] : '';

     if ('wc-settings' === $page) {

         返回 $recipient;

     }

     if ( (float) $order->get_total() === '0.00' ) $recipient = '';

     返回 $recipient;

 }

請記住保存您所做的更改。

如何在店面主題 WooCommerce 中隱藏標籤

在任何 WooCommerce 商店中,都有兩個主要的分類選項:類別和標籤。 產品標籤類似於產品類別,但標籤中沒有層次結構。 這意味著沒有“子標籤”。 例如,如果您正在銷售衣服並且有許多格子印花,您可以標記為“格子”。

然而,“product_tag”分類是我們很少需要在我們的 WooCommerce 商店中使用的東西。 當您不使用它時,您可以輕鬆刪除它以保持管理界面清潔。 如果您的 WordPress 管理員雜亂無章,它會降低可用性,並且不起作用的東西甚至會使技術用戶感到困惑。

如果你去任何產品的編輯頁面,你會發現“產品標籤”元框,類似於 WordPress 的“標籤”元框。 您需要刪除它,因為它允許您從可用標籤中進行選擇並創建新標籤。

您可以使用 CSS 將其隱藏在 Screen Options 中,但這還不夠。 您可以在 functions.php 文件中添加以下 PHP 腳本來隱藏它:

 /**

* 刪除產品標籤 Metabox

 */

 add_action('admin_menu', 'njengah_hide_product_tags_metabox');

 功能 njengah_hide_product_tags_metabox() {

 remove_meta_box('tagsdiv-product_tag', 'product', 'side' );

 }

這是結果:

您還可以在此處了解如何從管理菜單中隱藏“所有產品 > 標籤”鏈接,從所有產品頁面中刪除標籤列,以及從快速編輯和批量編輯中刪除產品標籤文本區域。

如何在 WooCommerce 中隱藏沒有價格的產品

如果你想隱藏沒有價格的產品,你可以在你的functions.php或你的插件代碼中快速實現這個片段,所有沒有價格的產品都將從客戶視圖中隱藏起來。 只需在主題功能或插件文件中添加以下代碼並不復雜:

 add_action('woocommerce_product_query', 'njengah_hide_products_without_price');

功能 njengah_hide_products_without_price($q){

$meta_query = $q->get('meta_query');

$meta_query[] = 數組(

'key' => '_price',

'價值' => '',

'比較' => '!='

);

$q->set('meta_query', $meta_query);

}

這個元查詢需要掛鉤這個動作 woocommerce_product_query,並且回調函數將包含顯示所有產品的邏輯,除了那些沒有價格的產品。

如何隱藏 WooCommerce 客戶或按用戶角色的管理欄

向訂閱者、客戶和非管理員用戶隱藏 WooCommerce 中的管理欄以避免訪問 WordPress 儀表板非常重要。 WooCommerce 隱藏客戶或訂閱者的管理欄

為了隱藏管理員的管理欄,可能有一些插件也可以為 WooCommerce 提供幫助和工作。

在使用插件之前,您應該首先在 WordPress 管理儀表板中嘗試這個快速選項。 此選項也適用於 WooCommerce 網站。 沒有區別。

轉到管理員用戶配置文件設置並檢查此選項以在查看站點時為管理員隱藏管理欄。 WooCommerce 隱藏客戶或訂閱者的管理欄

取消選中此選項,保存設置,然後訪問前端查看管理欄是否已隱藏。 如下圖所示,當管理員用戶查看網站時,管理員欄將被隱藏。 WooCommerce 隱藏客戶或訂閱者的管理欄

您還可以使用 PHP 函數隱藏管理條形碼選項。 您可以進一步改進這一點並添加一個條件測試,您可以在其中允許管理員查看管理欄,而客戶不應查看它。

您可以在此處了解如何在沒有插件的情況下以編程方式隱藏 WordPress 管理欄。

WooCommerce 隱藏運費

如果您銷售實物商品,運輸是您商店成功的最重要方面之一。 這是因為它直接影響客戶體驗。

在線購物的客戶希望支付盡可能少的費用,但可以快速收到完好無損的產品。 因此,您需要有一個良好的運輸策略。

然而,由於技術和物流方面的挑戰,它是電子商務店主最具挑戰性的領域之一。 在本節中,您將學習如何在免費送貨和特定條件下隱藏 WooCommerce 送貨方式。

如何在某些條件下隱藏 WooCommerce 運輸方式

WooCommerce 是最好的電子商務解決方案之一,提供免費送貨、統一費率和本地取貨等送貨方式。 您可以根據位置為不同的運輸區域設置它們。 例如,免費送貨選項只能用於商店位置附近的郵政編碼,而統一費率選項只能用於其他送貨區域。

值得一提的是,基於位置的運輸可以通過使用插件來實現。 然而,在位置不是最重要角色的情況下,店主很難做到這一點。 一些條件可能是:

  • 如果訂單重量超過一定數量的磅或公斤,則不應提供免費送貨服務。
  • 當運輸方式可用時,它也基於該訂單的數量或價格。

出於說明目的,讓我們使用第一個條件,即如果訂單重量超過 7 公斤,則可以免費送貨。 這需要在 functions.php 文件的底部添加以下自定義 PHP 腳本:

 /**

  * 訂單重量超過 10 公斤時隱藏免費送貨。

  *

  * @param array $rates 為包找到的費率數組。

  * @return 數組

  */

 功能 njengah_hide_free_shipping_for_order_weight($rates,$package){

     $order_weight = WC()->cart->get_cart_contents_weight();

     如果 ( $order_weight > 7 ) {

         foreach( $rates as $rate_id => $rate_val ) {

             if ('free_shipping' === $rate_val->get_method_id()) {

                 未設置($rates[$rate_id]);

             }

         }

     }

     返回 $rates;

 }

 add_filter('woocommerce_package_rates', 'njengah_hide_free_shipping_for_order_weight', 100, 2);

這是結果: 有條件的運輸方式

WooCommerce 如果可以免費送貨,如何隱藏運費 WooCommerce

即使在不需要的情況下,購物車頁面上不斷增加的運輸方式及其可用性也可能會對您網站的用戶體驗產生不利影響或使買家感到困惑。 反過來,這會減少您 WooCommerce 商店的銷售額。

例如,如果提供免費送貨,您可能不想顯示其他付費送貨選項。 默認情況下,WooCommerce 會顯示與給定運輸區域匹配的所有運費,因此僅通過設置無法實現這一點。 為此,您需要 PHP。

我將向您展示如何禁用除“免費送貨”以外的所有送貨方式,以便免費送貨仍然是唯一可能的選擇。 具有多種運輸選項的購物車

在 functions.php 文件中添加以下代碼:

 /**

  * 當提供免費送貨服務時,在一個區域中隱藏一個送貨選項

 */

 add_filter('woocommerce_package_rates', 'njengah_unset_shipping_when_free_is_available_in_zone', 10, 2);

   功能 njengah_unset_shipping_when_free_is_available_in_zone($rates,$package){

      // 如果 free_shipping 可用,則僅取消設置費率

 if ( isset( $rates['free_shipping:8'] ) ) {

      未設置($rates['flat_rate:1']);

 }   

   返回 $rates;

   }

當任何免費運費可用時,通過在 functions.php 文件中添加以下代碼來取消設置所有區域的所有運費:

 /**

* 當免費送貨可用時,隱藏所有區域的所有運費

*/

add_filter('woocommerce_package_rates', 'njengah_unset_shipping_when_free_is_available_all_zones', 10, 2);

功能 njengah_unset_shipping_when_free_is_available_all_zones($rates,$package){

$all_free_rates = 數組();

foreach ( $rates as $rate_id => $rate ) {

if ('free_shipping' === $rate->method_id) {

$all_free_rates[ $rate_id ] = $rate;

休息;

}

}

如果(空($all_free_rates)){

返回 $rates;

} 別的 {

返回 $all_free_rates;

}

}

這是結果: 免運費

WooCommerce 隱藏購物車頁面

WooCommerce 購物車是一個必不可少的頁面,用戶可以在其中堆積他們想從網站上購買的東西,然後通過在線支付簡單地結帳。 它充當商店中的普通購物車。 人們可以繼續在購物車中添加他們想購買的任何東西,然後在櫃檯結賬。

讓我向您展示如何在此頁面上隱藏不同的元素。

WooCommerce 隱藏更新購物車按鈕

如果您熟悉 WooCommerce,您就會知道,如果客戶已將產品添加到他們的購物車並決定更改數量,則可以通過單擊更新購物車按鈕來反映該更改的訂單的唯一方法。

這只是您的客戶的另一個步驟,他們可能希望查看更新後的總數。 因此,需要優化此功能以節省時間。

這是更新按鈕在購物車頁面上的顯示方式: WooCommerce 更新購物車按鈕

要隱藏更新購物車按鈕,請在附加 CSS 部分添加以下 CSS:

 輸入[名稱='update_cart'] {

 顯示:無!重要;

 }

 /* 或者你可以試試這個 */

 按鈕[名稱='update_cart'] {

顯示:無!重要;

 }

這是結果: 隱藏更新購物車按鈕

您可以更進一步,通過 JQuery “單擊”按鈕,讓 WooCommerce 更新購物車總數和稅金。

WooCommerce 隱藏小計

如果您想隱藏 WooCommerce 購物車頁面中的小計行,您可以使用 CSS 或使用取消設置 cart_subtotal 值的過濾器掛鉤。 在您的主題中實施此解決方案非常容易。

小計顯示在添加其他費用(如運費)之前,因此我們有一個總計是產品所有成本的組合,如下圖所示: WooCommerce 在 WooCommerce 中隱藏小計或刪除購物車小計

如果要隱藏此部分,則應考慮在 Additional CSS 部分中添加以下 CSS 代碼:

 。購物車小計 {

       顯示:無;

 }

這是提取我們需要更改的元素的方法: WooCommerce 在 WooCommerce 中隱藏小計或刪除購物車小計

如何隱藏 WooCommerce 優惠券代碼字段

向忠實客戶提供優惠券是 WooCommerce 店主回饋社區的好方法。 通過這些優惠券,他們可以提供獎勵或折扣作為購買獎勵。 這只是 WooCommerce 店主感謝您購買他們的產品的一種方式。 優惠券字段的默認位置

您無需向客戶展示或培訓如何尋找折扣或優惠券,因為他們可能會放棄您的購物車去尋找您商店中可用的優惠券。

當用戶去尋找優惠券時,他們可能不會完成購買,因為他們可能不滿意,因為他們覺得他們錯過了折扣。

您可以使用 WooCommerce 內置選項或您應在 functions.php 文件中添加的以下自定義 PHP 腳本完全隱藏優惠券代碼:

 // 在購物車頁面隱藏優惠券字段

 功能 disable_coupon_field_on_cart( $enabled ) {

             如果 ( is_cart() ) {

                         $啟用=假;

             }

             返回$啟用;

 }

 add_filter('woocommerce_coupons_enabled', 'disable_coupon_field_on_cart');

要查看此代碼的結果,您需要訪問購物車頁面,您將看到: 禁用優惠券字段

WooCommerce 隱藏結帳頁面

結賬流程是客戶在您商店中的旅程中最重要的步驟之一。 但是,重要的是要注意,這是您必須說服購物者進行購買的最後機會。 許多客戶可能會因為此頁面而放棄您的商店。 所以這個頁面需要優化。

優化結帳頁面的一種方法是根據您的業務需求和目標受眾自定義結帳字段。 例如,如果您通常不向公司銷售產品,請刪除公司名稱字段。

在本節中,我們將引導您了解如何在結帳頁面上隱藏元素。

WooCommerce 隱藏稅標籤

如果你想刪除“ex. 發票上的訂單詳細信息中出現的稅”標籤,此部分適合您。 如果您的 WooCommerce 商店銷售不含稅的商品,則不需要通知定價不含稅,尤其是在發票包含稅項的情況下。 稅標

在美國,小計通常顯示不含稅。 稅收作為發票上的一個項目包含在內。 這意味著僅在美國境內銷售的商店通常不需要在電子郵件發票中使用此標籤。

要刪除標籤,請在 functions.php 文件的底部添加以下代碼:

 功能 njengah_change_email_tax_label( $label ) {

    $標籤='';

     返回$標籤;

 }

 add_filter('woocommerce_countries_ex_tax_or_vat','njengah_change_email_tax_label');

現在,訂單詳細信息表將僅返回不包含標籤的金額,以表明價格不含稅: 隱藏 WooCommerce 稅收標籤

如何在 WooCommerce 結帳頁面上隱藏 PayPal 圖標

您應該在商店中包含的最佳 WooCommerce 支付網關之一是 PayPal。 由於其退貨政策,許多用戶信任此網關。 因此,您需要將此付款方式添加到您的 WooCommerce 商店以增加您的轉化率。

WooCommerce PayPal 網關的缺點之一是顯示在前端的圖標。 大多數用戶經常想要擺脫它,因為它與他們的主題設計不匹配。 貝寶默認圖標

您可以通過返回一個空字符串來更改過濾器以隱藏 PayPal 圖標,如下面的代碼片段所示:

 /**

 * 隱藏 PayPal 圖標過濾器

*/

 add_filter('woocommerce_paypal_icon', 'njengah_hide_the_paypal_icon');

  功能 njengah_hide_the_paypal_icon() {

   返回 '​​';

}

或者,您可以使用 CSS 隱藏 PayPal 圖標。 您還可以在結帳頁面上更改 WooCommerce PayPal 圖標。

這是結果: 完全刪除 PayPal 圖標

WooCommerce 在結帳時隱藏公司名稱字段

您可能希望從 WooCommerce 結帳中隱藏公司名稱字段的原因有很多。 結帳頁面上的公司名稱字段

可能迫使您隱藏此字段的情況之一是向消費者而非企業銷售。 如果您擁有一家以消費者為中心的 WooCommerce 商店,那麼擁有公司名稱字段只會在您的 Checkout 中增加摩擦。 如果客戶不確定是否需要填寫,這可能會使客戶感到困惑。

要隱藏公司名稱字段,請在 functions.php 文件的底部添加以下代碼:

 /**

 * @snippet 從結帳頁面隱藏公司名稱字段

 */

 add_filter('woocommerce_checkout_fields', 'remove_company_name');

 功能刪除公司名稱($字段){

      未設置($fields['billing']['billing_company']);

      返回$字段;

 }

您可以在此處了解代碼的工作原理。

這將是前端的結果: WooCommerce 在結帳頁面上隱藏公司名稱結帳字段

WooCommerce 隱藏帳單字段

WooCommerce 為客戶添加了一個表單,默認情況下輸入他們的賬單詳細信息。 但是,在某些情況下,您可能希望刪除某些產品的部分帳單明細。 例如,您可以隱藏可下載產品的帳單字段。 結算明細

您可以使用價格為 49 美元的 WooCommerce Checkout Field Editor 之類的插件。 但是,這可能有點貴。

我們要隱藏的帳單詳細信息是:

  • 名稱
  • 公司
  • 地址
  • 城市
  • 郵政編碼
  • 狀態
  • 電話
  • 國家

要從 WooCommerce Checkout 中刪除帳單詳細信息,請在 functions.php 文件的底部添加以下代碼:

 /**

 * @snippet 如果只有虛擬產品,則簡化結帳

*/

 add_filter('woocommerce_checkout_fields','njengah_simplify_checkout_virtual');

 功能 njengah_simplify_checkout_virtual( $fields ) {

    $only_virtual = 真;

    foreach( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {

       // 檢查是否有非虛擬產品

      if ( ! $cart_item['data']->is_virtual() ) $only_virtual = false; 

   }

     如果($only_virtual){

        未設置($fields['billing']['billing_company']);

        未設置($fields['billing']['billing_address_1']);

        未設置($fields['billing']['billing_address_2']);

        未設置($fields['billing']['billing_city']);

        unset($fields['billing']['billing_postcode']);

        未設置($fields['billing']['billing_country']);

        未設置($fields['billing']['billing_state']);

        未設置($fields['billing']['billing_phone']);

        add_filter('woocommerce_enable_order_notes_field', '__return_false');

      }

     返回$字段;

 }

這是結果: 刪除帳單字段

WooCommerce 隱藏註冊

WooCommerce 允許您直接設置登錄,無論是否強制註冊和社交登錄。 此外,還有許多不同類型的 WooCommerce 登錄,您可以將其添加到您的商店。

術語“WooCommerce 登錄”是客戶登錄您的在線商店的過程。 但是,這是一個相當模糊的術語,並且有多種設置方法。

如何隱藏 WooCommerce 註冊表單

WooCommerce 登錄有不同類型:

  • 帶有訪客結賬功能的公共 WooCommerce 商店——此設置允許任何人瀏覽您商店中的產品。 沒有隱藏內容。
  • 具有強制性用戶帳戶的公共 WooCommerce 商店——客戶需要註冊或登錄其帳戶才能購買產品。
  • 具有受保護產品類別的客戶門戶- 此設置在商店的不同部分使用密碼保護。
  • 私人 WooCommerce 商店 -隱藏整個商店

要在 WooCommerce 結帳時隱藏用戶註冊,請轉到 WooCommerce > 設置。 在設置頁面上,單擊“帳戶和隱私”選項卡。 取消選中或取消選中橙色字段:

You can learn how you can move the registration below to the billing section at the WooCommerce Checkout.

WooCommerce 隱藏頁腳

用店面和 WooCommerce 構建的隱藏

入職 WooCommerce 嚮導步驟之一允許您沿著 Storefront WooCommerce 主題安裝,這是一件好事。 如果您打算將主題保留為您的 WooCommerce 商店主題,則需要對其進行自定義。

這個主題最常見的問題之一是許多用戶希望刪除或替換的持久頁腳信用鏈接。 您可能還想添加更多自定義功能,例如支持的付款方式、社交圖標、cookie 通知等等。

如果要刪除頁腳鍊接,請在 functions.php 文件的底部添加以下代碼:

remove_action('storefront_footer', 'storefront_credit',20);

請記住保存您所做的更改。

您可以學習如何使用子主題功能覆蓋頁腳鍊接,以便您可以添加自己的信用鏈接。

結論

總之,這篇文章分享瞭如何隱藏不同的元素。 如您所見,您始終可以根據您的目標或編程經驗隱藏任何 WooCommerce 元素。

您可以將 PHP 片段放在子主題函數的底部。 另一方面,CSS 位於您的子主題 style.css 文件中。 確保在編輯此類文件時知道自己在做什麼。 這是一個代碼級指南,如果您有任何問題,請考慮聘請合格的 WordPress 開發人員。

類似文章