You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

能否在variation.php的script模板标签中使用ACF条件判断?

问题分析与解决方案

核心问题

你遇到的问题根源在于:

  • 这个<script type="text/template">是WooCommerce使用的Underscore.js前端模板,运行在浏览器端;而PHP是服务器端代码,页面加载时就已执行完毕,无法在前端切换变体时动态判断字段值。
  • get_field('sla_tags_til_pa_variant')默认获取的是父产品的ACF字段值,不是当前选中的产品变体的字段值,自然没法根据变体的复选框状态动态显示内容。

解决步骤

1. 将变体ACF字段注入前端数据

在主题的functions.php中添加以下代码,把变体的ACF字段值添加到WooCommerce传给前端的变体数据中:

add_filter('woocommerce_available_variation', 'add_acf_variation_data', 10, 3);
function add_acf_variation_data($variation_data, $product, $variation) {
    // 把变体的ACF字段数据注入到前端可用的变体对象中
    $variation_data['sla_tags_til_pa_variant'] = get_field('sla_tags_til_pa_variant', $variation->get_id());
    $variation_data['guld_solv_links_til_tags'] = get_field('guld_solv_links_til_tags', $variation->get_id());
    $variation_data['guld_solv_tags'] = get_field('guld_solv_tags', $variation->get_id());
    $variation_data['farver_links_til_tags'] = get_field('farver_links_til_tags', $variation->get_id());
    $variation_data['farver_tags'] = get_field('farver_tags', $variation->get_id());
    
    return $variation_data;
}

2. 修改前端模板的条件逻辑

把variation.php中的PHP条件替换为Underscore.js模板的语法,让前端能根据变体数据动态判断:

<script type="text/template" id="tmpl-variation-template">
    <div class="woocommerce-variation-description">{{{ data.variation.variation_description }}}</div>
    <div class="woocommerce-variation-price">{{{ data.variation.price_html }}}</div>
    <div class="woocommerce-variation-availability">{{{ data.variation.availability_html }}}</div>
    <% if (data.variation.sla_tags_til_pa_variant) { %>
        <p class="variation-p">Se alle andre smykker i </p>
        <a class="variation-a" href="{{{ data.variation.guld_solv_links_til_tags }}}">{{{ data.variation.guld_solv_tags }}}</a>
        <a class="variation-a" href="{{{ data.variation.farver_links_til_tags }}}">{{{ data.variation.farver_tags }}}</a>
    <% } %>
</script>

关键说明

  • Underscore模板用<% %>包裹逻辑判断代码,{{{ }}}用于输出包含HTML的内容(避免自动转义)。
  • 确保你的ACF字段是创建在产品变体类型下,而非父产品类型,这样每个变体才能独立设置复选框状态。
  • 修改后请清除网站缓存,确保钩子代码生效且前端能获取到最新的变体数据。

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.17 04:08:08