How to easily show 2 product columns in WooCommerce shop page

This Blog will guide you to show 2 product columns in WooCommerce Shop pages for Mobile Screen. By default WooCommerce shop pages has 1 column product for mobile screen.

Query from a client

Our many clients asked us if we can make it 2 column for mobile screen which is better for view during scroll down, as 2 column gives more product view per scroll.

How to show show 2 product columns in WooCommerce shop

To achieve this we have to add the below code in CUSTOM CSS option of theme or in style.css of child theme.

@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;
    }
}

Just add the code and check the check the display in mobile view. So that’s all we have to do to 2 product columns in WooCommerce shop page. Let us know how it works for you in comment section. You can also contact our Developer team for the same.

Connect with Developer

Layout

Your Name *

Your Whatsapp no. *

Email ID *

Query PriorityQuery PriorityLowMediumHigh

Your Query *

Single Line Text

Submit my Query