如何輕鬆隱藏和刪除 WooCommerce 結帳字段(插件和 PHP)

已發表: 2019-10-14

結帳是任何電子商務商店中最重要的步驟之一。 如果您想成功並提高銷售額,則需要保持精益。 這就是為什麼今天我們將向您展示如何隱藏和刪除 WooCommerce 結帳字段

幾天前,我們為您提供了一些關於如何優化您的網站的提示。 但是,銷售漏斗的最後一步對於完成銷售至關重要,因此需要特別注意。

為什麼禁用 WooCommerce 結帳字段?

您是否知道超過 75% 的用戶將產品添加到購物車,然後離開網站而沒有購買任何東西? 放棄購物車的主要原因之一是結賬時間太長或太複雜

為避免這種情況,結帳頁面必須簡單並且只有必要的字段。 如果您銷售軟件、音樂、電子書等數字或虛擬產品,這一點尤其重要。 由於此類產品不需要發貨,因此它們應該有一個特定的結帳頁面,您不需要在其中詢問地址或郵政編碼等詳細信息。

要了解有關如何改進數字產品結帳的更多信息,您可以查看這篇文章。 因此,為了提高轉化率,您應該隱藏那些只會在結帳頁面上增加干擾和摩擦的字段。

讓我們看看如何在 WooCommerce 中刪除結帳字段並加快結帳過程。

如何刪除 WooCommerce 中的結帳字段?

由於無法從 WordPress 儀表板中刪除 WooCommerce 默認結帳字段,因此在本教程中,我們將向您展示如何以兩種不同的方式隱藏和刪除結帳字段:

  1. 使用插件
  2. 使用 PHP 腳本

如果您不是開發人員,使用插件是最簡單的方法。 另一方面,PHP 腳本允許您隱藏任何現有的結帳字段並通過一些編碼自定義您的 WooCommerce 商店。 沒有更好或更壞的方法。 你會得到相同的結果,所以根據你的技能,你可以選擇最適合你的。

1) 使用插件刪除 WooCommerce 結帳字段

有許多工具可以禁用和隱藏結帳頁面上的字段。 在這裡,我們將向您展示如何使用兩個免費插件來做到這一點:

  1. WooCommerce 結帳經理
  2. WooCommerce 的直接結帳

這些工具的工作方式類似,但有一些區別。 讓我們仔細看看這些插件如何幫助您刪除一些結帳字段。

1.1 – 使用 WooCommerce Checkout Manager 刪除結帳字段

WooCommerce Checkout Manager 是刪除結帳字段的最佳工具之一。 這個免費增值插件有一個免費版本和 3 個起價為 19 美元(一次性付款)的高級計劃。

要禁用任何 WooCommerce 結帳字段,只需按照以下步驟操作:

    1. 安裝並激活 WooCommerce Checkout Manager。 您可以轉到插件 > 添加新的並蒐索“ WooCommerce Checkout Manager ”或從此鏈接免費下載。 該工具有一個具有更高級功能的專業版,但對於這項任務,免費版就足夠了。
    2. 轉到 WordPress 儀表板中的WooCommerce選項卡
    3. 單擊結帳,然後單擊帳單選項卡。
    4. 您將看到可以隱藏的所有字段的列表,因此只需在要刪除的字段上激活禁用選項即可。
    5. 之後,您可以轉到“運輸”和“附加”選項卡並禁用要刪除的字段。
    6. 在 WooCommerce 結帳頁面上隱藏所有不需要的字段後,請記住保存更改,僅此而已!

簡短而甜蜜,不是嗎? 除了刪除字段外,此插件還允許您添加新字段、將字段設為可選或必需、更改顯示字段的順序、應用條件邏輯等等。 因此,如果您想要一個工具來自定義結帳,WooCommerce Checkout Manager 是一個很好的選擇。

1.2 – 使用 WooCommerce 的直接結帳刪除結帳字段

WooCommerce Direct Checkout 是一個出色的插件,旨在簡化結帳流程和結帳頁面。 該工具旨在加快結賬速度,為用戶提供更好的購買體驗。 與允許您啟用和禁用字段的 WooCommerce Checkout Manager 不同, Direct Checkout 可幫助您刪除不必要的字段並提高轉化率

這是一個免費增值工具。 它有一個具有基本功能的免費版本和 3 個起價為 19 美元(一次性付款)的高級計劃。 要使用 Direct Checkout 從 WooCommerce 結帳頁面中刪除字段,您需要:

  1. 安裝並激活 WooCommerce Direct Checkout。 在您的 WP 儀表板中,您可以轉到Plugins > Add New並蒐索“ WooCommerce Direct Checkout ”或從此鏈接免費下載。
  2. 轉到 WordPress 儀表板中的WooCommerce選項卡。
  3. 直接結帳,然後轉到結帳選項卡。
  4. 在這裡,您將看到可以刪除的所有字段的列表,例如國家、州、訂單評論、政策文本、列等。 在“常規”選項卡中,您還可以將用戶從產品頁面直接引導到“添加到購物車重定向到”選項中的結賬處。
  5. 在結帳頁面上刪除不需要的字段後,只需保存更改即可。

總之,如果您想要一個快速直接的解決方案,這兩個插件是一個很好的選擇。 它們允許您單擊幾下即可刪除 WooCommerce 結帳字段並優化您的商店。

除了非常易於使用之外,這些工具還具有出色的性能,並且是 WooCommerce 的兩個最佳結帳插件。 這種方法的主要缺點是,當您安裝插件時,您正在修改您網站的代碼。 這增加了它的複雜性和破壞某些東西的機會。 因此,如果您對編寫幾行代碼感到滿意,那麼自定義腳本可能是一個不錯的方法。

2) 使用 PHP 腳本刪除 WooCommerce 結帳字段

注意:在我們開始之前,我們建議您創建一個子主題。 這樣,您將修改子主題,而不是自定義父主題的文件,以便在更新父主題時不會覆蓋您的自定義。 如果您不想創建子主題,您可以生成站點的完整備份,以防出現問題。

在本節中,我們將展示如何從 WooCommerce 結帳中刪除結帳字段,以編寫您自己的解決方案。 如果您已查看我們關於如何編輯結帳字段的教程,您將熟悉 WooCommerce 掛鉤。 在這種情況下,我們將使用woocommerce_checkout_fields鉤子,我們將其命名為quadlayers_remove_checkout_fields ,如下所示:

 add_filter('woocommerce_checkout_fields','quadlayers_remove_checkout_fields');

這是一種過濾器鉤子,這意味著當你執行它時它必須返回一些東西。 它會返回什麼? 包含要刪除的字段的數據。

刪除姓氏

例如,如果要刪除姓氏字段,可以使用以下內容:

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

之後,您需要將其插入到與您在第一步( quadlayers_remove_checkout_fields )中在過濾器掛鉤中使用的名稱相同的函數中:

 函數 quadlayers_remove_checkout_fields( $fields ) {

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

返回$字段; 

}

最後,插入完整腳本以刪除子主題的functions.php文件中的 WooCommerce 字段姓氏,如下所示:

 add_filter('woocommerce_checkout_fields','quadlayers_remove_checkout_fields'); 

函數 quadlayers_remove_checkout_fields( $fields ) { 

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

返回$字段; 

}

刪除任何其他字段

因此,如果要刪除任何其他字段,則需要添加相應的行。 您可以在下面找到可以刪除的可用字段名稱:

 未設置($fields['billing']['billing_first_name']);
未設置($fields['billing']['billing_last_name']);
未設置($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']);
unset($fields['order']['order_comments']);
未設置($fields['billing']['billing_email']);
unset($fields['account']['account_username']);
unset($fields['account']['account_password']);
unset($fields['account']['account_password-2']);

如何顯示您之前刪除的結帳字段?

如果您刪除了一些您想再次顯示的結帳字段,您該怎麼辦? 只需刪除隱藏您要顯示的特定字段的代碼行。 例如,如果您從計費部分禁用了郵政編碼字段,現在您想再次添加它,則必須從子主題的functions.php文件中刪除以下行:

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

同樣,如果要同時顯示多個字段,可以一次刪除多行。

獎勵:如何刪除 WooCommerce 中的附加信息選項卡?

附加信息選項卡默認出現在 WooCommerce 中。 由於此選項卡僅在產品具有重量、尺寸或屬性時顯示,因此有時它不是很有用。 有兩種方法可以禁用附加信息選項卡:

  1. 通過 PHP :編輯functions.php文件。
  2. 通過 CSS :編輯style.css文件。

在性能方面,PHP 方法更好,因為它停止加載選項卡(而不是加載它然後隱藏它)。 所以在這裡我們將向您展示如何使用 PHP 腳本刪除 Additional Information 選項卡

注意:為避免在更新主題時丟失自定義設置,我們建議您將這些更改應用到您的子主題。

  1. 轉到您的 FTP 並打開wp-content文件夾。 然後,轉到主題並打開您的child_theme文件夾。
  2. 在那裡,打開functions.php文件。
  3. 轉到底部並插入以下代碼:
 add_filter('woocommerce_product_tabs', 'quadlayers_remove_product_tabs');
功能 quadlayers_remove_product_tabs ( $tabs ) {
未設置($tabs['additional_information']);
返回$標籤;
}

請記住保存更改,然後刷新頁面。 而已! 您已刪除附加信息選項卡!

刪除描述標籤和評論

此外,您可以使用以下代碼擺脫描述選項卡和評論選項卡:

 add_filter('woocommerce_product_tabs', 'quadlayers_remove_product_tabs');
功能 quadlayers_remove_product_tabs( $tabs ) {
未設置($tabs['description']);
未設置($tabs['reviews']);
返回$標籤;
}

您應該刪除哪些 WooCommerce 結帳字段?

那麼您應該刪除哪些結帳字段? 這取決於您是銷售實體產品還是數字產品,以及您希望從客戶那裡獲得多少信息。 但是,請記住,較長的結帳表單通常具有較低的轉化率。 客戶傾向於避免長時間結帳,因此這裡有一些技巧可以使結帳頁面保持簡短:

  • 如果您銷售數字產品,請隱藏所有與運輸相關的字段,例如地址、郵政編碼、城市等。
  • 僅顯示必填字段。 您可以隱藏或折疊公司名稱等可選字段。
  • 禁用郵政編碼驗證以減少結帳頁面上的摩擦。
  • 如果您銷售實物產品,請將賬單明細默認設置為運輸明細,以隱藏不必要的字段。
  • 如果可能,使用自動填充來減少用戶填寫表單的時間。
  • 僅使用一個字段作為名稱。 您可以使用全名字段,而不是顯示 3 個字段(名字、中間名和姓氏)。

減少結帳頁面上的步驟並增加轉化率的另一個選擇是使用 WooCommerce 的快速購買按鈕。 大多數大型電子商務玩家用戶,因為它是加快購買過程並讓購物者一鍵購買的一種非常有效的方式。

結論

總之,您的結帳頁面會對您的業務產生巨大影響,並為您帶來競爭優勢。 因此,盡可能優化和改進它是關鍵。

在本教程中,我們看到了兩種刪除和禁用 WooCommerce 結帳字段的不同方法。 它們中的每一個都有其優點和缺點,因此您應該選擇最適合您的技能和需求的那個。

WooCommerce Checkout Manager 和 Direct Checkout 是很棒的插件,可讓您以快速簡便的方式禁用字段。 但是,它們使商店的代碼更加複雜。 另一方面,PHP 函數需要一些編碼,但它更簡潔,不會消耗任何資源。 除了刪除結帳字段外,您還可以通過創建銷售渠道來改進您網站上的購買流程。

最後,如果您想改進結帳頁面,我們建議您查看我們的教程以自定義 WooCommerce 中的結帳以及我們的關於如何編輯結帳字段的指南。

你選擇了哪種方法? 您知道刪除 WooCommerce 結帳字段的其他方法嗎? 在下方發表評論並與我們分享您的經驗。