如何自定義 WooCommerce 模板

已發表: 2021-08-28

尋找編輯模板的方法？ 在本指南中，我們將向您展示兩種不同的方法來為您的網站自定義 WooCommerce 模板（使用和不使用插件）。

WooCommerce 是創建電子商務商店的絕佳平台。 它非常易於使用，具有很多功能，並且具有許多自定義選項來添加功能和更改您的網站設計。 除了更改商店頁面或產品頁面外，您還可以編輯 WooCommerce 默認包含的模板。

為什麼要自定義 WooCommerce 模板？

WooCommerce 具有許多可定制的功能。 您幾乎可以個性化任何頁面，從結賬頁面到商店頁面再到類別頁面、感謝頁面等等。 所有這些都有助於為您的商店提供客戶認可的獨特風格，但要在人群中脫穎而出，您可能還需要自定義您的 WooCommerce 模板。

通過編輯您網站上的默認頁面，您可以確保它們看起來與您的競爭對手不同，並且具有適合您商店的外觀和感覺的樣式。 但是，如果您想自定義它們以獲得顯著的競爭優勢，那麼編輯默認模板可能也是一個好主意。

通過自定義模板，您可以添加更多詳細信息和功能，將您的在線商店提升到一個新的水平。 這些功能可以幫助您提供更好的客戶體驗，讓購物者欣賞。 這就是為什麼您應該學習如何編輯您的 WooCommerce 模板和升級您的電子商務商店遊戲。

編輯模板之前要記住的事情

在開始自定義模板之前，您應該記住以下幾點。

1. WooCommerce 主題

您將通過模板更改與 WooCommerce 相關的網站的許多元素。 確保您使用的主題與 WooCommerce 完全兼容。 如果您還沒有或正在考慮更改它，請查看我們的最佳 WooCommerce 主題列表。

2. 正確安裝 WooCommerce

在對 WooCommerce 模板進行任何更改之前，您必須在您的網站上正確設置 WooCommerce。 我們建議您不要錯過或跳過設置過程中的任何步驟。 如果您對此不確定，我們關於如何設置 WooCommerce 的指南可以幫助您檢查一切是否正確。

3.使用兒童主題並備份您的網站

要編輯 WooCommerce 模板，您將更改模板文件中的敏感數據。 這意味著如果您不小心犯了錯誤，您的網站可能會面臨一些嚴重的問題。 好消息是，您可以通過使用子主題並對其進行更改而不是直接編輯父主題文件來防止這種情況發生。

我們還建議您在開始此過程之前備份您的網站。 如果您需要這方面的幫助，請查看我們關於如何備份 WordPress 網站的完整指南。 同樣，您還可以找到有關如何在 WordPress 中創建子主題以及有關子主題插件的更多信息。

4. 編程知識

要自定義 WooCommerce 模板，我們將使用代碼片段。 無論您是通過編程方式還是使用插件，我們都建議您具備一些基本的編程知識。 對於某些自定義，我們將使用鉤子。 如果您不熟悉鉤子，請查看此 WooCommerce 鉤子指南。

如果您沒有任何編碼技能並且不喜歡編輯核心文件，我們建議您向開發人員尋求幫助。

5. 主題和模板文件

主題和模板文件因您用於 WooCommerce 商店的主題而異。 對於本次演示，我們將使用 Divi 主題，因此如果您使用其他主題，您網站上的某些主題和模板文件可能會有所不同。 但是，無論您使用什麼主題，您都應該能夠毫無問題地遵循本教程。

如何編輯 WooCommerce 模板

自定義 WooCommerce 模板有兩種主要方法：

  1. 以編程方式
  2. 使用插件

在下一節中，我們將了解每種方法，以便您可以使用您覺得最舒服的方法。

1. 以編程方式自定義 WooCommerce 模板

即使 WordPress 在沒有任何編程知識的情況下易於使用，它也是對開發人員友好的。 事實上，您幾乎可以使用插件和代碼片段編輯您網站上的任何內容。 在本節中，我們將向您展示如何在 WooCommerce 中以編程方式編輯模板。

有兩種以編程方式自定義模板的方法：

  • 覆蓋模板
  • 帶掛鉤

這兩種方法都可以完成工作，因此請選擇對您更方便的一種。 讓我們快速瀏覽一下這兩種方法之間的區別，以便您對每種方法的作用以及何時使用它們有一個基本的了解。

鉤子與覆蓋模板

鉤子通常用於帶有操作和過濾器的簡單修改。 另一方面，您可以通過更改實際模板文件來覆蓋模板以進行更複雜的自定義。

還值得記住的是，如果您對特定模板文件使用掛鉤，則不應覆蓋模板文件。 這是因為當您覆蓋模板時，該文件上使用的鉤子將被替換並且不再起作用。

在繼續之前，請確保您知道自己的需求是什麼，並選擇適合您需求的方法。 如果您仍然不確定，我們建議您向 WordPress 開發人員尋求幫助。

1.1。 覆蓋模板以編輯 WooCommerce 模板

當您想要進行複雜的自定義時，您應該覆蓋您的模板，因為它比鉤子更靈活。

該過程與編輯functions.php文件的過程非常相似。 在這種情況下，您將編輯主要的 WooCommerce 模板文件，而不是自定義主題文件。

要訪問模板文件，請在儀表板中轉到Plugins > Plugin Editor ，從下拉列表中選擇WooCommerce，然後導航到模板選項卡下的模板文件。

您將在此處找到要編輯的所有主要文件，例如archive-product.php 、 content-product-cat.php 、 content-product.php等。 同樣，您還可以編輯購物車、結帳、電子郵件等中的模板文件。

您可以想像，您可以編輯許多 WooCommerce 模板文件。 您可以自定義這些文件的子目錄和文件夾。 有關您可以個性化哪些文件的更多信息，請查看您可以在此處編輯的模板文件的完整列表。

現在讓我們看一些如何自定義 WooCommerce 模板的示例。

1.1.1。 將簡碼添加到 WooCommerce 模板

在 WooCommerce 中自定義代碼時最常見的做法之一是使用簡碼。 WooCommerce 和 WordPress 提供了許多官方短代碼，您可以使用它們來編輯模板。

以下腳本將在所有單個產品頁面上顯示 WooCommerce 我的帳戶儀表板。 只需將其粘貼到single-product.php文件中並進行更新。

 <?php
如果（！定義（'ABSPATH'））{
   出口; // 如果直接訪問則退出
}
get_header('商店');
   而（有_posts（））： 
   the_post();
   wc_get_template_part('內容', '單一產品');
   結束； // 循環結束。
do_action('woocommerce_sidebar');
   $t= '<div><h4>我的帳戶</h4>';
   $t.= do_shortcode(" [ woocommerce_my_account ] "); $t.="</div>"; 迴聲$t; get_footer('商店');

之後，預覽產品頁面，您將能夠看到帳戶儀表板。

我的帳戶儀表板示例自定義 woocommerce 模板

有關如何以編程方式編輯產品頁面的更多信息，請查看此分步指南。

1.1.2。 提醒客戶他們之前購買過產品

如果他們之前購買過產品，您還可以自定義 WooCommerce 模板，為您的忠實購物者提供折扣代碼。 再次，您需要將以下代碼粘貼到single-product.php文件中並進行更新。

 get_header('商店');
   而（有_posts（））： 
    the_post(); 
    wc_get_template_part('內容', '單一產品');
   結束； // 循環結束。
$current_user = wp_get_current_user();
如果 ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
echo '<div class="user-bought">&hearts; 嘿 ' 。 $current_user->first_name 。 '，你以前買過這個。 使用此優惠券再次購買：<b>PURCHASE_AGAIN_21</b></div>'；
萬一;
get_footer('商店');

現在，只要您的客戶查看他們已經購買的產品，就會出現以下消息。

重複訂單示例自定義 woocommerce 模板

這些是您可以通過覆蓋模板來編輯 WooCommerce 模板的一些方法。 如果您需要更多參考資料和示例，請查看我們關於如何以編程方式自定義 WooCommerce 模板的詳細指南。

1.2. 使用 Hooks 編輯 WooCommerce 模板

如果您對覆蓋模板文件不滿意，也可以使用掛鉤自定義 WooCommerce 模板。 掛鉤是您可以添加為操作或過濾器的功能，可以幫助您快速增加網站的功能並進行簡單的修改。

同樣，您也可以使用 WooCommerce 掛鉤來編輯商店的模板。 僅當您想要進行簡單的自定義時，我們才推薦這種方法。 對於復雜的修改，覆蓋模板是一種更合適的方法。

要將鉤子添加到您的在線商店，您只需轉到外觀 > 主題編輯器，打開functions.php文件並添加帶有操作或過濾器鉤子的代碼片段。

以下是一些示例片段，您可以使用它們來使用鉤子編輯 WooCommerce 模板。

1.2.1。 在單個產品中的圖像上方添加信息

如果您想在產品圖片上方包含有關產品的任何其他信息，只需在functions.php文件中添加以下腳本。

 // 添加自定義函數
功能 quadlayers_before_single_product() {
echo '<h2>本週所有商品都享受 25% 的折扣！</h2>';
}

// 添加動作
add_action（'woocommerce_before_single_product'，'quadlayers_before_single_product'，11）；

這將在單個產品頁面中的產品圖像上方顯示消息。

單個產品描述示例自定義 woocommerce 模板

1.2.2。 在店鋪頁面的店鋪標題下方添加店鋪描述

您可以使用以下代碼片段在 Shop 頁面上顯示商店描述。 描述將顯示在商店標題的正下方。

 // 添加自定義函數
功能 quadlayers_custom_archive_description() {
$new_description = '<p>這是我們的商店。 享受您的購物樂趣！</p>';
返回 $new_description;
}

// 添加動作
add_action('woocommerce_archive_description', 'quadlayers_custom_archive_description');

保存更改後，您將能夠在 WooCommerce 商店頁面上看到商店描述。

商店描述示例自定義 woocommerce 模板

有關如何使用鉤子編輯模板的更多信息，請查看我們關於如何以編程方式自定義 WooCommerce 模板的教程。

2. 使用插件自定義 WooCommerce 模板

如果您沒有編碼技能，還有另一種解決方案。 您可以使用插件編輯 WooCommerce 模板。

有幾個插件可以自定義您的模板。 對於本教程，我們將使用編輯 WooCommerce 模板。 這是一個簡單的免費插件，可讓您個性化您的主題模板。 您可以對模板進行更改，也可以隨時單擊幾下將其重置為默認值。

與編程方法不同，使用此插件，您可以直接選擇要編輯的模板，而不是在主題和 WooCommerce 文件中搜索它們。 找到所需模板後，您需要做的就是添加代碼片段以覆蓋模板並保存更改。 這樣，您可以節省大量時間，因為您不必查找和打開要編輯的每個模板文件。

讓我們用一些例子更好地解釋這一點。

2.1。 安裝並激活插件

要開始使用該插件，您需要先安裝並激活它。 在您的 WordPress 儀表板中，轉到Plugins > Add New並蒐索Edit WooCommerce Templates 。 單擊立即安裝，然後將其激活。

或者，您可以下載插件並手動安裝。 如果您想了解有關此過程的更多信息，請查看我們關於如何手動安裝 WordPress 插件的指南。

2.2. 編輯模板

激活插件後，您可以開始自定義 WooCommerce 模板。 在您的儀表板中，轉到WooCommerce > 主題模板，您將能夠看到您可以在當前主題中更改的所有模板。 對於每個模板，您將在當前主題中看到標題、路徑以及是否已更改的狀態。

要編輯任何模板文件，您只需在所需模板上按編輯即可。 如果您看不到要編輯的模板，您也可以使用搜索欄進行搜索。

編輯模板自定義woocommerce模板

之後，您將被重定向到需要添加代碼片段的模板編輯器。 為此，您可以使用上述程序部分中提到的任何一個片段。 當然，您也可以以它們為基礎，對它們進行定制，打造您自己的定制解決方案。

將代碼片段添加到編輯器後，單擊Save Template to Theme 。

將模板保存到主題自定義 woocommerce 模板

如果稍後您改變主意並想要重置您對模板所做的任何更改，只需單擊“重置”即可撤消更改。

保存自定義後，更改將應用於當前主題的模板。 要檢查更改是否正確保存，請轉到WooCommerce > 主題模板，“已更改當前主題”列下的狀態應更改為Yes 。

而已！ 通過這種方式，您可以自定義任何 WooCommerce 模板並從競爭對手中脫穎而出。

獎勵：如何編輯 WooCommerce 電子郵件模板

我們已經向您展示了自定義 WooCommerce 模板的不同方法。 我們建議更改的第一個模板之一是電子郵件模板。 您可能會向您的客戶發送幾封關於他們訂單的自動電子郵件，因此電子郵件模板是一個很好的開始方式。

作為一家在線商店，您希望擁有購物者的正確聯繫信息。 但是默認的 WooCommerce 電子郵件模板可能無法提供您在每種情況下所需的一切。

好消息是編輯 WooCommerce 電子郵件模板非常容易，您可以從 WordPress 儀表板進行大部分更改，而無需任何插件或代碼片段。 只需轉到WooCommerce > 設置並打開電子郵件選項卡。 在那裡，您將能夠看到電子郵件發件人和電子郵件模板的所有可自定義選項。

從電子郵件發件人選項中，您可以編輯“發件人”名稱和地址。 這將更改發件人姓名和地址在您發送給客戶的電子郵件中的顯示方式。

同樣，您還可以更改電子郵件模板的頁眉圖像、頁腳文本和正文，以及文本和背景顏色。

完成所需的所有更改後，您可以通過單擊“單擊此處預覽您的電子郵件模板”鏈接來預覽電子郵件模板。

如果您對預覽感到滿意，只需保存更改即可。 這是定制您的商店並給您的購物者留下深刻印象的一種快捷方式。

這只是一個示例，但您可以通過更多方式更改 WooCommerce 電子郵件模板。 有關它的更多信息，請查看我們關於如何編輯 WooCommerce 電子郵件模板的指南。

結論

總之，編輯模板是為客戶提供更好體驗並從競爭對手中脫穎而出的絕佳方式。

在本指南中，我們看到了自定義 WooCommerce 模板的兩種主要方法：

  • 以編程方式
  • 使用插件

如果您知道如何編碼，那麼第一種方法適合您。 您可以使用掛鉤或覆蓋模板來編輯模板。 當您想要應用簡單和小的更改時，推薦使用鉤子，而如果您想要更複雜的自定義，則需要覆蓋模板。

或者，您可以使用插件自定義模板以節省時間。 使用插件，您無需在您的網站上查找特定的模板文件。 您可以開始自定義插件提供的模板文件並直接在您的網站上編輯它們。

最後，我們還向您展示瞭如何編輯電子郵件模板，以便您從購物者向您購買商品的那一刻起就給他們留下深刻印象。

我們希望您現在可以對 WooCommerce 模板進行任何更改而不會出現任何問題。 你用過哪種方法？ 在下面的評論中讓我們知道！

如果您發現本指南有幫助，這裡還有一些您可能感興趣的文章：

  • 如何測試 WooCommerce 電子郵件模板：3 種簡單方法！
  • 自定義我的帳戶頁面的最佳 WooCommerce 插件
  • 如何自定義 WooCommerce 註冊表單