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

现在,您的商店将如下所示:

文章没看懂?代码不会用?需要帮助您可以去论坛提问自助服务台