Woocommerce类别图像缩略图

Question

我已经和他斗争了好几个星期了。出于某种原因，有些代码在类别视图中覆盖了我的woocommerce产品图像的大小/分配。没有任何代码，它显示2个产品填满整个空间，即使我有一个插件运行，应该每行显示4个产品。

我目前正在使用以下代码，正如另一位用户所建议的那样，它为我提供了正确的尺寸并且每行显示4个但是它似乎随机选择在某些行上显示不同的数字，留下产品应该在的空白区域。

.woocommerce ul.products li.product:nth-child(2n), 
.woocommerce-page ul.products li.product:nth-child(2n) 
{
   float: left; 
   clear: none!important; 
}

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product 
{
   width: 24%;
   margin: 0 0 2.992em 0.4875em;
   clear: none;
}

可以看到此处https://www.raymondmayjewellers.com/product-category/accessories/以及网站上任何其他类别页面以不同方式显示。

任何想法是什么a）导致初始问题（由代码部分解决）或b）为什么新代码偶尔返回小于4的行？

Answer 1

我不知道你是否知道，但是你压倒太多的线条，这可能会导致问题。

这是解决方案：

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
 width:22% !important; /* this line is around 1031 line number*/
 margin: 0 0 2.992em 0.4875em;
 }

注意：我已移除clear:none。

结果如下：