Пользовательский макет сетки для продуктов 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;
}

Я открыт для любых других методов, хотя