Select Page
Woocommerce Divi Shop的手機版本頁面，要改成兩欄顯示

Woocommerce Divi Shop的手機版本頁面，要改成兩欄顯示

by | 2 月 14, 2023 | CSS, Divi, woocommerce, wordpress, 設計

如果你有需要想要讓 WordPress 的 Woocommerce 在手機版本的商店頁面中顯示兩欄的商品，那最好的方法要自訂 CSS ，我在這邊展示的是用 DIVI 佈景主題來做自訂CSS，如果你是別家的也是都一樣的方法。

只要把下面的CSS複製起來

@media only screen and (max-width:768px) {
    .woocommerce-page ul.products{
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
         flex-flow: row wrap;
    }
    .woocommerce-page ul.products li.product{
         flex: 0 0 50%;
         -webkit-box-flex: 0;
         padding: 10px;
    }
}

貼到你的佈景主題中的自訂CSS的位置上就可以了

Divi Theme 繁體中文化