如何修改 Divi 主題中的默認 WooCommerce 商店頁面產品欄數？每行顯示 4 個產品，將三欄變成四欄。

當您使用Divi Theme設置 WooCommerce 時，您會發現它為您的商店創建了一個頁面。添加一些產品後，您會發現商店的布局為 3 列，如下所示：

如果您希望每行有四個項目，則可以將以下 CSS 添加到 Divi：

@media screen and (min-width:1024px) {
    .woocommerce ul.products li.product { 
	width: 21% !important;
	margin: 2% !important;
	clear: none !important;
    }
    .woocommerce ul.products li.product:nth-child(4n+1) {
	clear: both !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 980px) {
    .woocommerce ul.products li.product.first, .woocommerce ul.products li.product.last {
        clear: right !important;
    }
    .woocommerce ul.products li.product:nth-child(4n+1) {
         clear: none !important;
    }
}

現在，您的商店將如下所示：