0

0

在WooCommerce商店和归档页面产品价格后添加自定义内容

霞舞

霞舞

发布时间:2025-07-18 21:02:11

|

332人浏览过

|

来源于php中文网

原创

在woocommerce商店和归档页面产品价格后添加自定义内容

本教程详细介绍了如何在WooCommerce商店和产品归档页面(非单品页)的产品价格下方,通过使用WordPress和WooCommerce的动作钩子,插入自定义PHP内容。文章将提供具体的代码示例,并解释其工作原理,帮助开发者轻松实现页面内容的灵活扩展。

概述:利用动作钩子扩展WooCommerce显示

在WooCommerce中,我们经常需要对默认的产品显示布局进行调整,例如在产品价格下方添加额外的信息,如作者电话、商品库存状态或自定义标签等。WooCommerce提供了丰富的动作钩子(Action Hooks),允许开发者在特定位置注入自定义代码,而无需直接修改核心模板文件。这种方法不仅安全,而且在主题或插件更新时能够保持修改的有效性。

本教程的目标是在WooCommerce的商店主页、分类页和标签归档页等产品列表页面中,于每个产品价格的下方添加一段自定义的PHP内容。这里以输出产品作者的电话信息为例,但其原理适用于任何希望添加的HTML或PHP内容。

实现步骤:在functions.php中添加代码

要实现这一功能,我们需要将自定义代码添加到WordPress主题的functions.php文件中。强烈建议使用子主题(Child Theme)的functions.php文件,以避免在主题更新时丢失您的修改。

Cliclic AI
Cliclic AI

Cliclic商品背景图编辑器是一款功能强大的AI工具,帮助用户快速生成具有吸引力的商品图背景。

下载
  1. 访问主题文件: 通过WordPress后台的“外观” -> “主题文件编辑器”,或使用FTP/cPanel文件管理器,导航到您的主题(或子主题)目录下的functions.php文件。

  2. 添加自定义函数和钩子: 将以下代码片段添加到functions.php文件的末尾:

    <?php
    /**
     * 在WooCommerce商店和归档页面的产品价格后添加自定义内容
     */
    function woocommerce_after_product_price_custom_content() {
        // 在这里放置您希望显示的代码
        // 示例:显示产品作者的电话元数据
        echo '<p class="product-author-phone">'; // 可以添加自定义的HTML标签和类名以便后续样式控制
        the_author_meta( 'phone' ); // 假设作者的电话存储在'phone'元字段中
        echo '</p>';
        // 您也可以输出其他内容,例如:
        // echo '<span>更多信息</span>';
        // echo do_shortcode('[your_custom_shortcode]'); // 如果需要输出短代码
    }
    
    // 将自定义函数挂载到 'woocommerce_after_shop_loop_item' 动作钩子
    // 'woocommerce_after_shop_loop_item' 钩子在每个产品在循环中显示后触发
    // 10 是优先级,数字越小越先执行
    // 0 是接受的参数数量
    add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_after_product_price_custom_content', 10, 0 );
    ?>

代码解析

  • woocommerce_after_product_price_custom_content() 函数: 这是一个自定义的PHP函数,它包含了您希望在产品价格下方显示的所有逻辑和内容。

    • the_author_meta( 'phone' );:这是一个WordPress函数,用于获取并显示当前文章(或产品,因为WooCommerce产品本质上是自定义文章类型)作者的指定元数据。这里的'phone'是元数据键名,您需要确保您的用户(或产品作者)资料中存在名为phone的自定义字段,并且其中存储了电话号码。
    • echo '<p class="product-author-phone">'; 和 echo '</p>';:这些是HTML标签,用于包裹输出的内容,方便您后续通过CSS进行样式设计。您可以根据需要修改或删除这些标签。
  • add_action() 函数: 这是WordPress的核心函数,用于将自定义函数与特定的动作钩子关联起来。

    • 'woocommerce_after_shop_loop_item':这是WooCommerce提供的一个动作钩子。它在每个产品项在产品循环(即商店页面、分类页面、标签页面等)中被完全渲染之后触发。这意味着您的自定义内容将出现在产品价格以及任何其他默认内容之后。
    • 'woocommerce_after_product_price_custom_content':这是您定义的自定义函数的名称。
    • 10:这是函数的优先级。数字越小,函数执行得越早。默认优先级是10。
    • 0:这是函数接受的参数数量。woocommerce_after_shop_loop_item 钩子不传递任何参数,因此这里设置为0。

注意事项与扩展

  1. 子主题的重要性: 再次强调,务必在子主题的functions.php中添加代码。如果直接修改父主题,主题更新将覆盖您的所有修改。
  2. 自定义内容: the_author_meta( 'phone' ); 只是一个示例。您可以替换为任何有效的PHP代码或HTML内容。例如:
    • 显示自定义字段:echo get_post_meta( get_the_ID(), '_my_custom_field', true );
    • 显示静态文本:echo '<span>免费送货!</span>';
    • 根据条件显示内容:
      if ( get_post_meta( get_the_ID(), '_is_featured_product', true ) ) {
          echo '<span>? 热门商品</span>';
      }
  3. 样式调整: 添加内容后,您可能需要通过CSS来调整其显示样式,例如字体大小、颜色、边距等。您可以使用在代码中添加的HTML类名(如product-author-phone)来定位和美化这些内容。将CSS代码添加到主题的style.css文件中(同样,子主题优先)。
  4. 钩子的选择: 理解不同WooCommerce钩子的作用至关重要。woocommerce_after_shop_loop_item 适用于产品列表页面的每个产品项之后。如果您需要在单品页面添加内容,则需要使用不同的钩子,例如woocommerce_single_product_summary或woocommerce_after_add_to_cart_button等。
  5. 性能考虑: 避免在自定义函数中执行过于复杂的数据库查询或耗时操作,这可能会影响网站性能。

总结

通过利用WooCommerce提供的动作钩子,我们可以非常灵活且安全地在不修改核心模板文件的情况下,向商店和归档页面添加自定义内容。本教程以在产品价格后添加作者电话为例,展示了woocommerce_after_shop_loop_item钩子的强大功能。掌握这种扩展方式,将大大提升您定制WooCommerce网站的能力。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

891

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

32

2025.12.06

数据库三范式
数据库三范式

数据库三范式是一种设计规范,用于规范化关系型数据库中的数据结构,它通过消除冗余数据、提高数据库性能和数据一致性,提供了一种有效的数据库设计方法。本专题提供数据库三范式相关的文章、下载和课程。

389

2023.06.29

如何删除数据库
如何删除数据库

删除数据库是指在MySQL中完全移除一个数据库及其所包含的所有数据和结构,作用包括:1、释放存储空间;2、确保数据的安全性;3、提高数据库的整体性能,加速查询和操作的执行速度。尽管删除数据库具有一些好处,但在执行任何删除操作之前,务必谨慎操作,并备份重要的数据。删除数据库将永久性地删除所有相关数据和结构,无法回滚。

2111

2023.08.14

vb怎么连接数据库
vb怎么连接数据库

在VB中,连接数据库通常使用ADO(ActiveX 数据对象)或 DAO(Data Access Objects)这两个技术来实现:1、引入ADO库;2、创建ADO连接对象;3、配置连接字符串;4、打开连接;5、执行SQL语句;6、处理查询结果;7、关闭连接即可。

357

2023.08.31

MySQL恢复数据库
MySQL恢复数据库

MySQL恢复数据库的方法有使用物理备份恢复、使用逻辑备份恢复、使用二进制日志恢复和使用数据库复制进行恢复等。本专题为大家提供MySQL数据库相关的文章、下载、课程内容,供大家免费下载体验。

259

2023.09.05

vb中怎么连接access数据库
vb中怎么连接access数据库

vb中连接access数据库的步骤包括引用必要的命名空间、创建连接字符串、创建连接对象、打开连接、执行SQL语句和关闭连接。本专题为大家提供连接access数据库相关的文章、下载、课程内容,供大家免费下载体验。

329

2023.10.09

数据库对象名无效怎么解决
数据库对象名无效怎么解决

数据库对象名无效解决办法:1、检查使用的对象名是否正确,确保没有拼写错误;2、检查数据库中是否已存在具有相同名称的对象,如果是,请更改对象名为一个不同的名称,然后重新创建;3、确保在连接数据库时使用了正确的用户名、密码和数据库名称;4、尝试重启数据库服务,然后再次尝试创建或使用对象;5、尝试更新驱动程序,然后再次尝试创建或使用对象。

420

2023.10.16

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

CSS教程
CSS教程

共754课时 | 42.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号