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 1 month, 3 weeks 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,

Hi,
i had to recreate the demo site and add again the css code in mobile tab in theme settings but again didn’t work as the first time.
Can you please login and fix it again, and please tell me your steps you made to work the css on mobile.
Thanks in advance.

Hello,

The custom css is working in the Appearance > Customize but not working in the theme settings.

Try to increase the PHP Max Input Vars parameter to 10000 or higher in your PHP configuration. You can contact your hosting provider for help on this matter and check how it works.
https://xtemos.com/docs-topic/requirements-wordpress-set-up/

Best Regards,

I change it.
Still not working in theme settings, on mobile custom css.
Should i insert the code in the Appearance > Customize to work?

Hello,

Now I have checked your site, and the css is added in Customize and it is working fine. If you have any questions, feel free to contact us.

Best Regards,

I am trying 3 days now to design the list view on product archive as the sample image i attached, but i didn’t manage. Your code didn’t help me very much because the guide was wrong. Can you please help me?
As you can see in image sample:
1.The quick shop element is aligned at the right and the product list content element is at left.
2.Product Image is much more downscaled on size to fit the product contents.

Also need help with the product category element at the top. I am trying to hide the image and keep only the titles but didn’t manage. (From elementor i can make it happen but i am loosing the carousel effect). So i need css to hide category images.

Finaly, in desktop view i have the sidebar with filters. I need to make it sticky and follow the products as the user goes down.

Attachments:

You must be logged in to view attached files.

Also, i forgot, price, quantity and add to cart button should appear at the end and inline.

Hello,

Sorry, but the CSS I provided earlier is the possible solution for the mobile view. However, this requires additional code customization, which falls outside our support policy.

You need to find a third-party plugin to achieve more functionality that best suits you.

Best Regards,

Ok. Can you please help me only with the first task? To change: first product content and second the image at the right?

Hello,

Unfortunately, it is not possible. The HTML structure does not allow solving it. Such modification requires complicated WooCommerce code customization, which is not covered by our support. If I try it with css, it breaks the design.

Best Regards,

[Author]

Posts