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

Question

你好，我有一个关于 woocommerce 产品显示的问题，网格保持不对齐，所以有一个在一条线上，而其他的则紧挨着彼此我已经尝试添加这一点自定义 css:

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

它暂时解决了这个问题，直到我安装了插件 YITH AJAX Product Finder 并且它似乎已经变回了不确定是否相关的方式......我已经尝试增加高度以查看如果那有帮助，但没有。有什么想法吗？这是产品页面的 link...

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 主题

Product grid won't align properly Woocommerce, Wootique theme

html

css

ajax

wordpress

woocommerce