根据 WooCommerce 产品的数量在侧边栏中隐藏 div答案

【问题标题】：Hide div in sidebar depending on number of WooCommerce products根据 WooCommerce 产品的数量在侧边栏中隐藏 div
【发布时间】：2020-07-28 21:44:09
【问题描述】：

是否可以根据显示的 WooCommerce 产品数量在左侧边栏中隐藏 div？

假设侧边栏中的 div 名为“last-img”，产品数量必须大于 9 才能显示 div。

【问题讨论】：

标签： javascript php css wordpress woocommerce

【解决方案1】：

一种方法是使用 js，使用 getElementsByClassName 计算元素：

var numberOfElements = document.getElementsByClassName('products').length;

然后：

if (numberOfElements > 9) {
document.getElementById('last-img').style.display = 'block';
} else {
document.getElementById('last-img').style.display = 'none';
}

【讨论】：

感谢@stacks 的快速回复。我对js超级陌生。我是将它们全部放在一个脚本中还是将第一行放在脚本中，最后一部分放在新脚本中？我会把它放在什么文件中。我会把它放在archive-product.php还是头文件中？
@user2373595 只需将其放在 html 文件中的 <script> 标记中即可。实现这一点的正确方法是在关闭 <body> 标记之前，这样您的加载不会减慢，但使用这么多的代码，这不是问题。也不要犹豫将其标记为答案！
我已将代码：<script> var numberOfElements = document.getElementsByClassName('products').length; if (numberOfElements > 9) { document.getElementById('last-img').style.display = 'block'; } else { document.getElementById('last-img').style.display = 'none'; } </script> 放在我的 archive-product.php 中，以尝试使其正常工作。我收到这条消息：null 不是对象（正在评估'document.getElementById('last-img').style'）。 “last-img”是我在自定义 HTML 小部件中使用的 div。我还尝试将脚本放入小部件中，但没有成功。
奇怪的是它不适用于小部件。那么id不能是'last-img'。您需要弄清楚要隐藏或显示的 div 的 id 到底是什么。无论如何，我回答了您的问题，即如何根据给定元素的数量在 HTML 页面中隐藏/显示 div。
哦，我的错。我使用的是 div 类而不是 id。所以我修复了那个部分，但现在当数字越来越少时它隐藏了 div