如何以編程方式自定義 WooCommerce 模板

已發表: 2021-05-04

您想在您的網站上編輯模板嗎？本指南將向您展示如何使用鉤子和覆蓋它們以編程方式自定義 WooCommerce 模板。

為什麼要編輯 WooCommerce 模板？

網上購物比去實體店更舒適、更快捷，因此電子商務在過去幾年變得非常流行。競爭如此激烈，僅僅建立您的 WooCommerce 商店並將您的產品放到網上是不夠的。你需要想辦法從人群中脫穎而出。

最好的方法之一是定制您的商店。除了更改標題和編輯結帳或商店頁面等關鍵頁面外，您還可以自定義您使用的模板。編輯模板的網站並不多，因此通過這樣做，您將能夠比競爭對手更具優勢。

如果您有編碼技能，您可能知道在編輯商店時建議使用子主題。同樣，WordPress 和 WooCommerce 內置掛鉤提供了很多可能性來編輯和添加新功能到任何網站。

如何以編程方式自定義 WooCommerce 模板

以編程方式自定義 WooCommerce 模板有兩種主要方法：

帶掛鉤
覆蓋模板

這些方法中的每一種都有不同的用途。讓我們仔細看看它們的主要區別。

覆蓋模板文件或使用鉤子？

建議使用掛鉤自定義商店。但是，在使用鉤子自定義 WooCommerce 時，您可能會遇到不兼容問題。對於更複雜的自定義，覆蓋 WooCommerce 模板文件可能是一個更好的選擇。

重要的是要注意，當您覆蓋模板文件時，對該文件起作用的鉤子將停止工作。每個掛鉤都指向一個特定的文件，因此如果您編輯觸發掛鉤的同一個文件，您將無法使用它們。

例如，讓我們抓取single-product.php文件來查看掛鉤是如何創建的。另外，請注意鉤子在循環之前和之後的位置。

 如果（！定義（'ABSPATH'））{
        出口; // 如果直接訪問則退出
}
 get_header('商店'); ?>
 <?php
                /**
                 * woocommerce_before_main_content 鉤子。
                 *
                 * @hooked woocommerce_output_content_wrapper - 10（輸出內容的打開 div）
                 * @hooked woocommerce_breadcrumb - 20
                 */
                do_action('woocommerce_before_main_content');
        ?>
                <?php while ( have_posts() ) : ?>
                        <?php the_post(); ?>
                        <?php wc_get_template_part('內容', '單一產品'); ?>
                <?php 結束； // 循環結束。 ?>
        <?php
                /**
                 * woocommerce_after_main_content 鉤子。
                 *
                 * @hooked woocommerce_output_content_wrapper_end - 10（輸出內容的關閉 div）
                 */
                do_action('woocommerce_after_main_content');
        ?>
        <?php
                /**
                 * woocommerce_sidebar 鉤子。
                 *
                 * @hooked woocommerce_get_sidebar - 10
                 */
                do_action('woocommerce_sidebar');
        ?>
 <?php
 get_footer('商店');

如果您查看腳本，您將看到我們如何在do_action('name-of-the-hook');上創建掛鉤。線。

假設您在子主題的functions.php文件中有以下鉤子：

 add_action('woocommerce_after_main_content',function(){echo “單個產品模板文件後的自定義內容”;});

您可以在模板文件上回顯相同的內容，如下所示：

 <?php 結束； // 循環結束。 ?>
        <?php
 echo “單個產品模板文件後的自定義內容”；
                /**
                 * woocommerce_after_main_content 鉤子。
 do_action('woocommerce_after_main_content');

但是，通過這樣做， do_action('woocommerce_after_main_content'); 函數將變得無用，因為您已經在那裡添加了代碼而不是用鉤子拉它。因此，您可能希望刪除文件中所有不必要的鉤子，刪除do_action('name-of-the-hook'); 部分。

請記住，如果您在網站上的其他地方使用woocommerce_after_main_content()掛鉤並刪除do_action( 'name_of_your_hook' ); 在這個文件中，鉤子將不再起作用。

刪除掛鉤和不必要的 PHP 標記後，您的文件應如下所示：

 如果（！定義（'ABSPATH'））{
 出口; // 如果直接訪問則退出
}
 get_header('商店');
 而（有_posts（））：
 the_post();
 wc_get_template_part('內容', '單一產品');
 結束； // 循環結束。
 do_action('woocommerce_sidebar');
 get_footer('商店');

注意：以這種方式移除鉤子可能會影響第三方代碼，例如插件和主題，導致失敗或破壞您的網站。 假設您知道自己在做什麼。

自定義和覆蓋 WooCommerce 模板文件

覆蓋 WooCommerce 模板文件為您提供了很大的靈活性來自定義您的商店。但是，如前所述，您必須了解，當您覆蓋模板文件的內容時，作用於該文件的掛鉤將停止工作。此外，WooCommerce 可能會不時更改模板文件，因此如果有更新並且他們更改了文件，您可能會發現您編輯的文件已過期。

覆蓋模板時要記住的事項

如果您在這裡，您可能具有一些編碼技能，並且知道如何使用和安裝子主題。如果不是這種情況，請查看我們的指南以創建子主題或使用這些插件之一。

覆蓋 WooCommerce 模板類似於覆蓋functions.php文件。主要區別在於您編輯 WooCommerce 的模板文件而不是主題文件。

為此，您需要從 WooCommerce 插件模板文件夾中復制所需的模板文件，並將其粘貼到 WooCommerce 文件夾下的子主題中。如果您遵循 WooCommerce 模板文件夾、文件名和子文件夾的相同結構；您將能夠覆蓋模板文件，甚至是子文件夾中的文件。

有許多 WooCommerce 模板文件，每個文件都負責一項任務。您可以在此鏈接中查看可以編輯的模板文件的完整列表以及子目錄和文件夾結構。

如您所見，根模板文件夾中有一些文件以及幾個子目錄。您可以像編輯主文件（如archive-product.php 、 single-product.php或content-single-product.php ）一樣自定義任何子目錄中的文件。同樣，如果您遵循與子主題中相同的文件夾名稱和結構，您還可以自定義購物車、我的帳戶、電子郵件或結帳文件夾中的文件。

因此，如果您想自定義其中一些文件，您的子主題將如下所示：如何以編程方式自定義 woocommerce 模板

話雖如此，讓我們看一下您可以做些什麼來自定義 WooCommerce 模板的一些示例。

1. 向 WooCommerce 模板添加簡碼

一種有趣的替代方法是在您的代碼中使用簡碼。大多數現有的短代碼應該在這里工作，但在官方 WooCommerce 和 WordPress 之外找到一些不受支持的短代碼也很常見。

例如，以下腳本將在所有單個產品頁面中包含帳戶儀表板。請記住將其粘貼到您在子主題上創建的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 模板文件 - 將簡碼添加到 wc 模板

2. 為之前購買過該產品的客戶展示內容

如果您的客戶已經從您那裡購買了產品並再次購買相同的產品，您可以為他們提供折扣代碼以改善他們的體驗並讓他們一次又一次地回到您的商店。

以下腳本將在產品頁面上為過去購買相同產品的回頭客顯示內容。我們再次編輯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 模板文件 - 在回頭客之前顯示購買的內容

3.根據產品數量和購物車總價刪除添加到購物車按鈕

如果您想以編程方式自定義 WooCommerce 模板，另一個有趣的示例是根據客戶購買的商品數量以及購物車的總價格添加購物車按鈕。

在這種情況下，我們將使用位於模板目錄中循環文件夾內的文件進入 WooCommerce 循環。只需在子主題的woocommerce文件夾下名為loop的文件夾下創建一個新的add-to-cart.php文件，然後粘貼此腳本：

 如果（！定義（'ABSPATH'））{
 出口;
 }
 全球$產品；
 $count= WC()->購物車->get_cart_contents_count();
 $total_price= WC()->購物車->get_cart_total();
 preg_match_all('!\d+!', $total_price, $matches);
 $to_int = intval($matches[0][1]);
 如果（$to_int>500）{
 echo "超過總購物車限額";
 }
 elseif($count<10){
 迴聲應用過濾器（
 'woocommerce_loop_add_to_cart_link', // WPCS：XSS 正常。
 衝刺f(
 '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
 esc_url($product->add_to_cart_url()),
 esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
 esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
 isset（$args['attributes']）？ wc_implode_html_attributes( $args['attributes'] ) : '',
 esc_html( $product->add_to_cart_text() )
 ),$product,$args);
 }
 別的{
 echo "超出數量限制";
 }

在這種情況下，我們添加了一個條件邏輯if()語句來檢查購物車中添加的商品是否超過 10 件，並且購物車的總價格不超過 500 美元。

如您所見，我們正在進入以這種方式調用 WooCommerce 對象的 WooCommerce 類範圍： WC()->cart 。這樣，您可以根據條件檢索一些信息以將購物車按鈕添加到商店頁面或不添加。

這是應用兩個條件限制時的結果：

根據產品數量和購物車總價刪除添加到購物車按鈕

請記住，這僅適用於主商店頁面。如果您想在其他頁面上執行相同操作，則需要添加更多代碼。

4. 編輯 WooCommerce 電子郵件模板文件

電子郵件模板已經包含指向您網站的有用鏈接，但有些用戶可能沒有意識到這一點。因此，讓我們添加一個指向電子郵件模板的鏈接，用戶可以直接從他們收到的電子郵件登錄網站。

我們會將鏈接添加到電子郵件佈局的標題中，因此我們需要email-header.php文件的副本，該文件位於 WooCommerce 的模板子目錄的電子郵件文件夾中。

在您的子主題上創建一個新文件夾，然後將同名文件粘貼到那裡。您將看到起始標誌<!–header–>和<!–end header–> ，這就是您要添加鏈接的地方：

 <!-- 標題 -->
 <表格邊框="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
 <td>
 <h1><?php 回顯 $email_heading; ?></h1>
 <h3>
 <?php echo '<span class="my-link"><a href="#login-URL">登錄您的帳戶</a></span>';?>
 </h3>
 </td>
 </tr>
 </table>
 <!-- 結束標題 →

而已！您剛剛編輯了 WooCommerce 電子郵件模板頭文件。同樣，您可以編輯位於此目錄中的所有電子郵件模板文件。有關如何測試電子郵件模板的更多信息，請查看此完整指南。

要預覽模板，我們建議您使用電子郵件預覽插件。在這裡，您會找到一些可以使用的電子郵件插件。

編輯 WC 電子郵件模板文件

5. 如何將 CSS 樣式應用於 WooCommerce 電子郵件模板

另一個有趣的選擇是以編程方式自定義 WooCommerce 模板的樣式。編輯 HTML 標記後，您可以向電子郵件模板添加一些 CSS 樣式。考慮到內聯 CSS 不是推薦的做法，我們需要使用email-styles.php文件。這是處理電子郵件模板的 CSS 的文件。

要將自定義 CSS 代碼應用於電子郵件，請從 WooCommerce 插件文件夾中復制此文件並將其粘貼到您的主題 WooCommerce 文件夾中。這是一個 PHP 文件，因此您將能夠使用變量、函數並構建自己的邏輯語句並將它們應用於樣式：

 一個 {
 顏色：<?php echo esc_attr($link_color); ?>;
 字體粗細：正常；
 文字裝飾：下劃線；
 }

這是自定義鏈接選擇器：

 .my-link > a:nth-child(1){
 白顏色;
 字體大小：14px；
 }

結論

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

以編程方式自定義 WooCommerce 模板有兩種主要方法：

帶掛鉤
覆蓋模板

我們比較了這兩種方法並向您展示了幾個示例。您可以使用這些腳本作為基礎並嘗試自定義它們並將它們應用到您的商店。

如果您對本指南有任何問題，請在下面的評論中告訴我們，我們將盡最大努力為您提供幫助。