WooCommerce：在商品列表和归档页产品价格下方添加自定义信息-php教程-PHP中文网

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

碧海醫心

发布： 2025-07-19 13:12:13

原创

412人浏览过

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

本教程详细指导如何在WooCommerce商店和归档页面上的产品价格下方插入自定义PHP内容，例如作者电话号码。通过利用WordPress的functions.php文件和WooCommerce提供的特定动作钩子woocommerce_after_shop_loop_item，开发者可以灵活地在商品循环中添加动态信息，从而增强页面展示效果。

概述

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

理解WooCommerce动作钩子

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

实现步骤

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

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

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

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

登录后复制

代码解析

function custom_content_after_product_price(): 这是一个自定义的PHP函数，其中包含了你希望在每个产品项下方显示的所有逻辑。
echo '<div class="product-author-phone">'; the_author_meta( 'phone' ); echo '</div>';: 这行代码是实际输出内容的部分。在这个示例中，它输出了一个带有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 文件中添加类似以下规则：

绘蛙AI商品图
电商场景的AI创作平台，无需高薪聘请商拍和文案团队，使用绘蛙即可低成本、批量创作优质的商拍图、种草文案

80

查看详情
```
.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或主机控制面板的文件管理器删除或修正错误代码即可恢复。
性能考量： 确保你的自定义函数执行效率高，避免在循环中进行大量数据库查询或其他耗时操作，以防影响网站性能。