如何以编程方式编辑 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 我的帐户页面的最佳插件

您对“我的帐户”页面进行了哪些更改？您在学习我们的教程后有任何问题吗？在下面的评论部分让我们知道！