如何将自定义代码添加到 WooCommerce

已发表: 2022-01-01

设置代码片段和配置 WooCommerce 文件可能会让初学者感到困惑。 此外，使用这些文件出错可能会产生可怕的结果，甚至会使您的网站崩溃。 这就是为什么在本指南中，我们将向您展示将自定义代码添加到 WooCommerce 的不同方法。

我们之前已经了解了如何手动自定义商店。 无论是您的商店页面、我的帐户页面、购物车页面还是产品页面，您都可以通过添加自定义代码来手动自定义它们。 您还可以使用代码配置 WooCommerce 的各种元素，以个性化购物体验并从竞争对手中脱颖而出。 所有这些都需要向您的网站添加代码片段。

在我们查看不同的方法之前，让我们看看学习如何添加自定义代码的一些主要好处。

为什么在 WooCommerce 中添加和自定义代码？

WooCommerce 的主要功能之一是其可定制性。 凭借其已经多样化和灵活的选项以及各种可用的插件和插件，WooCommerce 成为最可定制的电子商务平台之一。 但是，添加自定义代码需要遵循几个要求。

无论是更改Proceed to checkout 文本、删除Add to Cart按钮还是更改站点的外观，您都需要使用自定义函数并使用 WooCommerce hooks。 开发人员和任何熟悉编码技能的人都知道能够以正确的方式添加代码片段是多么重要。 这不仅使您可以编辑商店，还可以为其添加功能。 好消息是，WooCommerce 和 WordPress 的开源特性使其成为一个更加平易近人的过程。

WooCommerce 完全支持其用户自定义其代码，尽管此过程涉及编辑具有一些风险的核心文件。

我们之前已经看过许多关于如何使用代码片段配置各种元素和文件的指南。 这一次，我们将专注于该过程的第一部分，并查看以正确方式将自定义代码添加到 WooCommerce 的不同方法。

如何将自定义代码添加到 WooCommerce

将代码片段添加到 WooCommerce 有多种方法：

  1. 使用内置的 WordPress 主题编辑器
  2. 使用专用插件
  3. 使用 FTP 访问主题文件
  4. 通过配置 WooCommerce 模板文件
  5. 通过创建一个新的自定义插件

让我们逐步了解每种方法。

注意：所有这些方法都需要编辑涉及一些风险的核心文件。 这就是为什么在开始之前备份您的网站是个好主意。

1) 使用内置的 WordPress 编辑器添加自定义

将自定义代码添加到 WooCommerce 的默认方法是使用内置主题编辑器。 您可以访问functions.php并将 PHP 代码直接添加到其中。 但是，如果代码有错误或者您删除了部分代码，您的网站可能会受到严重影响。 这就是为什么我们建议使用子主题并添加额外的安全层。

要在主题编辑器中打开functions.php文件，请转到仪表板上的外观 > 主题编辑器。 然后，单击右侧主题文件侧边栏上的functions.php 。

将自定义代码添加到 wordpress - 函数 php

将自定义代码添加到 functions.php 文件

现在，您可以从主题编辑器向 WooCommerce 添加自定义代码。 对于此演示，我们将更改默认的“购物车中没有产品”文本为“您的购物车当前为空，我们建议查看我们的特色产品！”：

 remove_action('woocommerce_cart_is_empty', 'wc_empty_cart_message', 10);
add_action（'woocommerce_cart_is_empty'，'quadlayers_empty_cart_message'，10）；

函数 quadlayers_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( '您的购物车目前是空的，我们建议您查看我们的特色产品！', 'woocommerce' ) ) );
回声 $html 。 '</p></div>';
}

只需将此脚本粘贴到您的主题编辑器中并更新文件以应用更改。

向 woocommerce 添加自定义代码 - 文本功能中没有购物车

查看前端，您应该会看到如下内容：

添加代码是一回事，但了解代码的工作原理也很重要。

上面的代码添加了一个自定义的 WooCommerce 钩子，该钩子应用特定的操作来用我们添加到代码中的自定义消息替换默认的Empty Cart Message 。 要更改文本，只需替换此行中的文本消息：

 $html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( '您的购物车目前是空的，我们建议您查看我们的特色产品！', 'woocommerce' ) ) );

如果您想了解有关自定义“购物车中没有产品”消息并充分利用它的更多信息，请查看此完整指南。

如前所述，以这种方式添加代码既快速又容易，但它涉及相当多的风险。 例如，使用错误的代码可能会破坏或崩溃您的网站。 此外，您的自定义代码可能存在兼容性问题，这可能会影响某些功能、插件或主题。 此外，如果您将代码添加到父主题的 function.php 中，然后更改或更新主题，您可能会丢失您添加的自定义代码。

这就是为什么如果您是初学者，我们建议您尝试第二种方法并使用插件将自定义代码添加到 WooCommerce。

2) 使用插件添加代码

在添加片段时，使用插件对初学者更友好。 您可以轻松控制在网站上启用的代码位，即使您更改主题，您添加的任何代码也将被保存。 此外，您可以随时激活或停用任何代码。

对于我们的演示，我们将使用代码片段插件。 它是向任何站点添加自定义代码的最流行的插件之一。

首先，通过打开您的WP Admin Dashboard并转到Plugins > Add New来安装插件。 使用右上角的搜索栏并搜索Code Snippets 。 然后，单击安装，最后激活插件。

将自定义代码添加到 wordpress - 安装代码片段

激活后，您就可以添加代码并自定义您的 WooCommerce 商店了。 转到Snippets > Add New添加新代码。

将自定义代码添加到 wordpress - 添加新代码段

命名您的代码片段并将您的代码添加到代码部分。 对于演示，我们将使用下面的代码来隐藏“添加到购物车”按钮。

 remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action（'woocommerce_single_product_summary'，'woocommerce_template_single_add_to_cart'，30）；

之后，您可以决定是要在整个网站上运行代码，还是选择在后端或仅在前端运行代码。 或者，您可以只运行此代码一次。

同样，您也可以选择为代码设置优先级并添加片段描述和标签。

将自定义代码添加到 woocommerce - 演示代码信息

设置所有详细信息后，单击保存更改或保存更改并激活以添加新代码。

如果您想单独停用或激活您的代码，请转到片段 > 所有片段，您可以单独禁用或启用任何片段。

将自定义代码添加到 wordpress - 启用禁用片段

3) 使用 FTP 客户端添加自定义代码

如果您无法使用所有这些选项，并且您需要手动将自定义代码添加到您的 WooCommerce 商店，您可能必须使用FTP 客户端来完成。 那里有几种工具，但在本教程中，我们将使用FileZilla。

注意：如果您不习惯使用 FTP 客户端或配置您的服务器及其文件，我们不推荐此方法。 此外，这可能需要访问您的cPanel和FTP 。 弄乱这些文件可能会对您的网站产生严重影响，因此如果您希望减少向您的网站添加自定义代码的风险，我们强烈建议您坚持使用上述方法。

首先，打开 FileZilla 或您喜欢的 FTP 客户端并将其连接到您的网站。 然后，在您网站的目录中找到您的主题文件。 这些通常位于服务器的/wp-content/themes目录中。 单击当前主题的文件夹或您可能正在配置的子主题。

将自定义代码添加到 woocommerce - filezilla wp

打开您的主题文件夹，右键单击其中的functions.php文件，然后按查看/编辑。

将自定义代码添加到 woocommerce - ftp 函数

在这里，使用文件编辑器，您可以将代码粘贴到文件末尾并保存。 为此，我们将使用与上面相同的代码来隐藏“添加到购物车”按钮：

 remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); 

remove_action（'woocommerce_single_product_summary'，'woocommerce_template_single_add_to_cart'，30）；

添加代码的另一个有趣的替代方法是自定义 WooCommerce 模板文件。

4) 通过自定义 WooCommerce 模板文件添加代码

编辑模板是配置 WooCommerce 商店及其所有页面的所有元素的最快方法之一。 这包括您的结帐页面、产品页面、商店页面和许多其他页面。

好消息是您可以使用内置的 WordPress 插件编辑器以与上述类似的方式编辑 WooCommerce 模板文件。 要访问它，请在您的管理仪表板上，转到Plugins > Plugin Editor 。

然后，使用右上角的选择插件下拉菜单，选择WooCommerce，然后单击选择。

这将更新下面的插件文件列表，您可以使用这些列表来配置 WooCommerce 文件和模板。 对于我们的演示，我们将编辑结帐的感谢页面。 因此，在Plugin Files列表下，选择Checkout >thankyou.php 。

然后，向下滚动并通过替换此行中的文本来更改收到的订单文本：

 <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( '谢谢。您的订单已收到。', 'woocommerce' ）， 空值 ）; // phpcs:忽略 WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>

例如，将收到的订单消息更改为“感谢您从我们这里购买。 您将很快收到有关说明的邮件。”，粘贴此代码：

 <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( '感谢您从我们这里购买。您将很快收到关于说明..', 'woocommerce' ), null ); // phpcs:忽略 WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>

向 woocommerce 添加自定义代码 - 谢谢页面编辑

在这里，我们刚刚将挂钩文本更新为更适合我们需要的内容。 一旦您对更改感到满意，请按Update File 。

如果您想了解有关配置模板文件的更多信息，请查看我们关于如何自定义 WooCommerce 模板文件的指南。

5) 通过创建新的自定义插件添加代码

在向 WooCommerce 添加自定义代码时，创建一个全新的插件也是一种选择。 这是一个更高级的用户选项，我们建议您仅在您希望将某个功能附加到独立插件时才使用此方法。 这样，您可以随时选择在需要或不需要特定功能时分别激活/停用插件。

此外，如果您还必须管理多个站点，这可能是一个很好的解决方案。 您可以使用插件将功能附加到站点，而不是手动将代码添加到它们。

此外，WordPress 本身使得创建和使用新插件变得非常容易。 您所要做的就是在您的网站目录中创建一个新的插件文件夹，并在其 PHP 文件中添加一些代码。 首先，您需要先使用FTP连接到您的网站。 我们将使用 Filezilla 作为我们的指南，但对于任何其他 FTP 客户端，该过程应该类似。

但是，在开始之前，我们强烈建议您备份您的网站。

创建新插件文件夹以将自定义代码添加到 WooCommerce

将您的网站与 FTP 连接后，打开您网站的导向器。 然后，导航到您的/wp-content/plugins文件夹。

现在，在 plugins 文件夹中创建一个新目录，并根据您的代码命名并展开它。 对于我们的演示，我们将其命名为Remove-Add-To-Cart 。

在 woocommerce 中添加自定义代码 - 创建目录

然后，右键单击文件夹以单击Create new file 。 在这里，您需要创建一个与您的文件夹同名的 .php 文件。 因此，我们将文件命名为Remove-Add-to-Cart.php。

创建文件后，继续并通过右键单击它并单击View/Edit打开它。

接下来，我们将添加几行代码来为其添加插件名称、描述和作者姓名：

 <?php
/**
* 插件名称：删除加入购物车
* 描述：添加删除添加到购物车插件
* 作者：Sijal Shrestha
* 版本：1.0
*/

/* 把你的代码片段放在这里。 */
/* 把你的片段放在这里。 */
?>

在 woocommerce 中添加自定义代码 - 向 php 添加描述

将自定义代码添加到新插件

现在，您可以开始将自定义代码添加到插件中。 您需要在 /*Put your snippets here */ 部分之间添加自定义代码。 提醒一下，这些行只是注释，因此它们不会影响您的代码，您可以根据需要删除它们。

 <?php
/**
* 插件名称：删除加入购物车
* 描述：添加删除添加到购物车插件
* 作者：Sijal Shrestha
* 版本：1.0
*/

/* 把你的代码片段放在这里。 */

remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action（'woocommerce_single_product_summary'，'woocommerce_template_single_add_to_cart'，30）；
/* 把你的片段放在这里。 */
?>

接下来，保存您的文件，您应该会看到插件列在插件页面下的WP 管理仪表板上。

激活插件，您的自定义代码应该可以完美运行。 如果您愿意，也可以压缩插件文件夹并将其安装在不同的网站上。 只需从您的 FTP 客户端下载该文件夹并压缩该文件夹。

然后，您可以使用此 zip 在任何网站上安装您的插件。 如果您需要更多帮助，我们还提供了手动安装 WordPress 插件的详细说明。

您应该使用哪种方法来添加自定义代码？

我们已经看到了不同的方法，但添加片段的最佳方法是什么？ 虽然使用 FTP 客户端并手动访问您的文件可以非常快速和简单，但以这种方式添加自定义代码可能会涉及重大风险。 这就是为什么要尽量减少风险，我们建议改用专用的自定义代码插件，尤其是在您没有高级编码技能的情况下。

这种方法的风险要小得多，并且它可以具有其他优点，例如：

  • 能够跟踪不同的代码并随时启用/禁用它们
  • 添加冲突代码并在需要时交替启用/禁用它们
  • 检查与主题/安装的兼容性
  • 更容易调试和从问题中恢复

使用专用插件将自定义代码添加到 WooCommerce 为您提供了一种简单的方法来配置您的钩子，同时最大限度地减少可能出现的问题。 但是，如果您想确保新添加的代码不会导致问题或使您的网站崩溃，我们建议您查看以下提示。

将自定义代码添加到 WooCommerce 时的最佳实践

1) 使用子主题

如果您要将自定义代码添加到您的functions.php文件，我们建议您首先使用子主题。 无论您编辑或添加什么代码，使用子主题可以确保您可以随时恢复任何更改，而无需修改核心主题文件。

此外，在更改代码和修改样式表时要考虑的重要一点是，如果您要更新WordPress 主题，您可能会丢失所有更改。 这是因为您的funcitons.php文件将被主题更新覆盖并删除所有自定义代码。 这就是为什么不推荐向父主题添加代码的原因。

使用子主题，您可以确保即使在更新父主题后也不会丢失自定义。 此外，如果您的主题中断，您可以随时恢复更改并重新开始。

您可以通过编程方式创建子主题或使用专用插件。 在本节中，我们将向您展示如何使用插件创建子主题，因为它是一个更简单的过程。

使用插件创建子主题

使用插件创建子主题是一个简单且适合初学者的过程。 您可以使用许多插件。 对于这个演示，我们将使用Child Theme Wizard 。

首先，打开您的WP Admin Dashboard并前往Plugins > Add new 。 然后，使用右上角的搜索菜单搜索Child Theme Wizard 。 单击安装，然后在按钮切换后按激活。

将自定义代码添加到 wordpress - 安装子主题向导

然后，您可以通过单击工具 > 子主题向导来访问插件的功能。

要创建新的子主题，请使用父主题字段选择您要为其创建子主题的主题。 对于我们的演示，我们将使用Storefront主题。

然后，添加标题、描述、URL 等详细信息。 完成后，单击创建子主题，您应该就完成了。

现在通过导航到侧边栏上的外观 > 主题并在新创建的子主题上按激活来切换到您的子主题。

向 woocommerce 添加自定义代码 - 激活子主题

而已！ 现在您可以在新创建的子主题下自由地将您的自定义代码添加到您的function.php文件中。

2) 使用 WordPress 备份插件并设置备份

修改任何 WordPress/WooCommerce 文件或更改安装中的任何文件时，最重要的事情之一就是设置备份。 虽然 WooCommerce 非常灵活，但不兼容或故障代码会造成严重问题。

在某些情况下，它可能会崩溃甚至破坏您的网站，并导致您的 WooCommerce 业务停机。 这就是我们强烈建议您创建定期备份的原因。 因此，在将任何自定义代码添加到您的站点之前，请记住创建一个备份，以防万一出现问题。

有关这方面的更多信息，请查看我们关于如何在 WordPress 中创建备份的专用指南。

3) 了解代码如何工作以及如何使用 WooCommerce 钩子和函数

WooComerce 的大多数自定义代码都使用挂钩来执行某些操作或更改某些元素。 这就是为什么在您的自定义代码之前了解这些过滤器的工作原理以及它们如何应用于您的网站是一个好主意。 这不仅可以防止您使用不完整或有故障的代码，还可以确保您可以对其进行自定义，以便更好地满足您的需求。

例如，让我们看一下如果您没有登录则禁用购买的这段代码：

 add_action('woocommerce_before_single_product', 'quadlayers_add_message');
add_filter('woocommerce_is_purchasable', 'quadlayers_block_admin_purchase');
功能 quadlayers_block_admin_purchase($block) {
if ( is_user_logged_in() ):return true;
否则：返回假；
万一;
}

函数 quadlayers_add_message( ){
if ( !is_user_logged_in() ):echo '<H2>请登录购买此产品</h2>';
万一;
}

这就是 WooCommerce 钩子在这里的工作方式：

  • 动作钩子用于使用QuadLayers_add_message函数打印消息，而过滤器钩子使用quadlayers_block_admin_purchase函数禁用“添加到购物车”按钮
  • 这两个函数中都使用了IF语句来检查用户是否已登录
  • 如果条件 IF 语句返回 true，则应用woocommerce_is_purchasable挂钩
  • 我们还应用了一些额外的 CSS 来更改消息的文本样式以及添加自定义颜色

让我们继续将其添加到我们的子主题的function.php文件中：

这在前端给了我们这个结果：

如果您想了解 WooCommerce 自定义代码的工作原理，请查看我们的指南，了解如何使用 WC 挂钩。

结论

总之，学习如何向 WooCommerce 添加自定义代码可能是自定义商店体验的关键部分。 您定制的东西越多，您就越能从竞争对手中脱颖而出。 通过添加代码片段，您可以避免过度依赖插件并拥有更大的灵活性。

在本指南中，我们看到了添加代码片段的不同方法：

  • 通过使用内置的主题编辑器来编辑 functions.php 文件
  • 使用专用的 WordPress 插件添加自定义代码片段
  • 使用FTP手动访问function.php文件
  • 使用插件编辑器手动编辑 WooCommerce 模板
  • 使用 FTP 使用自定义代码创建新插件。

所有这些方法都允许您轻松自定义和配置您的 WooCommerce 网站。 所有这些方法都需要基本的编码技能，但使用插件是最适合初学者的方法。 从内置编辑器编辑 functions.php 文件很容易，但您需要注意一些风险。 如果您想直接自定义 WooCommerce 模板文件，这同样适用。 最后，使用 FTP 客户端是一种更高级的方法，因为它需要一定的知识来配置服务器文件。

您是否已将代码片段添加到您的 WooCommerce 商店？ 您使用了哪种方法？ 您知道我们应该添加的任何其他方式吗？ 在下面的评论部分让我们知道！

最后，如果您正在寻找其他代码片段和以编程方式自定义商店的方法，我们可以为您提供一些东西。 如果您喜欢本指南，请查看这些有助于您充分利用 WooCommerce 商店的文章：

  • 如何以编程方式编辑 WooCommerce 产品页面
  • 以编程方式编辑 WooCommerce 我的帐户页面
  • 如何以编程方式编辑 WooCommerce 商店页面