如何自定義 WooCommerce 模板

定製woocommerce-templates-uai-258x129-1

正在尋找編輯模板的方法?在本指南中,我們將向您展示使用和不使用插件為您的網站自定義 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 模板文件,而不是自定義主題文件。

要訪問模板文件,請在儀錶板中轉到插件 > 插件編輯器,從下拉列表中選擇 WooCommerce,然後導航到模板選項卡下的模板文件。

plugin-editor-customize-woocommerce-templates-1024x421-1

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

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

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

1.1.1. 將簡碼添加到 WooCommerce 模板

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

以下腳本將在所有單個產品頁面上顯示 WooCommerce My Account 儀錶板。只需將其粘貼到 single-product.php 文件中並更新它。

<?php
if (!defined(‘ABSPATH’)) {
  exit; // 如果直接訪問則退出
}
get_header( ‘shop’ );
  while ( have_posts() ) : 
   the_post();
   wc_get_template_part(‘內容’,’單一產品’);
  終了;// 循環結束。
do_action(‘woocommerce_sidebar’);
  $t=”<div id=”myacc”><h4>我的賬戶</h4>”;
  $t.= do_shortcode(“[woocommerce_my_account]”); $t.=”</div>”; 回聲 $t; get_footer(‘商店’);

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

my-account-dashboard-example-customize-woocommerce-templates

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

1.1.2. 提醒客戶他們之前已經購買過產品

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

get_header(‘商店’);
  while ( have_posts() ) : 
    the_post();
    wc_get_template_part(‘內容’,’單一產品’);
  終了;// 循環結束。
$current_user = wp_get_current_user();
if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
echo ‘<div class=”user-bought”>♥ 嘿 ‘ 。$current_user->first_name 。‘,你以前買過這個。使用此優惠券再次購買:<b>PURCHASE_AGAIN_21</b></div>’;
萬一;
get_footer(‘商店’);

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

重複訂單示例自定義woocommerce-templates

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

1.2. 使用鉤子編輯 WooCommerce 模板

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

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

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

主題編輯器自定義 woocommerce-templates-1024x437-1

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

1.2.1. 在單品圖片上方添​​加信息

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

// 添加自定義函數
function quadlayers_before_single_product() {
echo ‘<h2>這周一切都是 25% off!</h2>’;
}

// 添加動作
add_action( ‘woocommerce_before_single_product’, ‘quadlayers_before_single_product’, 11 );

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

單個產品描述示例自定義woocommerce-templates

1.2.2. 在商店頁面的商店標題下方添加商店描述

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

// 添加自定義函數
function
quadlayers_custom_archive_description () { $new_description = ‘<p>This is our Shop. 享受您的購物!</p>’;
返回 $new_description;
}

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

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

商店描述示例自定義woocommerce-templates

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

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

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

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

編輯woocommerce-templates-plugin-customize-woocommerce-templates

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

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

2.1. 安裝並激活插件

要開始使用該插件,您需要先安裝並激活它。在您的 WordPress 儀錶板中,轉到插件 > 添加新並搜索編輯 WooCommerce 模板。單擊立即安裝,然後激活它。

add-new-plugin-customize-woocommerce-templates-1024x302-1

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

2.2. 編輯模板

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

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

編輯模板自定義 woocommerce-templates-1024x370-1

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

將代碼片段添加到編輯器後,單擊將模板保存到主題。

save-template-to-theme-customize-woocommerce-templates-1024x343-1

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

保存自定義後,更改將應用​​於當前主題的模板。要檢查更改是否正確保存,請轉到 WooCommerce > 主題模板,「在當前主題中更改」列下的狀態應更改為是。

已更改當前主題狀態自定義 woocommerce-templates-1024x467-1

就是這樣!通過這種方式,您可以自定義任何 WooCommerce 模板並從您的競爭對手中脫穎而出。

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

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

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

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

電子郵件模板-自定義-woocommerce-模板

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

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

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

電子郵件模板預覽自定義woocommerce-templates

如果您對預覽感到滿意,只需保存更改即可。這是自定義商店並給購物者留下印象的好方法。

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

結論

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

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

  • 以編程方式
  • 使用插件

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

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

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

我們希望您現在可以毫無問題地對 WooCommerce 模板進行任何更改。你用過哪種方法?請在下面的評論中告訴我們!

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

相關文章