WooCommerce实现data-amount大于20000时显示支付模块的方法

你需要的逻辑是基于元素data-amount属性（单位为美分）判断，仅当值大于20000（即200美元）时显示支付标识，以下是两种可落地的实现方式：

方法1：前端JavaScript实现 #

将以下脚本添加到WordPress主题的自定义JS区域，或者主题footer.php的</body>标签前即可生效：

document.addEventListener('DOMContentLoaded', function() {
  const payBadge = document.getElementById('learn-more');
  if (payBadge) {
    // 获取data-amount值并转为数字
    const amount = parseInt(payBadge.dataset.amount, 10);
    // 小于20000美分则隐藏
    if (amount < 20000) {
      payBadge.style.display = 'none';
    }
  }
});

该方法实现简单，适合没有服务端代码修改权限的用户，缺点是页面加载瞬间可能出现标识一闪而过的情况

方法2：WooCommerce PHP钩子实现（更稳定） #

直接在后端渲染阶段判断商品价格，符合条件才输出支付标识，避免前端闪烁问题，将以下代码添加到主题的functions.php文件中即可：

// 先移除原有支付标识输出钩子，钩子名称可根据你当前使用的支付插件实际配置调整
remove_action('woocommerce_after_add_to_cart_button', 'original_affirm_badge_render', 10);
// 新增带价格判断的自定义输出钩子
add_action('woocommerce_after_add_to_cart_button', 'custom_affirm_badge_render');
function custom_affirm_badge_render() {
  global $product;
  // 获取商品展示价并转换为美分单位
  $product_price_cents = wc_get_price_to_display($product) * 100;
  // 仅价格大于20000美分（200美元）时输出标识
  if ($product_price_cents > 20000) {
    echo '<p id="learn-more" class="affirm-as-low-as" data-amount="'.esc_attr($product_price_cents).'" data-affirm-color="blue" data-learnmore-show="true" data-page-type="product"></p>';
  }
}

注意：代码中的original_affirm_badge_render需要替换为你当前支付插件实际用来输出标识的回调函数名称

内容的提问来源于stack exchange，提问作者Flying Pebble