WooCommerce 是 WordPress 最好用的电商插件，可以轻松搭建产品页、购物车和支付系统。但默认的产品页面可能不符合你的需求？别担心，其实用简单的代码就能自定义产品详情页，让它更符合你的店铺风格。下面介绍怎样动手修改。
一、WooCommerce 产品详情页的结构简介
默认情况下，WooCommerce 会使用内置模板展示产品页面，打开路径为：
/wp-content/plugins/woocommerce/templates/single-product/
常见的结构包括：
产品标题（woocommerce_template_single_title）
产品价格（woocommerce_template_single_price）
产品图片（woocommerce_show_product_images）
产品简短描述（woocommerce_template_single_excerpt）
添加到购物车按钮（woocommerce_template_single_add_to_cart）
产品标签与分类（woocommerce_template_single_meta）
产品详情（描述、评论 Tab）（woocommerce_output_product_data_tabs）
这些部分通过 WordPress 的钩子系统（actions 和 filters）被加载和控制。
二、如何用代码自定义产品详情页？
WooCommerce 的可定制性非常强，只需要几行代码，就可以添加、删除、重新排序产品页面的元素。
打开路径为： WordPress- Appearance – Theme File Editor
1. 移除默认模块（如删除产品标签）
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40 );
把这段代码添加到当前主题的 functions.php 文件中就可以。
2. 添加自定义内容（如在价格下方插入一句话）
add_action( ‘woocommerce_single_product_summary’, ‘custom_text_after_price’, 11 );
function custom_text_after_price() {
echo ‘<p class=”custom-message”>🎁 本商品支持7天无理由退换货</p>’;
}
这里的数字 11 是优先级，确保它在价格（默认优先级为 10）之后加载。
3. 更改模块位置（如将短描述移动到“添加到购物车”按钮下）
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 35 );
只需要调整钩子的加载顺序，就可以实现位置的灵活变动。
三、替换产品详情页模板文件
如果需要更彻底地更改结构，可以通过下面的方式覆盖 WooCommerce 默认模板：
在当前主题或子主题中创建目录 /your-theme/woocommerce/single-product/
从插件的模板目录中复制所需文件（如 price.php, title.php 等）到上述路径
修改这些模板，就可以实现结构自定义，不影响后续 WooCommerce 更新
四、实用自定义建议
在产品图片下添加产品编号或库存状态
根据用户是否登录显示不同信息
搭配 ACF 插件显示品牌、产地等自定义字段
只对某类产品启用不同的布局逻辑
五、开发者调试技巧
启用 WooCommerce 的模板调试功能，可以快速查看模板来源和钩子位置：
add_filter( ‘woocommerce_developer_mode’, ‘__return_true’ );
配合 Query Monitor 插件使用，查看加载的钩子、模板路径和执行优先级。
六、总结
WooCommerce 产品详情页完全可以通过代码灵活自定义。只需要掌握基本的钩子机制与模板覆盖方法，就可以根据实际业务自由调整展示内容和顺序，让产品页更专业、更有品牌特色。