如何以編程方式編輯 WooCommerce 我的帳戶頁面

已發表: 2020-12-22

您想自定義商店上的“我的帳戶”頁面嗎？你來對地方了。在本指南中，我們將向您展示如何以編程方式編輯 WooCommerce 我的帳戶頁面，以幫助您改善客戶體驗。

什麼是“我的帳戶”頁面？

默認情況下，WooCommerce 商店包含一個“我的帳戶”頁面，用戶可以在其中查看他們的訂單以及您存儲有關客戶個人信息、賬單和送貨地址的信息的位置。默認的“我的帳戶”頁面是包含 WooCommerce 短代碼的 WordPress 頁面。

[ woocommerce_my_account ]

儘管這個開箱即用的頁麵包含您的用戶管理訂單和設置所需的所有基本信息，但編輯“我的帳戶”頁面可以幫助您從競爭對手中脫穎而出並提供更好的用戶體驗。

為什麼要在 WooCommerce 中自定義“我的帳戶”頁面？

提供出色的用戶體驗是任何電子商務商店成功的關鍵，這已不是什麼秘密。用戶在線購買是因為它既快速又舒適，因此您應該確保您的商店為他們提供獲得驚人體驗所需的工具。

大多數店主都將注意力集中在自定義產品頁面和結帳上，但忘記了“我的帳戶”頁面。由於這是為您的註冊用戶設計的頁面，因此對其進行自定義可以幫助您改善他們在您網站上的體驗。此外，它可以幫助您讓他們回到您的商店並提高您的銷售額。例如，您可以創建一個特殊部分，在其中向他們展示個性化的交易和促銷活動。

我們已經分析了自定義“我的帳戶”頁面的最佳插件。但是，如果您不想安裝任何第三方工具並且您有一些編碼技能，我們可以為您提供一些東西。在本指南中，我們將向您展示如何以編程方式編輯 WooCommerce 我的帳戶頁面。

如何以編程方式編輯 WooCommerce 我的帳戶頁面

在 WooCommerce 中編輯“我的帳戶”頁面有兩種不同的技術：

您可以覆蓋默認的 WooCommerce 模板文件
使用一些 WooCommerce 鉤子

哪種方法更好？ 這些選項中的每一個都更適合不同的情況。作為一般規則，您應該盡可能使用鉤子而不是覆蓋模板文件。這是 WordPress 在自定義站點時推薦的最佳實踐之一。

但是，如果您想要執行包含函數或對象的更複雜的任務，您可能需要編輯模板文件。在本指南中，您將學習如何使用這兩種方法以編程方式編輯 WooCommerce 我的帳戶頁面。可以想像，編輯模板文件比使用鉤子有更大的風險，因此在選擇所需選項之前請記住這一點。

1) 自定義我的帳戶頁面覆蓋模板文件

注意：由於此方法涉及覆蓋模板文件，我們建議您在開始之前創建站點的完整備份。如果您不知道如何操作，請查看本指南。有關如何自定義 WooCommerce 模板的更深入信息，請查看這篇文章。

覆蓋 WooCommerce 模板文件的過程類似於覆蓋子主題中的任何其他文件。如您所知，子主題允許您在更新主題時編輯主題而不會丟失自定義。這同樣適用於 WooCommerce 插件，因此如果您沒有子主題，您可以創建一個或使用這些插件中的任何一個。

首先，在您的WordPress 管理儀表板中，轉到Plugins > Editor 。然後，轉到插件文件夾，打開 WooCommerce，找到模板文件。為此，您可以使用 WordPress 插件文件編輯器或您選擇的任何代碼編輯器。在WooCommerce目錄下，打開模板文件並查找myaccount文件夾。

plugins/woocommerce/templates/myaccount

如何以編程方式編輯 WooCommerce 我的帳戶頁面 - 模板文件

打開/myaccount文件夾，您將找到“我的帳戶”頁面使用的所有模板文件。 woocommerce我的帳戶模板文件

這些是當前在您的網站上運行的默認文件。要覆蓋這些文件，您需要在子主題中創建一個同名的新文件。但是，如果您創建一個空文件，則會禁用原始文件的所有功能。因此，為避免在您的網站上產生問題，您需要復制默認文件並將其粘貼到您的主題文件夾中。

例如，假設您要從 WooCommerce 安裝中復制dashboard.php文件。在將其粘貼到您的子主題之前，您需要創建兩個嵌套子目錄並將它們命名為/woocommerce和/myaccount 。之後，將dashboard.php文件粘貼到其中： child_theme/woocommerce/myaccount/dashboard.php 以編程方式編輯 WooCommerce 我的帳戶頁面 - 覆蓋模板文件

現在打開dashboard.php文件並進行一些小的更改以確保它正常工作。而已！您剛剛學習瞭如何覆蓋 WooCommerce 模板文件。這是第一步。現在，讓我們更進一步，看看如何自定義“我的帳戶”頁面。

自定義“我的帳戶”頁面儀表板

現在您知道如何覆蓋模板文件，讓我們看看如何以編程方式編輯 WooCommerce 我的帳戶頁面。在本節中，我們將向您展示如何自定義“我的帳戶”頁面的主儀表板。在此過程結束時，您的“我的帳戶”頁面將如下所示：

自定義我的帳戶 woocommerce 儀表板模板我們在其下方添加了標題圖像和一些文本。此外，我們還創建了一個列表，其中包含指向用戶更頻繁訪問的部分的鏈接、頁腳和一些圖片鏈接，以便客戶可以輕鬆與您聯繫。

完整腳本

這是創建上述屏幕截圖的最終dashboard.php文件。

 如果（！定義（'ABSPATH'））{
出口; // 如果直接訪問則退出。
}
$allowed_html = 數組（
'a' => 數組（'href' => 數組（），）
);
?>
<h2>
<?php
打印（
/* 翻譯：1：用戶顯示名稱 2：註銷 url */
wp_kses( __( '嘿 %1$s，你回來了！', 'woocommerce' ), $allowed_html ),
'<strong>' 。 esc_html($current_user->display_name)。 '</strong>',
esc_url(wc_logout_url())
);
?>
</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBg81lLt4o-uEuBTgrMCwhDhX1HJKLCPTSxA&usqp=CAU"/>
<h3>
<?php
/* 翻譯：1：訂單 URL 2：地址 URL 3：帳戶 URL。 */
$dashboard_desc = __( '這是您的帳戶主儀表板：', 'woocommerce' );
如果 ( wc_shipping_enabled() ) {
/* 翻譯：1：訂單 URL 2：地址 URL 3：帳戶 URL。 */
$dashboard_desc = __( '這是您的帳戶主儀表板：', 'woocommerce' );
}
打印（
wp_kses($dashboard_desc,$allowed_html),
esc_url(wc_get_endpoint_url('訂單')),
esc_url(wc_get_endpoint_url('編輯地址')),
esc_url(wc_get_endpoint_url('edit-account'))
);
$ul_list = __('<ul>
<li>查看您的<a href="%1$s">近期訂單</a></li>
<li>管理您的<a href="%2$s">送貨地址和帳單地址</a></li>
<li><a href="%3$s">編輯您的密碼和帳戶詳細信息</a></li>
</ul>');
$div_contact = __('
<div class="acc_contact">
<span class="acc_images" >
<a href="#link to send whatsapp message"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png"/></a>
<a href="#link to facebook profile"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png"/></a>
<a href="#link to twitter profile"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png"/></a>
<a href="#link to send email"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png"/></a>
</span>
</div>');
$div_footer=__('
<div>
<h4><i>用愛建造！</i></h4>
<img src="http://localhost/Sampler/wp-content/uploads/2020/08/ql-logo-300x65.png"/>
</div>');
?>
</h3>
<p>在此處管理個人資料和個人信息。 填寫所有字段，以便我們了解您。 您帳戶中製作的所有版本都會立即反映在網站上，因此其他用戶可以毫不拖延地了解您和您當前的需求</p>
<?php
迴聲 $ul_list.$div_footer.$div_contact;

如果您查看代碼，您會發現我們從默認模板複製的所有原始代碼仍然存在。我們剛剛修改了一些字符串並將鏈接重新排序為列表。最重要的是，我們使用了額外的腳本來向選項卡添加更多內容。為了更好地理解我們所做的更改，您可以檢查默認的dashboard.php 。

添加圖像

要在“我的帳戶”頁面上顯示圖像，您需要替換圖像的 URL。這同樣適用於社交圖標圖像鏈接。

CSS 自定義

自定義“我的帳戶”頁面以及任何其他頁面的另一種方法是使用 CSS 腳本。這是我們用來設置自定義dashboard.php文件樣式的 CSS 腳本：

 .woocommerce-MyAccount-content > h2:nth-child(2),
.woocommerce-MyAccount-content > h3:nth-child(4){
文本對齊：居中；
}
.acc_contact{
填充頂部：20px；
文本對齊：居中；
}
.acc_contact > h3{
向左飄浮;
}
.acc_images{
邊距：自動；
寬度：50%；
顯示：塊；
}
＃歡迎{
邊距：自動；
}
.acc_images img {
左邊距：4px；
邊距右：4px；
顯示：內聯塊；
寬度：55px；
}
#acc_footer{
邊距頂部：15px；
背景顏色：#202020；
文本對齊：居中；
邊框半徑：15px；
}
#acc_footer > h4{
填充頂部：20px；
顏色：RGB（235、228、228）；
字體粗細：粗體；
}
#acc_footer > img{
邊距：自動；
填充底部：20px；
}

您可以將此代碼作為基礎，將其粘貼到您的子主題的style.css文件中，並根據您網站的外觀對其進行自定義。

2. 用鉤子編輯 WooCommerce 我的帳戶頁面

以編程方式編輯“我的帳戶”頁面的第二種方法是使用一些 WooCommerce 掛鉤。為此，您需要對鉤子在 WooCommerce 中的工作方式有基本的了解。如果您不熟悉鉤子，我們建議您查看本指南。

A) 重命名標籤

此腳本會將地址選項卡重命名為您的地址。

 add_filter('woocommerce_account_menu_items', 'QuadLayers_rename_acc_adress_tab', 9999);
函數 QuadLayers_rename_acc_adress_tab( $items ) {
$items['edit-address'] = '你的地址';
返回$項目；
}

B) 刪除標籤

要完全刪除任何選項卡，請使用unset()函數，如下所示：

 add_filter('woocommerce_account_menu_items', 'QuadLayers_remove_acc_address', 9999);
函數 QuadLayers_remove_acc_address( $items ) {
未設置（$items['downloads']）；
返回$項目；
}

在上面的腳本中，我們刪除了“下載”選項卡。您可以在$items數組中找到完整的選項卡列表，因此您可以選擇所需的選項卡。

 $項目=數組（
'儀表板' => __( '儀表板', 'woocommerce' ),
'訂單' => __( '訂單', 'woocommerce' ),
'下載' => __( '下載', 'woocommerce' ),
'edit-address' => _n('Addresses', 'Address', (int) wc_shipping_enabled(), 'woocommerce'),
'支付方式' => __( '支付方式', 'woocommerce' ),
'edit-account' => __( '賬戶詳情', 'woocommerce' ),
'客戶註銷' => __( '註銷', 'woocommerce' ),
);

C) 合併標籤和內容

自定義“我的帳戶”頁面的另一個選項是合併選項卡。例如，讓我們看看如何刪除地址選項卡並將其內容移動到帳戶選項卡。

 // -----------------------------
// 1. 刪除地址選項卡
add_filter('woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999);
函數 QuadLayers_remove_acc_tab( $items ) {
unset($items['edit-address']);
返回$項目；
}
// -------------------------------
// 2. 將地址選項卡的內容插入現有選項卡（本例中為編輯帳戶）
add_action('woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address');

現在，“帳戶”選項卡將如下所示：合併我的帳戶 woocommerce 標籤內容

D）添加具有自定義內容的新標籤

現在，讓我們看看如何將內容添加到“我的帳戶”頁面。在此示例中，我們將添加一個名為 Support 的新選項卡，用戶可以在其中輕鬆查看他們的支持票證。我們將使用第三方插件提供的兩個簡碼來顯示一些有趣的內容，但您應該能夠在新標籤中使用任何您想要的簡碼。

但是，請注意，由於與 WooCommerce 不兼容，某些短代碼可能無法使用。要將帶有自定義內容的支持選項卡添加到 WooCommerce 我的帳戶頁面，請將以下代碼粘貼到您的子主題的functions.php文件中。

 // 1. 註冊新端點
// 注意：重新保存永久鏈接，否則會出現 404 錯誤  
函數 QuadLayers_add_support_endpoint() {
    add_rewrite_endpoint（“支持”，EP_ROOT | EP_PAGES）；
}  
add_action('init', 'QuadLayers_add_support_endpoint');  
// ------------------
// 2. 添加新查詢
函數 QuadLayers_support_query_vars( $vars ) {
    $vars[] = '支持';
    返回 $vars;
}  
add_filter('query_vars', 'QuadLayers_support_query_vars', 0);  
// ------------------
// 3. 插入新端點 
函數 QuadLayers_add_support_link_my_account( $items ) {
    $items['support'] = '支持';
    返回$項目；
}  
add_filter('woocommerce_account_menu_items', 'QuadLayers_add_support_link_my_account');
// ------------------
// 4. 向新端點添加內容  
函數 QuadLayers_support_content() {
echo '<h3>支持</h3><p>歡迎來到支持區。 作為高級客戶，從這裡管理您的支持票，如果您的網站有任何問題，您可以提交票。 我們將盡最大努力為您提供快速高效的解決方案</p>';
echo do_shortcode('[tickets-shortcode]');
echo do_shortcode('[wpforms]');
}  
add_action('woocommerce_account_support_endpoint', 'QuadLayers_support_content');

如果您在單擊新選項卡時收到 404-page not found 錯誤，請轉到WordPress 儀表板 > 設置 > 永久鏈接，然後單擊底部的“保存”按鈕打開永久鏈接頁面。

請注意，腳本分為四個部分。他們每個人都完成不同的任務，因此您可以使用要添加到商店的部分。還要記住，在腳本的最後部分 (4)，您可以替換do_shortcode()函數中的短代碼。這將是新支持選項卡的最終結果。自定義標籤我的帳戶 woocommerce

結論

總而言之，默認的“我的帳戶”頁麵包含用戶需要的基本信息，但它非常基本。因此，如果您想改善商店的用戶體驗，您應該自定義“我的帳戶”頁面。這不僅可以幫助您增強商店中非常重要的部分，還可以提高您的銷售額。

有幾個插件可以自定義“我的帳戶”頁面。但是，如果您不想再安裝任何插件並且您具有編碼技能，則可以以編程方式編輯 WooCommerce 我的帳戶頁面。為此，有兩種選擇：

覆蓋模板文件
使用 WooCommerce 鉤子

這兩種方法都可以完成工作，但作為一般規則，我們建議您盡可能使用鉤子。它的風險較小，並且是 WordPress 推薦的最佳實踐之一。在本指南中，我們已經看到了幾個可以使用這兩種方法執行的操作的示例。我們建議您將這些腳本作為指導，使用它們來獲得一些想法，並嘗試充分利用您商店中的“我的帳戶”頁面。

最後，有關充分利用“我的帳戶”頁面的更多指南，請查看以下指南：

如何使用和不使用插件自定義 WooCommerce 我的帳戶
自定義 WooCommerce 我的帳戶頁面的最佳插件

您對“我的帳戶”頁面進行了哪些更改？您在學習我們的教程後有任何問題嗎？在下面的評論部分讓我們知道！