WooCommerce：在商品列表和归档页产品价格下方添加自定义信息

概述

许多woocommerce商店所有者或开发者都希望在商店和归档页面上，而非仅在单个产品页面，直接在产品价格下方显示额外的动态信息。这可能包括卖家联系方式、自定义标签或特定的产品属性。直接修改主题模板文件既繁琐又容易在主题更新时被覆盖。一个更健壮的解决方案是利用wordpress和woocommerce提供的动作钩子（action hooks）。

理解WooCommerce动作钩子

WooCommerce，与WordPress核心类似，提供了一套丰富的动作和过滤钩子（Action and Filter Hooks）。这些钩子允许开发者在不直接修改核心插件文件或主题模板的情况下，注入自定义代码或修改默认行为。对于在主商店循环中（包括商店页面和产品归档页面）每个产品项 之后 添加内容的需求，woocommerce_after_shop_loop_item 钩子尤其适用。此钩子在每个产品项（包括图片、标题、价格、添加到购物车按钮等）渲染完成后触发。

实现步骤

要实现此功能，你需要编辑主题的 functions.php 文件。强烈建议使用子主题（Child Theme）来添加任何自定义代码，以防止主题更新覆盖你的修改。

1. 访问 functions.php 文件：

   • 方法一（推荐）： 通过FTP客户端或主机控制面板（如cPanel）的文件管理器，导航到你的WordPress安装目录，然后进入 wp-content/themes/你的子主题名称/ 目录，找到 functions.php 文件。
   • 方法二： 登录WordPress后台，前往“外观” -> “主题文件编辑器”。在右侧选择你的子主题，然后找到 functions.php 文件。

2. 添加自定义代码： 将以下PHP代码添加到 functions.php 文件的末尾（在 ?> 标签之前，如果存在的话，或者直接在文件末尾）：

   /**
    * 在WooCommerce商品列表和归档页产品价格下方添加自定义内容
    *
    * @return void
    */
   function custom_content_after_product_price() {
       // 在这里放置你希望显示的内容。
       // 示例：显示当前产品作者的“电话”元数据。
       // 可以添加一个包装 div 便于样式化。
       echo '
   ';
       the_author_meta( 'phone' );
       echo '
   ';
   }
   add_action( 'woocommerce_after_shop_loop_item', 'custom_content_after_product_price', 10 );

代码解析

• function custom_content_after_product_price(): 这是一个自定义的PHP函数，其中包含了你希望在每个产品项下方显示的所有逻辑。
• echo '
  '; the_author_meta( 'phone' ); echo '
  ';: 这行代码是实际输出内容的部分。在这个示例中，它输出了一个带有CSS类 product-author-phone 的 div 标签，并在其中调用了 the_author_meta('phone') 函数。the_author_meta() 是一个WordPress函数，用于显示当前文章或产品作者的指定元数据（例如，电话号码）。你可以根据实际需求替换或扩展这部分内容。
• add_action( 'woocommerce_after_shop_loop_item', 'custom_content_after_product_price', 10 );: 这是实现功能的核心部分。它将你的自定义函数 custom_content_after_product_price 挂载到 woocommerce_after_shop_loop_item 动作钩子上。
  • woocommerce_after_shop_loop_item: 这是WooCommerce在每个产品循环项渲染完成后触发的钩子。
  • custom_content_after_product_price: 你定义的函数名。
  • 10: 这是优先级参数。数字越小，函数执行得越早。默认值为10。

自定义与注意事项

• 内容定制： 你可以将 the_author_meta('phone') 替换为任何你需要的PHP代码、HTML标记、短代码（使用 do_shortcode() 函数）或其他动态内容。例如，如果你想显示一个自定义字段，可以使用 echo get_post_meta( get_the_ID(), 'your_custom_field_key', true );。

• CSS样式： 添加的自定义内容可能需要通过CSS进行样式调整，以确保其与主题设计协调一致。例如，你可以在子主题的 style.css 文件中添加类似以下规则：

  

  启昌企业网站管理系统1.3

  注意：请将此程序放在网站根目录下运行。若没有IIS，请直接运行根目录下的 测试.exe 进行本地测试。 基本功能表基本设置：后台可修改联系方式,网站信息。管 理 员：可新增管理员。自定义导航：新增修改导航菜单、菜单排序等。单页管理：单页面新增关键词和描述等。新闻增加：新闻可设置标题、新闻分类、添加内容等。新闻管理：可分类查看新闻、修改新闻、删除新闻等。产品管理：产品增加二级分类，产品略缩图、产品

  下载

  .product-author-phone {
      font-size: 0.9em;
      color: #666;
      margin-top: 5px;
      text-align: center; /* 如果需要居中显示 */
  }

• 钩子选择： 如果 woocommerce_after_shop_loop_item 的位置不完全符合你的需求，WooCommerce还提供了许多其他钩子，例如：

  • woocommerce_before_shop_loop_item_title：在产品标题之前。
  • woocommerce_after_shop_loop_item_title：在产品标题之后。
  • woocommerce_after_shop_loop_item_price：在产品价格之后（可能需要更精细的优先级调整以避免与其他元素重叠）。 选择最适合你显示位置的钩子。

• 错误处理： 在修改 functions.php 文件之前务必备份。如果代码中存在语法错误，可能会导致网站白屏（PHP解析错误）。如果发生这种情况，通过FTP或主机控制面板的文件管理器删除或修正错误代码即可恢复。

• 性能考量： 确保你的自定义函数执行效率高，避免在循环中进行大量数据库查询或其他耗时操作，以防影响网站性能。

总结

通过利用WooCommerce提供的强大动作钩子机制，我们可以非常灵活且非侵入性地在商店和归档页面上产品价格下方添加自定义动态内容。这种方法不仅易于实现和维护，还能确保你的修改在主题更新时保持不变，是扩展WooCommerce功能的标准实践。