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.
Table of Contents
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.
