如何將自定義代碼添加到 WooCommerce

已發表: 2022-01-01

設置代碼片段和配置 WooCommerce 文件可能會讓初學者感到困惑。 此外，使用這些文件出錯可能會產生可怕的結果，甚至會使您的網站崩潰。 這就是為什麼在本指南中，我們將向您展示將自定義代碼添加到 WooCommerce 的不同方法。

我們之前已經了解瞭如何手動自定義商店。 無論是您的商店頁面、我的帳戶頁面、購物車頁面還是產品頁面，您都可以通過添加自定義代碼來手動自定義它們。 您還可以使用代碼配置 WooCommerce 的各種元素，以個性化購物體驗並從競爭對手中脫穎而出。 所有這些都需要向您的網站添加代碼片段。

在我們查看不同的方法之前，讓我們看看學習如何添加自定義代碼的一些主要好處。

為什麼在 WooCommerce 中添加和自定義代碼？

WooCommerce 的主要功能之一是其可定制性。 憑藉其已經多樣化和靈活的選項以及各種可用的插件和插件，WooCommerce 成為最可定制的電子商務平台之一。 但是，添加自定義代碼需要遵循幾個要求。

無論是更改Proceed to checkout 文本、刪除Add to Cart按鈕還是更改站點的外觀，您都需要使用自定義函數並使用 WooCommerce hooks。 開發人員和任何熟悉編碼技能的人都知道能夠以正確的方式添加代碼片段是多麼重要。 這不僅使您可以編輯商店，還可以為其添加功能。 好消息是，WooCommerce 和 WordPress 的開源特性使其成為一個更加平易近人的過程。

WooCommerce 完全支持其用戶自定義其代碼，儘管此過程涉及編輯具有一些風險的核心文件。

我們之前已經看過許多關於如何使用代碼片段配置各種元素和文件的指南。 這一次，我們將專注於該過程的第一部分，並查看以正確方式將自定義代碼添加到 WooCommerce 的不同方法。

如何將自定義代碼添加到 WooCommerce

將代碼片段添加到 WooCommerce 有多種方法：

  1. 使用內置的 WordPress 主題編輯器
  2. 使用專用插件
  3. 使用 FTP 訪問主題文件
  4. 通過配置 WooCommerce 模板文件
  5. 通過創建一個新的自定義插件

讓我們逐步了解每種方法。

注意：所有這些方法都需要編輯涉及一些風險的核心文件。 這就是為什麼在開始之前備份您的網站是個好主意。

1) 使用內置的 WordPress 編輯器添加自定義

將自定義代碼添加到 WooCommerce 的默認方法是使用內置主題編輯器。 您可以訪問functions.php並將 PHP 代碼直接添加到其中。 但是，如果代碼有錯誤或者您刪除了部分代碼，您的網站可能會受到嚴重影響。 這就是為什麼我們建議使用子主題並添加額外的安全層。

要在主題編輯器中打開functions.php文件，請轉到儀表板上的外觀 > 主題編輯器。 然後，單擊右側主題文件側邊欄上的functions.php 。

將自定義代碼添加到 wordpress - 函數 php

將自定義代碼添加到 functions.php 文件

現在，您可以從主題編輯器向 WooCommerce 添加自定義代碼。 對於此演示，我們將更改默認的“購物車中沒有產品”文本為“您的購物車當前為空，我們建議查看我們的特色產品！”：

 remove_action('woocommerce_cart_is_empty', 'wc_empty_cart_message', 10);
add_action（'woocommerce_cart_is_empty'，'quadlayers_empty_cart_message'，10）；

函數 quadlayers_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( '您的購物車目前是空的，我們建議您查看我們的特色產品！', 'woocommerce' ) ) );
迴聲 $html 。 '</p></div>';
}

只需將此腳本粘貼到您的主題編輯器中並更新文件以應用更改。

向 woocommerce 添加自定義代碼 - 文本功能中沒有購物車

查看前端，您應該會看到如下內容：

添加代碼是一回事，但了解代碼的工作原理也很重要。

上面的代碼添加了一個自定義的 WooCommerce 鉤子，該鉤子應用特定的操作來用我們添加到代碼中的自定義消息替換默認的Empty Cart Message 。 要更改文本，只需替換此行中的文本消息：

 $html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( '您的購物車目前是空的，我們建議您查看我們的特色產品！', 'woocommerce' ) ) );

如果您想了解有關自定義“購物車中沒有產品”消息並充分利用它的更多信息，請查看此完整指南。

如前所述，以這種方式添加代碼既快速又容易，但它涉及相當多的風險。 例如，使用錯誤的代碼可能會破壞或崩潰您的網站。 此外，您的自定義代碼可能存在兼容性問題，這可能會影響某些功能、插件或主題。 此外，如果您將代碼添加到父主題的 function.php 中，然後更改或更新主題，您可能會丟失您添加的自定義代碼。

這就是為什麼如果您是初學者，我們建議您嘗試第二種方法並使用插件將自定義代碼添加到 WooCommerce。

2) 使用插件添加代碼

在添加片段時，使用插件對初學者更友好。 您可以輕鬆控制在網站上啟用的代碼位，即使您更改主題，您添加的任何代碼也將被保存。 此外，您可以隨時激活或停用任何代碼。

對於我們的演示，我們將使用代碼片段插件。 它是向任何站點添加自定義代碼的最流行的插件之一。

首先，通過打開您的WP Admin Dashboard並轉到Plugins > Add New來安裝插件。 使用右上角的搜索欄並蒐索Code Snippets 。 然後，單擊安裝，最後激活插件。

將自定義代碼添加到 wordpress - 安裝代碼片段

激活後，您就可以添加代碼並自定義您的 WooCommerce 商店了。 轉到Snippets > Add New添加新代碼。

將自定義代碼添加到 wordpress - 添加新代碼段

命名您的代碼片段並將您的代碼添加到代碼部分。 對於演示，我們將使用下面的代碼來隱藏“添加到購物車”按鈕。

 remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action（'woocommerce_single_product_summary'，'woocommerce_template_single_add_to_cart'，30）；

之後，您可以決定是要在整個網站上運行代碼，還是選擇在後端或僅在前端運行代碼。 或者，您可以只運行此代碼一次。

同樣，您也可以選擇為代碼設置優先級並添加片段描述和標籤。

將自定義代碼添加到 woocommerce - 演示代碼信息

設置所有詳細信息後，單擊保存更改或保存更改並激活以添加新代碼。

如果您想單獨停用或激活您的代碼，請轉到片段 > 所有片段，您可以單獨禁用或啟用任何片段。

將自定義代碼添加到 wordpress - 啟用禁用片段

3) 使用 FTP 客戶端添加自定義代碼

如果您無法使用所有這些選項，並且您需要手動將自定義代碼添加到您的 WooCommerce 商店，您可能必須使用FTP 客戶端來完成。 那裡有幾種工具，但在本教程中，我們將使用FileZilla。

注意：如果您不習慣使用 FTP 客戶端或配置您的服務器及其文件，我們不推薦此方法。 此外，這可能需要訪問您的cPanel和FTP 。 弄亂這些文件可能會對您的網站產生嚴重影響，因此如果您希望減少向您的網站添加自定義代碼的風險，我們強烈建議您堅持使用上述方法。

首先，打開 FileZilla 或您喜歡的 FTP 客戶端並將其連接到您的網站。 然後，在您網站的目錄中找到您的主題文件。 這些通常位於服務器的/wp-content/themes目錄中。 單擊當前主題的文件夾或您可能正在配置的子主題。

將自定義代碼添加到 woocommerce - filezilla wp

打開您的主題文件夾，右鍵單擊其中的functions.php文件，然後按查看/編輯。

將自定義代碼添加到 woocommerce - ftp 函數

在這裡，使用文件編輯器，您可以將代碼粘貼到文件末尾並保存。 為此，我們將使用與上面相同的代碼來隱藏“添加到購物車”按鈕：

 remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); 

remove_action（'woocommerce_single_product_summary'，'woocommerce_template_single_add_to_cart'，30）；

添加代碼的另一個有趣的替代方法是自定義 WooCommerce 模板文件。

4) 通過自定義 WooCommerce 模板文件添加代碼

編輯模板是配置 WooCommerce 商店及其所有頁面的所有元素的最快方法之一。 這包括您的結帳頁面、產品頁面、商店頁面和許多其他頁面。

好消息是您可以使用內置的 WordPress 插件編輯器以與上述類似的方式編輯 WooCommerce 模板文件。 要訪問它，請在您的管理儀表板上，轉到Plugins > Plugin Editor 。

然後，使用右上角的選擇插件下拉菜單，選擇WooCommerce，然後單擊選擇。

這將更新下面的插件文件列表，您可以使用這些列表來配置 WooCommerce 文件和模板。 對於我們的演示，我們將編輯結帳的感謝頁面。 因此，在Plugin Files列表下，選擇Checkout >thankyou.php 。

然後，向下滾動並通過替換此行中的文本來更改收到的訂單文本：

 <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( '謝謝。您的訂單已收到。', 'woocommerce' ）， 空值 ）; // phpcs:忽略 WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>

例如，將收到的訂單消息更改為“感謝您從我們這裡購買。 您將很快收到有關說明的郵件。”，粘貼此代碼：

 <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( '感謝您從我們這裡購買。您將很快收到關於說明..', 'woocommerce' ), null ); // phpcs:忽略 WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>

向 woocommerce 添加自定義代碼 - 謝謝頁面編輯

在這裡，我們剛剛將掛鉤文本更新為更適合我們需要的內容。 一旦您對更改感到滿意，請按Update File 。

如果您想了解有關配置模板文件的更多信息，請查看我們關於如何自定義 WooCommerce 模板文件的指南。

5) 通過創建新的自定義插件添加代碼

在向 WooCommerce 添加自定義代碼時，創建一個全新的插件也是一種選擇。 這是一個更高級的用戶選項，我們建議您僅在您希望將某個功能附加到獨立插件時才使用此方法。 這樣，您可以隨時選擇在需要或不需要特定功能時分別激活/停用插件。

此外，如果您還必須管理多個站點，這可能是一個很好的解決方案。 您可以使用插件將功能附加到站點，而不是手動將代碼添加到它們。

此外，WordPress 本身使得創建和使用新插件變得非常容易。 您所要做的就是在您的網站目錄中創建一個新的插件文件夾，並在其 PHP 文件中添加一些代碼。 首先，您需要先使用FTP連接到您的網站。 我們將使用 Filezilla 作為我們的指南，但對於任何其他 FTP 客戶端，該過程應該類似。

但是，在開始之前，我們強烈建議您備份您的網站。

創建新插件文件夾以將自定義代碼添加到 WooCommerce

將您的網站與 FTP 連接後，打開您網站的導向器。 然後，導航到您的/wp-content/plugins文件夾。

現在，在 plugins 文件夾中創建一個新目錄，並根據您的代碼命名並展開它。 對於我們的演示，我們將其命名為Remove-Add-To-Cart 。

在 woocommerce 中添加自定義代碼 - 創建目錄

然後，右鍵單擊文件夾以單擊Create new file 。 在這裡，您需要創建一個與您的文件夾同名的 .php 文件。 因此，我們將文件命名為Remove-Add-to-Cart.php。

創建文件後，繼續並通過右鍵單擊它並單擊View/Edit打開它。

接下來，我們將添加幾行代碼來為其添加插件名稱、描述和作者姓名：

 <?php
/**
* 插件名稱：刪除加入購物車
* 描述：添加刪除添加到購物車插件
* 作者：Sijal Shrestha
* 版本：1.0
*/

/* 把你的代碼片段放在這裡。 */
/* 把你的片段放在這裡。 */
?>

在 woocommerce 中添加自定義代碼 - 向 php 添加描述

將自定義代碼添加到新插件

現在，您可以開始將自定義代碼添加到插件中。 您需要在 /*Put your snippets here */ 部分之間添加自定義代碼。 提醒一下，這些行只是註釋，因此它們不會影響您的代碼，您可以根據需要刪除它們。

 <?php
/**
* 插件名稱：刪除加入購物車
* 描述：添加刪除添加到購物車插件
* 作者：Sijal Shrestha
* 版本：1.0
*/

/* 把你的代碼片段放在這裡。 */

remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action（'woocommerce_single_product_summary'，'woocommerce_template_single_add_to_cart'，30）；
/* 把你的片段放在這裡。 */
?>

接下來，保存您的文件，您應該會看到插件列在插件頁面下的WP 管理儀表板上。

激活插件，您的自定義代碼應該可以完美運行。 如果您願意，也可以壓縮插件文件夾並將其安裝在不同的網站上。 只需從您的 FTP 客戶端下載該文件夾並壓縮該文件夾。

然後，您可以使用此 zip 在任何網站上安裝您的插件。 如果您需要更多幫助，我們還提供了手動安裝 WordPress 插件的詳細說明。

您應該使用哪種方法來添加自定義代碼？

我們已經看到了不同的方法，但添加片段的最佳方法是什麼？ 雖然使用 FTP 客戶端並手動訪問您的文件可以非常快速和簡單，但以這種方式添加自定義代碼可能會涉及重大風險。 這就是為什麼要盡量減少風險，我們建議改用專用的自定義代碼插件，尤其是在您沒有高級編碼技能的情況下。

這種方法的風險要小得多，並且它可以具有其他優點，例如：

  • 能夠跟踪不同的代碼並隨時啟用/禁用它們
  • 添加衝突代碼並在需要時交替啟用/禁用它們
  • 檢查與主題/安裝的兼容性
  • 更容易調試和從問題中恢復

使用專用插件將自定義代碼添加到 WooCommerce 為您提供了一種簡單的方法來配置您的鉤子，同時最大限度地減少可能出現的問題。 但是，如果您想確保新添加的代碼不會導致問題或使您的網站崩潰，我們建議您查看以下提示。

將自定義代碼添加到 WooCommerce 時的最佳實踐

1) 使用子主題

如果您要將自定義代碼添加到您的functions.php文件，我們建議您首先使用子主題。 無論您編輯或添加什麼代碼，使用子主題可以確保您可以隨時恢復任何更改，而無需修改核心主題文件。

此外，在更改代碼和修改樣式表時要考慮的重要一點是，如果您要更新WordPress 主題，您可能會丟失所有更改。 這是因為您的funcitons.php文件將被主題更新覆蓋並刪除所有自定義代碼。 這就是為什麼不推薦向父主題添加代碼的原因。

使用子主題，您可以確保即使在更新父主題後也不會丟失自定義。 此外，如果您的主題中斷，您可以隨時恢復更改並重新開始。

您可以通過編程方式創建子主題或使用專用插件。 在本節中，我們將向您展示如何使用插件創建子主題，因為它是一個更簡單的過程。

使用插件創建子主題

使用插件創建子主題是一個簡單且適合初學者的過程。 您可以使用許多插件。 對於這個演示，我們將使用Child Theme Wizard 。

首先，打開您的WP Admin Dashboard並前往Plugins > Add new 。 然後，使用右上角的搜索菜單搜索Child Theme Wizard 。 單擊安裝，然後在按鈕切換後按激活。

將自定義代碼添加到 wordpress - 安裝子主題嚮導

然後，您可以通過單擊工具 > 子主題嚮導來訪問插件的功能。

要創建新的子主題，請使用父主題字段選擇您要為其創建子主題的主題。 對於我們的演示，我們將使用Storefront主題。

然後，添加標題、描述、URL 等詳細信息。 完成後，單擊創建子主題，您應該就完成了。

現在通過導航到側邊欄上的外觀 > 主題並在新創建的子主題上按激活來切換到您的子主題。

向 woocommerce 添加自定義代碼 - 激活子主題

而已！ 現在您可以在新創建的子主題下自由地將您的自定義代碼添加到您的function.php文件中。

2) 使用 WordPress 備份插件並設置備份

修改任何 WordPress/WooCommerce 文件或更改安裝中的任何文件時，最重要的事情之一就是設置備份。 雖然 WooCommerce 非常靈活，但不兼容或故障代碼會造成嚴重問題。

在某些情況下，它可能會崩潰甚至破壞您的網站，並導致您的 WooCommerce 業務停機。 這就是我們強烈建議您創建定期備份的原因。 因此，在將任何自定義代碼添加到您的站點之前，請記住創建一個備份，以防萬一出現問題。

有關這方面的更多信息，請查看我們關於如何在 WordPress 中創建備份的專用指南。

3) 了解代碼如何工作以及如何使用 WooCommerce 鉤子和函數

WooComerce 的大多數自定義代碼都使用掛鉤來執行某些操作或更改某些元素。 這就是為什麼在您的自定義代碼之前了解這些過濾器的工作原理以及它們如何應用於您的網站是一個好主意。 這不僅可以防止您使用不完整或有故障的代碼，還可以確保您可以對其進行自定義，以便更好地滿足您的需求。

例如，讓我們看一下如果您沒有登錄則禁用購買的這段代碼：

 add_action('woocommerce_before_single_product', 'quadlayers_add_message');
add_filter('woocommerce_is_purchasable', 'quadlayers_block_admin_purchase');
功能 quadlayers_block_admin_purchase($block) {
if ( is_user_logged_in() ):return true;
否則：返回假；
萬一;
}

函數 quadlayers_add_message( ){
if ( !is_user_logged_in() ):echo '<H2>請登錄購買此產品</h2>';
萬一;
}

這就是 WooCommerce 鉤子在這裡的工作方式：

  • 動作鉤子用於使用QuadLayers_add_message函數打印消息，而過濾器鉤子使用quadlayers_block_admin_purchase函數禁用“添加到購物車”按鈕
  • 這兩個函數中都使用了IF語句來檢查用戶是否已登錄
  • 如果條件 IF 語句返回 true，則應用woocommerce_is_purchasable掛鉤
  • 我們還應用了一些額外的 CSS 來更改消息的文本樣式以及添加自定義顏色

讓我們繼續將其添加到我們的子主題的function.php文件中：

這在前端給了我們這個結果：

如果您想了解 WooCommerce 自定義代碼的工作原理，請查看我們的指南，了解如何使用 WC 掛鉤。

結論

總之，學習如何向 WooCommerce 添加自定義代碼可能是自定義商店體驗的關鍵部分。 您定制的東西越多，您就越能從競爭對手中脫穎而出。 通過添加代碼片段，您可以避免過度依賴插件並擁有更大的靈活性。

在本指南中，我們看到了添加代碼片段的不同方法：

  • 通過使用內置的主題編輯器來編輯 functions.php 文件
  • 使用專用的 WordPress 插件添加自定義代碼片段
  • 使用FTP手動訪問function.php文件
  • 使用插件編輯器手動編輯 WooCommerce 模板
  • 使用 FTP 使用自定義代碼創建新插件。

所有這些方法都允許您輕鬆自定義和配置您的 WooCommerce 網站。 所有這些方法都需要基本的編碼技能，但使用插件是最適合初學者的方法。 從內置編輯器編輯 functions.php 文件很容易，但您需要注意一些風險。 如果您想直接自定義 WooCommerce 模板文件，這同樣適用。 最後，使用 FTP 客戶端是一種更高級的方法，因為它需要一定的知識來配置服務器文件。

您是否已將代碼片段添加到您的 WooCommerce 商店？ 您使用了哪種方法？ 您知道我們應該添加的任何其他方式嗎？ 在下面的評論部分讓我們知道！

最後，如果您正在尋找其他代碼片段和以編程方式自定義商店的方法，我們可以為您提供一些東西。 如果您喜歡本指南，請查看這些有助於您充分利用 WooCommerce 商店的文章：

  • 如何以編程方式編輯 WooCommerce 產品頁面
  • 以編程方式編輯 WooCommerce 我的帳戶頁面
  • 如何以編程方式編輯 WooCommerce 商店頁面