You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Woocommerce单个产品页产品摘要下方添加专属HTML代码

在WooCommerce单个产品页面的产品摘要下方添加专属HTML代码的方法

嘿,我来给你分享几个亲测有效的方法,帮你实现每个产品在摘要下方显示不同的HTML代码,不管你是会点代码的开发者,还是纯小白都能搞定!

方法一:自定义字段+代码片段(灵活可控,适合有基础的同学)

这是最常用的方案,完全免费且不需要额外插件,步骤如下:

  1. 给单个产品添加自定义字段
    打开产品编辑页面,如果你看不到「自定义字段」模块,点击右上角的「选项」按钮,勾选「自定义字段」就能显示出来。
    点击「添加自定义字段」:

    • 名称填 custom_product_html(你也可以自己取个好记的名字,后面代码要对应上)
    • 值就填你要添加的HTML代码,比如 <div class="custom-note">这是专属这个产品的提示哦</div>
      填完点击「保存自定义字段」,然后更新产品。
  2. 添加代码输出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)插件会更高效:

  1. 安装并激活ACF插件
  2. 新建一个字段组,添加一个「HTML」类型的字段,设置字段名称(比如product_custom_html),然后把字段组关联到「产品」类型
  3. 回到产品编辑页,就能看到这个专门的HTML输入框,输入代码即可
  4. 同样用上面的钩子代码,把get_post_meta里的字段名改成你ACF的字段名,或者直接用ACF的短代码 [acf field="product_custom_html"] 放到产品内容里合适的位置

注意事项

  • 输入HTML代码时要确保代码是合法的,避免错误标签导致页面错乱
  • 如果你的主题修改了WooCommerce的默认结构,可能需要调整钩子的优先级或者换用其他钩子(比如woocommerce_single_product_summary里的其他位置)
  • 建议在测试环境先调试,没问题再放到正式站点

内容的提问来源于stack exchange,提问作者x1024

火山引擎 最新活动