Show product thumbnail on mobile in /cart page

Home › Forums › Jevelin Theme › Show product thumbnail on mobile in /cart page

Home › Forums › Jevelin Theme › Show product thumbnail on mobile in /cart page

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    RESOLVED Posts

  • sleenie93
    Participant

    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.

    Shufflehound Support
    Moderator

    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 team

    sleenie93
    Participant

    Hello 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.

    Shufflehound Support
    Moderator

    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;
}
}

    sleenie93
    Participant

    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.

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    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;
}
}

    sleenie93
    Participant

    You are amazing. Thanks for the good support! Perfect.

    Shufflehound Support
    Moderator

    You are always welcome here 🙂

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)