如何在 WooCommerce 中自定义我的帐户页面（插件和编程）

已发表: 2020-12-31

寻找简单的方法来编辑和个性化您的“我的帐户”页面？ 在本指南中，您将学习如何以编程方式和使用插件自定义 WooCommerce 我的帐户页面，以使您的商店更上一层楼。

设置“我的帐户”页面对于任何在线商店都至关重要。 大多数店主通常会忽略此页面，但它可以帮助您从竞争对手中脱颖而出，并为您的购物者提供更好的客户体验。 在开始如何编辑之前，让我们仔细看看为什么自定义您的 WooCommerce 我的帐户页面如此重要。

什么是我的帐户页面，为什么要自定义它？

WooCommerce 中的“我的帐户”页面是商店所有者保存有关客户个人信息、账单和送货地址的信息的地方。 此外，用户可以在这里查看他们的订单。 默认的“我的帐户”页面是一个简单的 WordPress 页面，其中包含一个 WooCommerce 短代码。

 [ woocommerce_my_account ]

此默认页面包含用户需要的所有基本信息，但您可以充分利用它，除非您自定义“我的帐户”页面。 您可以将此页面用于多种用途。 除了向客户提供有关其订单的信息外，您还可以设置优惠券和折扣代码并将其显示在此处，甚至为他们提供独家提醒、折扣优惠和销售提醒。

我的帐户页面为与您的客户进行额外互动提供了大量机会，同时使他们的购物体验更加出色。 例如，您可以让购物者保存付款详细信息、送货地址和其他帐户详细信息，并将它们与结帐流程集成。

同样，您可以在他们的“我的帐户”页面上向他们提供他们直接带来的下载和虚拟产品列表，甚至允许他们打开高级支持票证并直接从他们的“我的帐户”页面与他们联系。

如果您正在运行 WooCommerce 页面并希望尽可能方便您的客户，那么您绝对应该在 WooCommerce 中自定义您的“我的帐户”页面。

如何在 WooCommerce 中自定义我的帐户页面

有两种方法可以编辑“我的帐户”页面：

  1. 带插件
  2. 以编程方式

在本指南中，我们将介绍这两种方法，以便您选择最适合您的方法。

1) 使用插件编辑我的帐户页面

有几个插件可以编辑“我的帐户”页面。 为了让您的生活更轻松，我们将看看我们选择的最佳工具。 这些插件附带了使您的 WooCommerce 我的帐户页面独特、舒适且用户友好所需的所有自定义功能。 如果您没有编码技能，则使用插件是可行的方法。

您可以编辑“我的帐户”页面的选项卡、创建新选项卡，甚至使用专用定制器和大量定制选项定制其外观。 事不宜迟，这是我们个人推荐的插件，您可以使用这些插件在 WooCommerce 中自定义您的“我的帐户”页面。

1) StoreCustomizer

自定义我的帐户页面 woocommerce - 商店定制器 StoreCustomizer是一个免费的 WordPress 插件，可以帮助您自定义所有 WooCommerce 页面。 这包括从向您的菜单添加项目以及管理您的商店、产品、结帐页面甚至您的“我的帐户”的所有内容。 您可以自由重命名、删除标签和不同的选项，以 2 种不同的方式更改您的“我的帐户”页面样式。

StoreCustomizer 的一大优点是它不需要对您的主题模板进行任何更改，甚至不需要设置 WooCommerce 挂钩。 该插件非常轻巧且用户友好。 此外，使用高级版本，您可以访问更多选项来自定义“我的帐户”页面，例如添加自定义选项卡和使用 Gutenberg 编辑器作为页面构建器插件编辑选项卡内容。

主要特点

  • 一个用户友好的插件，可以在不更改主题文件的情况下自定义 WooCommerce 页面。
  • 与 WordPress Live Customizer 完全集成。
  • 允许重命名和删除“我的帐户”选项卡以及更改选项卡样式。
  • 高级版允许完全自定义“我的帐户”选项卡以及添加自定义选项卡。

价格

这是一个免费增值插件。 它有一个具有基本功能的免费版本和四个高级计划，起价为每年 29 美元。

2) 助推器

自定义我的帐户页面 woocommerce - woocommerce 的助推器 Booster是自定义 WooCommerce 页面的完整答案，无需任何编码。 该插件带有广泛的模块，可帮助您编辑各种 WooCommerce 功能和页面。 这还包括“我的帐户”页面。 您可以轻松更改选项卡端点，以便单击选项卡将您带到您指定的任何页面。

此外，您可以添加自定义页面，甚至自定义特定页面和选项卡。 例如，您可以自定义仪表板消息，甚至允许您的客户从他们的订单选项卡手动更改订单状态。 如果您正在寻找自定义“我的帐户”页面的完整解决方案，Booster 绝对是一个很好的答案。

主要特点

  • 用于自定义 WooCommerce 页面、功能和模板的多合一插件。
  • 我的帐户页面的选项卡端点自定义。
  • 提供仪表板选项卡自定义选项。
  • 添加自定义选项卡以及重命名、样式和重新排序“我的帐户”选项卡。

价格

Booster 有一个功能有限的免费版本和四个高级计划，起价为每年 99.99 美元。

3) 为 WooCommerce 自定义我的帐户

自定义我的帐户页面 woocommerce - 自定义我的帐户 为 WooCommerce 自定义我的帐户是一种高级选项，可以按照您想要的方式自定义和个性化您的“我的帐户”页面。 使用此工具，您可以根据需要编辑和添加任意数量的端点。 您可以使用实时定制器重命名、重新排序和定制所有选项卡。 最重要的是，您可以自由更改标签标签、添加图标，甚至在标签中包含自定义内容，而无需任何编码。

此外，此插件包括强大的编辑选项以及实时定制器，以个性化您的“我的帐户”页面。 您可以更改字体大小和颜色、背景图像、颜色、填充和边距。 您还可以添加自己的自定义 CSS 代码，将自定义提升到一个全新的水平。

主要特点

  • 易于使用并与 Live 定制器完全集成。
  • 完全自定义“我的帐户”页面下的所有选项卡和端点。
  • 用于更改选项卡标签、添加自定义内容、图像和选项卡图标的选项。
  • 支持自定义 CSS 代码以进行其他自定义。

价格

为 WooCommerce 自定义我的帐户是一个高级插件，每年将花费您 49 美元。

使用 WooCommerce StoreCustomizer 自定义我的帐户页面

现在，让我们看看如何使用 StoreCustomizer 自定义您的 WooCommerce 我的帐户页面。 免费版允许您编辑选项卡名称或更改选项卡样式，同时添加您需要专业计划的新选项卡。 即使您选择了不同的插件，本部分也将帮助您更好地了解如何使用该插件来自定义您的“我的帐户”页面。

首先，让我们安装StoreCustomizer插件。 打开您的WordPress 管理仪表板，然后转到插件 > 添加新的。 然后，使用右上角的搜索栏搜索StoreCustomize r。 单击安装，然后单击激活。 现在，应该激活并安装插件。

要开始自定义您的“我的帐户”页面，请转到WooCommerce > StoreCustomizer 。

自定义我的帐户页面 woocommerce - 打开 storecustomizer 这将打开插件的界面并为您提供插件提供的所有自定义选项。 当我们要自定义“我的帐户”页面时，请点击页面底部的“自定义您的设置”按钮。

自定义我的帐户页面 woocommerce - 自定义您的设置

使用 StoreCustomizer

这应该会打开一个Live Customizer窗口，您应该能够在菜单上看到一个Store Customizer选项卡。 单击它，然后转到其下的“帐户页面”选项卡。

自定义我的帐户页面 woocommerce - 实时定制器商店插件 现在，让我们开始编辑我的帐户页面。 首先，让我们更改选项卡样式选项。 单击“帐户选项卡设计”选项并将其更改为“水平样式”或“侧选项卡样式”。

自定义我的帐户页面 woocommerce - 商店定制器选项卡选项 我们还可以选择删除选项卡或重命名它们，因此让我们将地址选项卡重命名为送货地址并删除下载选项卡。

使用商店定制器重命名“我的帐户”页面选项卡

要重命名，请转到要重命名的选项卡，然后单击编辑选项卡文本。 然后，只需在选项卡标题字段中输入您想要的新选项卡文本，它就会显示在右侧的实时自定义窗口中。 您还可以选择更改单击选项卡时显示的页面标题。 只需更改页面标题下的文本，就可以了。

自定义我的帐户页面 woocommerce - 更改标签文本

使用商店定制器删除“我的帐户”页面选项卡

要删除选项卡，只需单击要隐藏的选项卡下的删除选项卡按钮。 例如，如果要删除“下载”选项卡，只需选择其下方的“删除选项卡”选项。

自定义我的帐户页面 woocommerce - 删除标签

请记住，您可以随时重置任何选项卡更改。 通过单击选项卡下的重置图标，您可以将“我的帐户”选项卡设置回默认值。

自定义我的帐户页面 woocommerce - 重置标签 现在，我们建议您继续自定义您的WooCommerce 我的帐户页面标签，并编辑您的标签。 但是，如果您想添加新的选项卡和端点，则需要购买StoreCustomizer 的高级版。 添加新标签的过程是相同的，您只需打开自定义屏幕即可。

您还可以参考插件的文档以充分利用插件及其整个 WooCommerce 自定义范围。 完成自定义“我的帐户”页面后，请记住单击自定义程序屏幕顶部的“发布”以保存更改。

自定义我的帐户页面 woocommerce - 发布

虽然使用插件自定义“我的帐户”页面的选项更简单、更精简，但大多数插件需要花费大量资金才能为您提供广泛的功能。 因此，如果您想充分利用“我的帐户”页面但预算有限，编写自己的解决方案是一个不错的选择。

让我们看看如何以编程方式自定义您的 WooCommerce 我的帐户页面。

2）以编程方式在 WooCommerce 中自定义我的帐户页面

如果您有编码技能，您还可以通过编辑WooCommerce 模板文件或使用WooCommerce 挂钩以编程方式自定义“我的帐户”页面。 在开始之前，我们强烈建议您创建一个子主题或使用这些插件中的任何一个，并为您的 WordPress 安装生成完整备份。

对于我们的演示，我们将向您展示如何使用 WooCommerce 挂钩以编程方式自定义您的“我的帐户”页面。 这不需要编辑您的模板文件，因此破坏某些东西的机会更少。

但是，如果您想通过一些编码来自定义“我的帐户”页面的更多选项，请查看我们关于如何以编程方式编辑“我的帐户”页面的完整指南。 有关如何自定义模板的更多信息，请查看本教程。

使用 WooCommerce 钩子在 WooCommerce 中自定义我的帐户页面

如果您不熟悉 WooCommerce 钩子，我们建议您查看我们的 WooCommerce 钩子指南，以更好地了解它们的工作原理。 之后，只需按照以下步骤自定义和更改您的“我的帐户”页面。

要开始该过程，请在您的WordPress 管理仪表板中，转到外观 > 主题编辑器以 打开你的主题编辑器。

然后，转到右侧边栏的Theme Files 列表中的functions.php文件。 现在，使用编辑器，您可以将自定义函数添加到子主题的函数文件中。

自定义我的帐户页面 woocommerce - 主题编辑器功能

使用 WooCommerce Hooks 重命名选项卡

要使用 WooCommerce 挂钩重命名选项卡，请将以下脚本添加到您的functions.php文件中。 此脚本会将您的地址选项卡重命名为您的地址，但您可以编辑脚本并使用您想要的名称。

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

自定义我的帐户页面 woocommerce - 添加挂钩

然后保存更改并检查前端以查看更改。

自定义我的帐户页面 woocommerce - 您的地址 您还可以编辑此脚本并更改选项卡的任何名称。 为此，只需更改$items数组的名称。 您可以在此处查看$items数组的可用 slug 的完整列表。

 $项目=数组（
'仪表板' => __( '仪表板', 'woocommerce' ),
'订单' => __( '订单', 'woocommerce' ),
'下载' => __( '下载', 'woocommerce' ),
'edit-address' => _n('Addresses', 'Address', (int) wc_shipping_enabled(), 'woocommerce'),
'支付方式' => __( '支付方式', 'woocommerce' ),
'edit-account' => __( '账户详情', 'woocommerce' ),
'客户注销' => __( '注销', 'woocommerce' ),
);

例如，如果要将Orders 选项卡重命名为Your Orders ，可以将脚本的第 3 行修改为$items['orders'] = 'Your Orders'。 您还需要将过滤器名称更改为QuadLayers_rename_orders_tab ，以便您的新函数与上述函数名称不同。 因此，通过这些更改，您的新脚本将是：

 add_filter('woocommerce_account_menu_items', 'QuadLayers_rename_orders_tab', 9999);
函数 QuadLayers_rename_orders_tab( $items ) {
$items['orders'] = '你的订单';
返回$项目；
}

这样，您可以编辑functions.php文件并重命名所有选项卡。 对更改感到满意后，单击更新文件即可。

使用 WooCommerce 钩子删除标签

除了重命名选项卡外，您还可以使用带有$items 数组的unset() 函数删除“我的帐户”页面上的选项卡。 例如，要删除 Account Details 选项卡，您需要使用以下脚本。

 add_filter('woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999);
函数 QuadLayers_remove_acc_tab( $items ) {
unset($items['edit-account']);
返回$项目；
}

自定义我的帐户页面 woocommerce - 添加挂钩以进行删除

保存更改，然后检查前端。 您会看到“帐户详细信息”选项卡不存在。

使用相同的脚本，您可以调整它并删除您想要的任何选项卡。 例如，如果要隐藏下载选项卡，则必须将函数名称和项目数组从$items['edit-account']更改为$items['downloads']。 所以现在你的新脚本将是这样的。

 add_filter('woocommerce_account_menu_items', 'QuadLayers_remove_download', 9999);
函数 QuadLayers_remove_downloads( $items ) {
未设置（$items['downloads']）；
返回$项目；
}

然后，单击更新文件以应用更改。 这些只是您可以在 WooCommerce 中自定义“我的帐户”页面的几件事，但您不仅限于删除和重命名。 您还可以合并选项卡、创建自定义选项卡等等。 要了解如何以编程方式充分利用您的“我的帐户”页面，我们强烈建议您按照我们的分步指南进行操作。

结论

这就是我们关于如何自定义 WooCommerce 我的帐户页面的指南。 这将帮助您改善客户体验并从竞争对手中脱颖而出。

至于我们建议使用哪种方法来编辑“我的帐户”页面，这取决于您的需求和技能。 如果您没有编码技能或不想编辑主题的模板文件，插件是您的最佳选择。 这种替代方案更方便且对初学者友好。 此外，您确保不会使用自定义函数和模板破坏 WordPress 安装中的任何内容。

在这篇文章中，我们向您展示了一些用于编辑“我的帐户”页面的最佳 3 个插件。 如果您想查看其他选项，请查看此帖子。 另一方面，如果您知道如何编码并希望获得充分的灵活性，您可以通过编程方式自定义“我的帐户”页面。 为此，您可以覆盖默认的 WooCommerce 模板文件或使用 WooCommerce 挂钩。

在本指南中，我们向您展示了如何使用钩子，但如果您想了解有关如何使用自定义脚本自定义“我的帐户”页面的更多信息，我们强烈建议您查看本教程。

  • 如何在 WooCommerce 中自定义商店页面
  • 在 WooCommerce 中自定义添加到购物车按钮
  • 如何编辑 WooCommerce 结帐（编码和插件）
  • 如何在 Divi 中自定义 WooCommerce 产品页面

最后，无论您选择哪种方法，如果您在设置“我的帐户”页面时遇到任何问题，请在评论中告诉我们。