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)
{
ul.products li.product {
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)
{
ul.products li.product {
width: 50%!important;
padding: 10px !Important;
display: inline-block !Important;
}
}

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