跳到主要内容

模板结构 & 通过主题覆盖模板

注意 本文档中提到了使用 PHP 模板的经典主题。如果您正在使用区块主题，并且使用 HTML 模板，请查看区块主题的主题文档。 概述

概述​

WooCommerce 模板文件包含您商店前端和 HTML 邮件的标记和模板结构。

模板列表​

您 WooCommerce 站点的各种模板文件可以通过 FTP 客户端或您的主机文件管理器在 /wp-content/plugins/woocommerce/templates/ 目录中找到。 另外，您可以在 我们的 GitHub 仓库中找到模板文件。

注意：如果您正在查找旧版本的模板文件，您可以在以下路径中找到它们：

通过 Hooks 修改模板​

当您打开一个模板文件时，您会发现它们都包含 hooks，这些 hooks 允许您添加/移动内容，而无需直接编辑模板文件本身。 Hooks 是一种让一段代码与另一段代码在特定的、预定义的点进行交互/修改的方式。 这种方法允许实现一个代码片段，该代码片段“hook”到特定的主题位置。 这样做可以避免升级问题，因为模板文件可以完全保持不变，并且不需要配置子主题。

让我们看一下 /wp-content/plugins/woocommerce/templates/emails/admin-new-order.php 文件，看看 hook 看起来是什么样的。 从第 30 行开始，我们看到以下代码，该代码负责生成 新订单 电子邮件的订单详情部分。

/*
 * @hooked WC_Emails::order_details() 显示订单详情表。
 * @hooked WC_Structured_Data::generate_order_data() 生成结构化数据。
 * @hooked WC_Structured_Data::output_structured_data() 输出结构化数据。
 * @since 2.5.0
 */
do_action( 'woocommerce_email_order_details', $order, $sent_to_admin, $plain_text, $email );

上面的代码输出图像中红色区域的块，该块是商店管理员在网站上成功下单后收到的 新订单 电子邮件：

image

以下代码可以作为构建所需功能的起点。 然后，可以将它添加到代码片段插件中，以修改模板中该特定位置的输出，而无需编辑模板本身。 同样适用于其他 hooks，无论它们出现在模板的哪个位置。

add_action( 'woocommerce_email_order_details', 'my_custom_woo_function');
function my_custom_woo_function() {
    /* 您的代码放在此处 */
}

通过编辑文件修改模板​

直接在插件或父主题中编辑文件会带来风险，可能导致错误，甚至使网站停止运行。更重要的是，通过这种方式进行的任何更改，在插件或主题更新时都会消失；因为更新过程会完全删除旧版本，并用新的、更新的版本替换它。

因此，推荐的方法是设置一个子主题，这样可以创建一个安全的目录，用于进行覆盖修改，这些修改不会被自动更新。

在这个例子中，我们给子主题命名为 storefront-child。有了 storefront-child，就可以通过覆盖的方式进行升级安全的修改。将模板复制到子主题中的一个目录中，目录名称为 /storefront-child/woocommerce/，保持与原始文件相同的目录结构，但删除 /templates/ 子目录。

要覆盖示例中的管理员订单通知，请将 wp-content/plugins/woocommerce/templates/emails/admin-new-order.php 复制到 wp-content/themes/storefront-child/woocommerce/emails/admin-new-order.php。

复制的文件现在将覆盖 WooCommerce 的默认模板文件，因此您可以对复制的文件进行任何您希望的更改，并在最终输出中看到这些更改。