Question

您好我的woocommerce产品显示有一个问题，网格保持不对齐，以便有一个在一条线上，而其他人就在彼此旁边我尝试添加这一点自定义CSS：

＆＃13;

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  min-height: 293px !important;
}

＆＃13;

它暂时解决了这个问题，直到我安装插件YITH AJAX Product Finder并且它似乎已经改回到它不确定是否相关......我试过增加高度来看看是否帮助但它没有。任何想法都有吗？这是指向产品页面的链接......

http://casper-creations.com/product-category/caketoppers/

我正在使用wootique主题...

Answer 1

好的，我已经更改了一些CSS，以正确对齐您的产品包装盒。将以下更改应用于CSS -

style.css - 第247行

ul.products {
   margin-left: 0;
   padding-left: 2px;
   padding-right: 2px;
   padding-top: 2px;
   zoom: 1;
   display: initial; /* Added */
}

style.css - 第251行

删除float: left和width: 30.75%

<强> custom.css

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
    display: inline-block; /* Added */
    vertical-align: top; /* Added */
    width: 30%; /* Added */
}

编辑 - 请尝试在custom.css的末尾添加此内容，以便我们确保其他CSS不会覆盖这些规则。

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
   min-height: 293px !important;
   display: inline-block;
   vertical-align: top;
   width: 30%;
}

产品网格将无法正确对齐Woocommerce，Wootique主题

1 个答案: