如何在Woocommerce单个产品页产品摘要下方添加专属HTML代码
在WooCommerce单个产品页面的产品摘要下方添加专属HTML代码的方法
嘿,我来给你分享几个亲测有效的方法,帮你实现每个产品在摘要下方显示不同的HTML代码,不管你是会点代码的开发者,还是纯小白都能搞定!
方法一:自定义字段+代码片段(灵活可控,适合有基础的同学)
这是最常用的方案,完全免费且不需要额外插件,步骤如下:
给单个产品添加自定义字段
打开产品编辑页面,如果你看不到「自定义字段」模块,点击右上角的「选项」按钮,勾选「自定义字段」就能显示出来。
点击「添加自定义字段」:- 名称填
custom_product_html(你也可以自己取个好记的名字,后面代码要对应上) - 值就填你要添加的HTML代码,比如
<div class="custom-note">这是专属这个产品的提示哦</div>
填完点击「保存自定义字段」,然后更新产品。
- 名称填
添加代码输出HTML
你可以把下面的代码加到主题的functions.php文件里,或者用「Code Snippets」插件(更安全,不会因为主题更新丢失代码):add_action('woocommerce_after_single_product_summary', 'display_custom_product_html', 15); function display_custom_product_html() { // 获取自定义字段的值 $custom_html = get_post_meta(get_the_ID(), 'custom_product_html', true); // 如果有内容,就输出 if (!empty($custom_html)) { echo $custom_html; } }这里的优先级
15是关键,它会让代码刚好显示在产品摘要(短描述)之后、产品元数据(价格、库存这些)之前,完美符合你的需求!
方法二:可视化编辑器添加(小白友好,无需代码)
如果你完全不想碰代码,用WooCommerce默认的编辑器就能搞定:
- 打开产品编辑页,切换到Gutenberg编辑器(如果还是旧版编辑器,建议升级或者用Classic Editor插件)
- 找到产品的「短描述」模块,在它的下方点击「+」号,添加「自定义HTML」块
- 直接在这个块里输入你的HTML代码,然后更新产品就行
- 每个产品都可以单独添加不同的HTML块,完全独立配置
方法三:用ACF插件简化操作(进阶小白必备)
如果你有很多产品要配置,用Advanced Custom Fields(ACF)插件会更高效:
- 安装并激活ACF插件
- 新建一个字段组,添加一个「HTML」类型的字段,设置字段名称(比如
product_custom_html),然后把字段组关联到「产品」类型 - 回到产品编辑页,就能看到这个专门的HTML输入框,输入代码即可
- 同样用上面的钩子代码,把
get_post_meta里的字段名改成你ACF的字段名,或者直接用ACF的短代码[acf field="product_custom_html"]放到产品内容里合适的位置
注意事项
- 输入HTML代码时要确保代码是合法的,避免错误标签导致页面错乱
- 如果你的主题修改了WooCommerce的默认结构,可能需要调整钩子的优先级或者换用其他钩子(比如
woocommerce_single_product_summary里的其他位置) - 建议在测试环境先调试,没问题再放到正式站点
内容的提问来源于stack exchange,提问作者x1024




