求助：如何隐藏WooCommerce中库存数量为1的商品

你的两段CSS代码失效原因如下：

• 第一段：类选择器写法错误（.stock in-stock应该是.stock.in-stock，空格表示后代选择器，而这里是同一元素的两个类），且data-disponibili属性大概率不是WooCommerce库存元素的默认属性，属性名不匹配。
• 第二段：contains()是jQuery专属选择器，原生CSS不支持，浏览器无法识别。

解决方案 #

方案1：使用CSS（需依赖正确的HTML属性）

先检查商品库存元素的HTML结构，比如是否有data-stock这类存储库存数量的属性（部分WooCommerce主题会添加）。如果结构类似：

<p class="stock in-stock" data-stock="1">1 disponibili</p>

则可以用以下CSS：

p.stock.in-stock[data-stock="1"] {
  display: none;
}

将这段代码添加到主题的自定义CSS面板或style.css文件中。

方案2：使用JavaScript（更可靠，无需依赖属性）

如果库存元素没有对应data属性，直接通过文本内容匹配更稳妥。添加以下JS代码：

// 遍历所有库存元素
document.querySelectorAll('p.stock.in-stock').forEach(stockEl => {
  // 匹配库存文本（注意和实际显示的文本完全一致，包括空格）
  if (stockEl.textContent.trim() === '1 disponibili') {
    // 隐藏库存文字
    stockEl.style.display = 'none';
    // 如果需要隐藏整个商品卡片，替换上面一行为：
    // stockEl.closest('.product').style.display = 'none';
  }
});

可以通过以下方式添加代码：

• 编辑主题的footer.php，在</body>标签前插入这段代码（包裹在<script>标签内）
• 使用WordPress的Code Snippets插件添加自定义JS代码

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