如何以编程方式自定义 WooCommerce 模板

已发表: 2021-05-04

您想在您的网站上编辑模板吗？本指南将向您展示如何使用钩子和覆盖它们以编程方式自定义 WooCommerce 模板。

为什么要编辑 WooCommerce 模板？

网上购物比去实体店更舒适、更快捷，因此电子商务在过去几年变得非常流行。竞争如此激烈，仅仅建立您的 WooCommerce 商店并将您的产品放到网上是不够的。你需要想办法从人群中脱颖而出。

最好的方法之一是定制您的商店。除了更改标题和编辑结帐或商店页面等关键页面外，您还可以自定义您使用的模板。编辑模板的网站并不多，因此通过这样做，您将能够比竞争对手更具优势。

如果您有编码技能，您可能知道在编辑商店时建议使用子主题。同样，WordPress 和 WooCommerce 内置挂钩提供了很多可能性来编辑和添加新功能到任何网站。

如何以编程方式自定义 WooCommerce 模板

以编程方式自定义 WooCommerce 模板有两种主要方法：

带挂钩
覆盖模板

这些方法中的每一种都有不同的用途。让我们仔细看看它们的主要区别。

覆盖模板文件或使用钩子？

建议使用挂钩自定义商店。但是，在使用钩子自定义 WooCommerce 时，您可能会遇到不兼容问题。对于更复杂的自定义，覆盖 WooCommerce 模板文件可能是一个更好的选择。

重要的是要注意，当您覆盖模板文件时，对该文件起作用的钩子将停止工作。每个挂钩都指向一个特定的文件，因此如果您编辑触发挂钩的同一个文件，您将无法使用它们。

例如，让我们抓取single-product.php文件来查看挂钩是如何创建的。另外，请注意钩子在循环之前和之后的位置。

 如果（！定义（'ABSPATH'））{
        出口; // 如果直接访问则退出
}
 get_header('商店'); ?>
 <?php
                /**
                 * woocommerce_before_main_content 钩子。
                 *
                 * @hooked woocommerce_output_content_wrapper - 10（输出内容的打开 div）
                 * @hooked woocommerce_breadcrumb - 20
                 */
                do_action('woocommerce_before_main_content');
        ?>
                <?php while ( have_posts() ) : ?>
                        <?php the_post(); ?>
                        <?php wc_get_template_part('内容', '单一产品'); ?>
                <?php 结束； // 循环结束。 ?>
        <?php
                /**
                 * woocommerce_after_main_content 钩子。
                 *
                 * @hooked woocommerce_output_content_wrapper_end - 10（输出内容的关闭 div）
                 */
                do_action('woocommerce_after_main_content');
        ?>
        <?php
                /**
                 * woocommerce_sidebar 钩子。
                 *
                 * @hooked woocommerce_get_sidebar - 10
                 */
                do_action('woocommerce_sidebar');
        ?>
 <?php
 get_footer('商店');

如果您查看脚本，您将看到我们如何在do_action('name-of-the-hook');上创建挂钩。线。

假设您在子主题的functions.php文件中有以下钩子：

 add_action('woocommerce_after_main_content',function(){echo “单个产品模板文件后的自定义内容”;});

您可以在模板文件上回显相同的内容，如下所示：

 <?php 结束； // 循环结束。 ?>
        <?php
 echo “单个产品模板文件后的自定义内容”；
                /**
                 * woocommerce_after_main_content 钩子。
 do_action('woocommerce_after_main_content');

但是，通过这样做， do_action('woocommerce_after_main_content'); 函数将变得无用，因为您已经在那里添加了代码而不是用钩子拉它。因此，您可能希望删除文件中所有不必要的钩子，删除do_action('name-of-the-hook'); 部分。

请记住，如果您在网站上的其他地方使用woocommerce_after_main_content()挂钩并删除do_action( 'name_of_your_hook' ); 在这个文件中，钩子将不再起作用。

删除挂钩和不必要的 PHP 标记后，您的文件应如下所示：

 如果（！定义（'ABSPATH'））{
 出口; // 如果直接访问则退出
}
 get_header('商店');
 而（有_posts（））：
 the_post();
 wc_get_template_part('内容', '单一产品');
 结束； // 循环结束。
 do_action('woocommerce_sidebar');
 get_footer('商店');

注意：以这种方式移除钩子可能会影响第三方代码，例如插件和主题，导致失败或破坏您的网站。 假设您知道自己在做什么。

自定义和覆盖 WooCommerce 模板文件

覆盖 WooCommerce 模板文件为您提供了很大的灵活性来自定义您的商店。但是，如前所述，您必须了解，当您覆盖模板文件的内容时，作用于该文件的挂钩将停止工作。此外，WooCommerce 可能会不时更改模板文件，因此如果有更新并且他们更改了文件，您可能会发现您编辑的文件已过期。

覆盖模板时要记住的事项

如果您在这里，您可能具有一些编码技能，并且知道如何使用和安装子主题。如果不是这种情况，请查看我们的指南以创建子主题或使用这些插件之一。

覆盖 WooCommerce 模板类似于覆盖functions.php文件。主要区别在于您编辑 WooCommerce 的模板文件而不是主题文件。

为此，您需要从 WooCommerce 插件模板文件夹中复制所需的模板文件，并将其粘贴到 WooCommerce 文件夹下的子主题中。如果您遵循 WooCommerce 模板文件夹、文件名和子文件夹的相同结构；您将能够覆盖模板文件，甚至是子文件夹中的文件。

有许多 WooCommerce 模板文件，每个文件都负责一项任务。您可以在此链接中查看可以编辑的模板文件的完整列表以及子目录和文件夹结构。

如您所见，根模板文件夹中有一些文件以及几个子目录。您可以像编辑主文件（如archive-product.php 、 single-product.php或content-single-product.php ）一样自定义任何子目录中的文件。同样，如果您遵循与子主题中相同的文件夹名称和结构，您还可以自定义购物车、我的帐户、电子邮件或结帐文件夹中的文件。

因此，如果您想自定义其中一些文件，您的子主题将如下所示：如何以编程方式自定义 woocommerce 模板

话虽如此，让我们看一下您可以做些什么来自定义 WooCommerce 模板的一些示例。

1. 向 WooCommerce 模板添加简码

一种有趣的替代方法是在您的代码中使用简码。大多数现有的短代码应该在这里工作，但在官方 WooCommerce 和 WordPress 之外找到一些不受支持的短代码也很常见。

例如，以下脚本将在所有单个产品页面中包含帐户仪表板。请记住将其粘贴到您在子主题上创建的single-product.php文件中。

 <?php
 如果（！定义（'ABSPATH'））{
 出口; // 如果直接访问则退出
}
 get_header('商店');
 而（有_posts（））：
 the_post();
 wc_get_template_part('内容', '单一产品');
 结束； // 循环结束。
 do_action('woocommerce_sidebar');
 $t= '<div><h4>我的帐户</h4>';
 $t.= do_shortcode(" [ woocommerce_my_account ] ");
 $t.="</div>";
 回声$t;
 get_footer('商店');

这是实时产品页面上的结果：

自定义 woocommerce 模板文件 - 将简码添加到 wc 模板

2. 为之前购买过该产品的客户展示内容

如果您的客户已经从您那里购买了产品并再次购买相同的产品，您可以为他们提供折扣代码以改善他们的体验并让他们一次又一次地回到您的商店。

以下脚本将在产品页面上为过去购买相同产品的回头客显示内容。我们再次编辑single-product.php文件：

 get_header('商店');
 而（有_posts（））：
 the_post();
 wc_get_template_part('内容', '单一产品');
 结束； // 循环结束。
 $current_user = wp_get_current_user();
 如果 ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
 echo '<div class="user-bought">&hearts; 嘿 ' 。 $current_user->first_name 。 '，你以前买过这个。 使用此优惠券再次购买：<b>PURCHASE_AGAIN_21</b></div>'；
 万一;
 get_footer('商店');

自定义 woocommerce 模板文件 - 在回头客之前显示购买的内容

3.根据产品数量和购物车总价删除添加到购物车按钮

如果您想以编程方式自定义 WooCommerce 模板，另一个有趣的示例是根据客户购买的商品数量以及购物车的总价格添加购物车按钮。

在这种情况下，我们将使用位于模板目录中循环文件夹内的文件进入 WooCommerce 循环。只需在子主题的woocommerce文件夹下名为loop的文件夹下创建一个新的add-to-cart.php文件，然后粘贴此脚本：

 如果（！定义（'ABSPATH'））{
 出口;
 }
 全球$产品；
 $count= WC()->购物车->get_cart_contents_count();
 $total_price= WC()->购物车->get_cart_total();
 preg_match_all('!\d+!', $total_price, $matches);
 $to_int = intval($matches[0][1]);
 如果（$to_int>500）{
 echo "超过总购物车限额";
 }
 elseif($count<10){
 回声应用过滤器（
 'woocommerce_loop_add_to_cart_link', // WPCS：XSS 正常。
 冲刺f(
 '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
 esc_url($product->add_to_cart_url()),
 esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
 esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
 isset（$args['attributes']）？ wc_implode_html_attributes( $args['attributes'] ) : '',
 esc_html( $product->add_to_cart_text() )
 ),$product,$args);
 }
 别的{
 echo "超出数量限制";
 }

在这种情况下，我们添加了一个条件逻辑if()语句来检查购物车中添加的商品是否超过 10 件，并且购物车的总价格不超过 500 美元。

如您所见，我们正在进入以这种方式调用 WooCommerce 对象的 WooCommerce 类范围： WC()->cart 。这样，您可以根据条件检索一些信息以将购物车按钮添加到商店页面或不添加。

这是应用两个条件限制时的结果：

根据产品数量和购物车总价删除添加到购物车按钮

请记住，这仅适用于主商店页面。如果您想在其他页面上执行相同操作，则需要添加更多代码。

4. 编辑 WooCommerce 电子邮件模板文件

电子邮件模板已经包含指向您网站的有用链接，但有些用户可能没有意识到这一点。因此，让我们添加一个指向电子邮件模板的链接，用户可以直接从他们收到的电子邮件登录网站。

我们会将链接添加到电子邮件布局的标题中，因此我们需要email-header.php文件的副本，该文件位于 WooCommerce 的模板子目录的电子邮件文件夹中。

在您的子主题上创建一个新文件夹，然后将同名文件粘贴到那里。您将看到起始标志<!–header–>和<!–end header–> ，这就是您要添加链接的地方：

 <!-- 标题 -->
 <表格边框="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
 <td>
 <h1><?php 回显 $email_heading; ?></h1>
 <h3>
 <?php echo '<span class="my-link"><a href="#login-URL">登录您的帐户</a></span>';?>
 </h3>
 </td>
 </tr>
 </table>
 <!-- 结束标题 →

而已！您刚刚编辑了 WooCommerce 电子邮件模板头文件。同样，您可以编辑位于此目录中的所有电子邮件模板文件。有关如何测试电子邮件模板的更多信息，请查看此完整指南。

要预览模板，我们建议您使用电子邮件预览插件。在这里，您会找到一些可以使用的电子邮件插件。

编辑 WC 电子邮件模板文件

5. 如何将 CSS 样式应用于 WooCommerce 电子邮件模板

另一个有趣的选择是以编程方式自定义 WooCommerce 模板的样式。编辑 HTML 标记后，您可以向电子邮件模板添加一些 CSS 样式。考虑到内联 CSS 不是推荐的做法，我们需要使用email-styles.php文件。这是处理电子邮件模板的 CSS 的文件。

要将自定义 CSS 代码应用于电子邮件，请从 WooCommerce 插件文件夹中复制此文件并将其粘贴到您的主题 WooCommerce 文件夹中。这是一个 PHP 文件，因此您将能够使用变量、函数并构建自己的逻辑语句并将它们应用于样式：

 一个 {
 颜色：<?php echo esc_attr($link_color); ?>;
 字体粗细：正常；
 文字装饰：下划线；
 }

这是自定义链接选择器：

 .my-link > a:nth-child(1){
 白颜色;
 字体大小：14px；
 }

结论

总之，编辑模板文件是从竞争对手中脱颖而出并为客户提供更好购物体验的绝佳方式。

以编程方式自定义 WooCommerce 模板有两种主要方法：

带挂钩
覆盖模板

我们比较了这两种方法并向您展示了几个示例。您可以使用这些脚本作为基础并尝试自定义它们并将它们应用到您的商店。

如果您对本指南有任何问题，请在下面的评论中告诉我们，我们将尽最大努力为您提供帮助。