實用的 WordPress ICP 備案許可管理器

如何修改 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;     } }

現在,您的商店將如下所示:

文章沒看懂?代碼不會用?需要幫助您可以

薇曉朵 的頭像