How to display Mobile product list in 2 columns for Woocommerce in Elementor

Try this:

@media only screen and (max-width: 736px) {
  .woocommerce ul.products li.product {
    width: 49.0% !important;
    margin: 0.5% 4% 0.5% 0;
  }
  body.woocommerce ul.products.columns-3 li.product:nth-of-type(3n+1) {
    clear: none !important;
  }
  body.woocommerce ul.products.columns-3 li.product:nth-of_type(2n+1) {
    clear: both !important;
  }
}

Two columns is too tight on very small screens. There’s a lot of work to do to get this right for various resolutions.

• Credits to Loro
• Elementor
• WordPress
• Woocommerce