WooCommerce Display two columns of Products in Mobile view

The world is evolving day by day and people are becoming more used to faster and smaller things. Mobile phones, for example, have inherited almost every aspect of computers.

We can now do everything on a mobile phone which was possible only on a pc. It is a good practice for a business to go with the trends. People tend to do most of their work on mobile phones. Ordering something online from your handheld device is the norm today.

Therefore, keeping that in mind, it is must for a successful business to have a mobile friendly website and that too an efficient one.

Making the mobile view of your store display two columns can be really good for your sales as the customer would be able to see more products at the same time.

In order to install this option to your website, you will have to add a code to the custom CSS of your active child theme. Copy the following code and go to Dashboard > Themes > Theme editor > (custom).CSS and paste it after the existing code.

ul.products li.product {
	width: 46.411765%;
	float: left;
	margin-right: 5.8823529412%;
}
 
ul.products li.product:nth-of-type( 2n ) {
	margin-right: 0;
}
 
@media ( min-width: 768px ) {
	ul.products li.product:nth-of-type( 2n ) {
		margin-right: 5.8823529412%;
	}
}

 

That’s all there is to changing the mobile view of your store. Let us know what you think in the comments section below.

 

Leave a Reply