- This topic has 7 replies, 2 voices, and was last updated 8 years, 1 month ago by
.
Hello there Shufflehound,
Is there any option to activate the product thumbnails in the /cart page on mobile devices? The thumbnail is showing on a regular screen, but not on a mobile phone or other small device.
Thanks in advance.
Hi @sleenie93,
I hope you are well today and thank you for your question.
Could you please share me the page URL from your site where it is not displaying on mobile devices so that i can troubleshoot it?
Best regards,
Shufflehound teamHello Shufflehound,
The page URL is:
https://www.detoxshop.nl/cart/
But when I look to your official theme page, it’s not showing either:
https://jevelin.shufflehound.com/shop/cart/
It’s only on mobile devices where it’s not showing.
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media (max-width: 768px){ .woocommerce #content table.cart .product-thumbnail, .woocommerce table.cart .product-thumbnail, .woocommerce-page #content table.cart .product-thumbnail, .woocommerce-page table.cart .product-thumbnail { display: block !important; } .woocommerce #content table.cart .product-thumbnail img, .woocommerce table.cart .product-thumbnail img, .woocommerce-page #content table.cart .product-thumbnail img, .woocommerce-page table.cart .product-thumbnail img { max-width: 100% !important; float: none; display: table; margin: 0 auto; } }Thanks for your reply Shufflehound! It works now when I reduce the screen size on my PC screen. When I look on a mobile device the thumbnails aren’t showing. Do you know how to make them show on a mobile device?
There are also 2 little dots in the cart page now. I attached an image below.
Solution for this topic
Please try changing above shared CSS code as displayed below.
@media screen and (max-width: 768px){ .woocommerce #content table.cart .product-thumbnail, .woocommerce table.cart .product-thumbnail, .woocommerce-page #content table.cart .product-thumbnail, .woocommerce-page table.cart .product-thumbnail { display: block !important; } .woocommerce #content table.cart .product-thumbnail img, .woocommerce table.cart .product-thumbnail img, .woocommerce-page #content table.cart .product-thumbnail img, .woocommerce-page table.cart .product-thumbnail img { max-width: 100% !important; float: none; display: table; margin: 0 auto; } .woocommerce #content table.cart .product-thumbnail::before, .woocommerce table.cart .product-thumbnail::before, .woocommerce-page #content table.cart .product-thumbnail::before, .woocommerce-page table.cart .product-thumbnail::before { display: none !important; } }You are amazing. Thanks for the good support! Perfect.
You are always welcome here 🙂
