woocommerce产品的自定义网格布局

Question

是否有人对如何显示woocommerce商店页面（如所附图像）有任何想法？黑色方块是产品。

谢谢！

Answer 1

@bragDeal，这似乎对我有用：

ul.products.columns-3 li:nth-child(1){
     grid-column: 1 / 4;
     grid-row: 1;
}
ul.products.columns-3 li:nth-child(1) a.woocommerce-LoopProduct-link.woocommerce-loop-product__link{
     float: left;
}
ul.products.columns-3 li:nth-child(2){
     grid-column: 1 / 3;
     grid-row: 2;
}
ul.products.columns-3 li:nth-child(2) a.woocommerce-LoopProduct-link.woocommerce-loop-product__link{
     float: left;
}
ul.products.columns-3 li:nth-child(3){
     grid-column: 2 / 4;
     grid-row: 2;
}
ul.products.columns-3 li:nth-child(3) a.woocommerce-LoopProduct-link.woocommerce-loop-product__link{
     float: right;
}

虽然我愿意接受其他任何方法