WordPress艺术电商：如何隐藏/禁用售罄的print number选项？

自定义代码方案（以Shopify为例，适配多数主流电商主题） #

1. 模板层面过滤售罄选项 #

找到主题中渲染产品变体选项的模板文件（通常是main-product.liquid或product-template.liquid），定位到Print Number选项的循环渲染代码，添加库存判断逻辑，只渲染有库存的选项：

下拉选择框（Select）场景：

{% for value in product.options[0].values %}
  {% assign in_stock = false %}
  {% for variant in product.variants %}
    {% if variant.options[0] == value and variant.inventory_quantity > 0 %}
      {% assign in_stock = true %}
      {% break %}
    {% endif %}
  {% endfor %}
  {% if in_stock %}
    <option value="{{ value }}">{{ value }}</option>
  {% endif %}
{% endfor %}

单选按钮（Radio）场景：

如果是单选按钮形式，想要模糊显示售罄选项而非完全隐藏，可修改为：

{% for value in product.options[0].values %}
  {% assign in_stock = false %}
  {% assign target_variant = nil %}
  {% for variant in product.variants %}
    {% if variant.options[0] == value %}
      {% assign target_variant = variant %}
      {% if variant.inventory_quantity > 0 %}
        {% assign in_stock = true %}
      {% endif %}
      {% break %}
    {% endif %}
  {% endfor %}
  <label class="{% unless in_stock %}sold-out{% endunless %}">
    <input type="radio" name="id" value="{{ target_variant.id }}" {% unless in_stock %}disabled{% endunless %} />
    {{ value }}{% unless in_stock %} (售罄){% endunless %}
  </label>
{% endfor %}

然后在主题的CSS文件（如base.css）中添加售罄样式：

.sold-out {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

2. 动态JS处理（适配AJAX加载的主题） #

如果主题使用AJAX动态加载产品数据，需要用JS实时过滤售罄选项：

document.addEventListener('DOMContentLoaded', function() {
  const printNumberSelect = document.querySelector('select[name="options[0]"]');
  if (!printNumberSelect) return;

  // 假设主题已全局暴露product对象，若没有则需通过AJAX获取产品JSON数据
  product.variants.forEach(variant => {
    const option = printNumberSelect.querySelector(`option[value="${variant.options[0]}"]`);
    if (option && variant.inventory_quantity <= 0) {
      option.style.display = 'none';
      // 若要禁用而非隐藏，替换为：
      // option.disabled = true;
      // option.classList.add('sold-out');
    }
  });
});

无代码插件方案 #

如果不想编写代码，可使用以下电商插件（以Shopify生态为例）：

• Bold Product Options：支持可视化设置变体库存显示规则，一键隐藏售罄选项，还可自定义售罄标识样式。
• Variant Inventory Helper：专注于变体库存管理，自动检测并隐藏售罄的变体选项，支持批量配置多个产品。
• Product Options & Customizer：兼顾自定义选项添加与变体库存控制，可灵活设置售罄变体的隐藏/禁用状态。

内容的提问来源于stack exchange，提问作者Amani rush