产品网格不能正确对齐Woocommerce，Wootique主题

Question

您好我有一个woocommerce产品显示问题网格保持不对齐，以便有一个在线，其他人在右边我试过加上该位自定义CSS的：

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

它暂时解决了这个问题，直到我安装插件YITH AJAX产品搜索，它似乎已经变回了怎么不知道这是相关...我试图增加高度，看看是否有帮助，但没有。任何想法的人？这里有一个链接到产品页面...

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%; 
}