List view on mobile

Hi.
Is very important to have the option for list view on mobile for shop pages.
Lot of customers that needs an ecommerce with their products they don’t want to have images in their products.
Title and some description is enough for a client to make an order.
Right now, list view works only on desktop but for mobile view grid for one or two columns are now available and is not what clients need.
Please consider for an asap theme update as there are a lot of restaurants coffee shops and others that deal with the same problem.
Thanks in advance.

Hello,

Sorry to say, it is not possible to make it like this, Taking into consideration that mobile screen is limited in size, all the content is placed a block under the block.

Please share the page url so i will further check on your site and give you a possible css code for this.

Best Regards,

[[email protected]]

I have to say that there are a lot of sites that shows products in mobile view as i described. Here is a site to see how it appears and should be appear if list view worked in mobile view.
https://menu-site.i-host.gr/?lang=ell&id=1c0bd6b2-00df-41e3-87de-da3c2f9ea783&table=

If you can give me a css to appear as above or similar it would be fine for me.
For me it will be great if you give me a css that appears exactly as in desktop view. (image smaller at left and at the right title and description -exactly as it shows in desktop but in smaller dimention to appear in mobile)
i attach you an image
Here is a test eshop to work.
https://mnqr.gr/demo/shop/

*Sorry to say, it is not possible to make it like this, Taking into consideration that mobile screen is limited in size, all the content is placed a block under the block.
block under the block remains. Of course to work, only one product column it will be. And to fit title and description you have to make the image a lot smaller

• This reply was modified 3 days, 16 hours ago by [email protected].

Attachments:

You must be logged in to view attached files.

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile. Change the value as per your requirements to customize the layout.

.wd-product.product-list-item .product-wrapper {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px;
  }

  .wd-product.product-list-item .product-element-top {
    flex: 0 0 100px; /* make image smaller on mobile */
    max-width: 100px;
  }

  .wd-product.product-list-item .product-list-content {
    flex: 1 1 auto;
  }

  .wd-product.product-list-item [class*="short-description"] {
    display: block !important;
    font-size: 13px;
    line-height: 1.4;
  }

Best Regards,

Hi!
Thanks for the css code!
Worked almost as i wanted. Can you please help me a little more with the css because i am not familiar with this?

1. I add it to the theme css and didn’t worked. I had to add it to the elementor css but affects and desktop view. I want to affect only mobile view.
2. Can recognise that if a product does not have main image, to hide the image and leave only the other elements? (title, description etc)
3. Quantity and Add to cart button are below each other. Can we make it inline and centered?

Thanks again!

*Note this ticket for future update if you want. It will be very useful for a lot of customers.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

i add them

Hello,

This is the possible CSS you can add to Theme Settings -> Custom CSS -> Custom CSS for mobile.

.wd-product.product-list-item .product-wrapper {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
.wd-product.product-list-item .product-element-top {
  flex: 0 0 100px !important;
  max-width: 100px !important;
}
.wd-product.product-list-item .product-element-top img[src*="woocommerce-placeholder"] {
  display: none !important;
}
.wd-product.product-list-item [class*="short-description"] {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

Best Regards,

[Author]

Posts