1. 概述与准备
在woocommerce单品页添加一个点击触发的模态框（modal box）是一个常见的需求，用于展示额外信息、促销内容或特定表单。本教程将指导您如何通过wordpress的钩子（hooks）、php、html和javascript实现这一功能。
前提条件：
- 一个正在运行的WordPress网站，并安装了WooCommerce。
- 强烈建议使用子主题（Child Theme）进行所有代码修改，以避免主题更新时覆盖您的定制内容。
- 对PHP、HTML、CSS和JavaScript有基本的了解。
我们将主要在子主题的functions.php文件、一个JavaScript文件和一个CSS文件中进行操作。
2. 模态框HTML结构定义
首先，我们需要定义模态框的HTML结构。这个结构将包含模态框的标题、内容和关闭按钮。
在您的子主题目录中，您可以创建一个名为modal-box.html的文件（尽管我们稍后会将其内容直接嵌入PHP），或者直接在PHP函数中编写：
注意事项：
- id="popup"用于JavaScript定位模态框。
- class="modal-box"用于CSS样式。
- class="js-modal-close"用于JavaScript绑定关闭事件。
- style="display:none;"是关键，它确保模态框在页面加载时是隐藏的，直到被JavaScript触发显示。
3. 将模态框HTML动态插入页面
将模态框的HTML结构直接通过PHP函数插入到页面的wp_footer钩子中是最佳实践。这可以确保模态框的HTML加载在页面的底部，避免阻塞页面渲染，并且在所有其他内容之后加载。
在您的子主题functions.php文件中添加以下代码：
/**
* 将模态框HTML插入到页面底部（仅限产品页）
*/
function your_modal_footer_content(){
// 仅在WooCommerce产品单页加载模态框HTML
if( !is_product() ){
return; // 如果不是产品页，则不输出任何内容
}
?>
关键点解释：
- add_action('wp_footer', 'your_modal_footer_content');：这个钩子将your_modal_footer_content函数的内容添加到HTML的
