[Resolved] Show product images in cart page

Home Forums Support [Resolved] Show product images in cart page

Home Forums Support Show product images in cart page

  • This topic has 11 replies, 3 voices, and was last updated 11 months ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #827922
    Pedro

    Hello!

    I would like the cart page to show the image of the products that have been added to the cart.

    How can I do it?

    Thank you!

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #828228
    David
    Staff
    Customer Support

    Hi there,

    to display them on mobile try this:

    .woocommerce-cart table.cart img {
        width: 60px; /* Change for desktop image size */
    }
    
    @media (max-width: 768px) {
        
        .woocommerce-page #content table.cart .product-thumbnail {
            display: block;
        }
        .woocommerce-page #content table.cart .product-thumbnail:before {
            content: '';
        }
       .woocommerce-page #content table.cart img {
           width: 80px; /* change for mobile image size */
       }
       .woocommerce-page #content table.cart .product-thumbnail {
        text-align: center !important;
        }
    }
    #828560
    Pedro

    Hello david! Thanks for the help.

    I placed the CSS and the image is displayed in the mobile version.

    However I would like to do the following:

    – Enlarge a little more the image of the product in the desktop version.
    – Reduce a little more the image of the product in the mobile version.
    – Center the product image in the mobile version.

    Thank you!!

    #828565
    David
    Staff
    Customer Support

    I edited the CSS above, the two lines for changing the image size have comments beside them, just set the pixel size you want.

    #828572
    Pedro

    Hello david! You are the best, it worked perfect. Thank you!

    #828591
    David
    Staff
    Customer Support
    #1541322
    Sam

    Hi, just so you know I just tried this and it works but you have to put !important at the end of each line.

    Is that something that might have changed since this post?

    Thanks.

    #1541453
    Elvin
    Staff
    Customer Support

    Hi Sam,

    Hi, just so you know I just tried this and it works but you have to put !important at the end of each line.

    Is that something that might have changed since this post?

    Thanks.

    The need for !important means the sequence of how your stylesheets are loaded is altered in a way where the custom CSS you’ve added loaded before the default WooCommerce CSS. This is not the case for everyone.

    A wise man once said:
    "Have you cleared your cache?"

    #1541867
    Sam

    Hi Elvin, could that be caused by the Autoptimzed minification plugin?

    It is the only thing that could be doing that.

    Thanks
    Sam

    #1542012
    David
    Staff
    Customer Support

    Hi there,

    combining / minifying CSS can mess with the order the CSS is printed. So it maybe a case that your custom CSS is being printed before the Mobile CSS Woo loads.

    Woo is particularly painful as they use very long specific CSS selector strings, which makes overwriting them a pain. !important can be avoided if you can make the CSS more specific. But i wouldn’t be concerned about using !important in custom CSS that is overwriting a stylesheet.

    #1542022
    Sam

    OK noted, thanks for the info.

    #1542141
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.