How to Display WooCommerce Products in Two Columns Layout in Mobile View in WordPress

In this woocommerce tutorial for beginners you will learn how to show or display woocommerce product in two (2) column design in mobile layout using custom css in shop / category / archive in wordpress website.

* Use Below CSS:

@media only screen and (max-width: 712px)
{
width: 50%!important;
padding: 10px !Important;
}
}

----------
* if above css code not working properly then add below code with this line "display: inline-block !Important;"
---------

@media only screen and (max-width: 712px)
{
width: 50%!important;
padding: 10px !Important;
display: inline-block !Important;
}
}

#column #mobile #woocommerce #products #product #wordpress #wordpresstutorial #webtaskwithhassan #hassangilani

[hetthicker]

Thanks brother. thanks a lot. got tired of people keep making tutorials with bullcrap like Elementor, Kadence and what. You kept purely about developing. Lovely. Beautiful

[CamiloSanabria-clgj]

Thank you sir, although I don't like how it looks for a mobile view, that's what my client wants and you helped me to solve it.

[funkhyde]

Thanks a Lot. Was digging around for 30 mins on this

[LelaIskandarSuhaimi]

Fantastic Hassan! Tq so much for the code. It works!

[dreamykathe]

It doesn’t work.
Do you have any code for Kadence theme?

[fastmedia]

What of woostify theme? This seems not working on it

[jnhjxsl]

HELP - I cannot get mine to have 2 rows next to each other - the product goes down in size but the next product is still below.. Not next to it _ 2 columns - I can fix it in the "inspect" area -But I have tried snippets of code such as float: grid - but nothing works Please tell me what line of code I need to add so the products are 2 per line, not one even though they have gone down to 50% size..

[jnhjxsl]

Hi I now get 2 in a row! Any way of fixing that every 5 products theres a gap. My settings in the desktop is 5 columns - is there some ignore code I can add o be able to let the 2 rows of products not have a missing product every 5??

[GoDigitalXbyshane]

you can change it in the woocommerce settings now