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.

I live for Design and Technology as a Graphic and Web Designer. You can contact me through the contact page for your new project!

The latest on what’s moving the web, in your inbox every morning
*This site is protected by hCaptcha and the hCaptcha Privacy Policy and Terms of Service apply.
Other Article that might interest you

Woocommerce Automatically Create Account On Checkout

With these settings a WooCommerce account will automatically be created for all customers during check out. WooCommerce will automatically send an email to the customer with an auto-generated user name and password. Step 1. Login to WordPress and navigate to WooCommerce > Settings. Step 2. Select Accounts & Privacy. Step 3. UNcheck “Allow customers to […]

Read More »