[Support request] Display product thumbnail on checkout with large thumbnail Desktop – Woocommerce

Home Forums Support [Support request] Display product thumbnail on checkout with large thumbnail Desktop – Woocommerce

Home Forums Support Display product thumbnail on checkout with large thumbnail Desktop – Woocommerce

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1957913
    GC

    Hi everyone!

    I’m trying to find a code ( if possible CSS but, if not a code for the function.php ) that would display a thumbnail of the product at the checkout, with an easy to view size

    I currently have it displayed correctly on the cart, desktop and mobile, thanks to David’s CSS from another post :

    .woocommerce-cart table.cart img {
    width: 400px; /* 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: 800px; /* change for mobile image size cart et checkout */
    }
    .woocommerce-page #content table.cart .product-thumbnail {
    text-align: center !important;
    }
    }

    But the desktop checkout view doesn’t show the thumbnail

    I’m also using Direct Checkout for Woocommerce that has a “display thumbnail” option at checkout, but while being displayed, the thumbnail is extremely small. I therefore would prefer to display without using this feature so if you have an idea:-)

    The current CSS used works on the cart and mobile view, and the size is perfect

    Many thanks!

    GC

    #1958008
    David
    Staff
    Customer Support

    Hi there,

    this kind of thing is related to the Woo plugin, not the theme.

    If you’re happy to use the plugin that displays the image, then enable that and share a link to the site and i can take a look at increasing the size of the image with CSS

    #1958031
    GC

    Hi David!

    Thank you for your super fast reply!

    Yes, I contacted the plugin author who told me to add this to your CSS :


    @media
    only screen and (max-width:768px){
    /* mobile CSS here */
    }


    @media
    only screen and (min-width:768px){
    /* desktop CSS here */
    }

    But when using :


    @media
    only screen and (min-width:768px){
    /* desktop CSS here */
    }

    The mobile thumbnail disappears so I’m thinking about deactivating it and try to rely on CSS to make the thumbnail appear on the checkout, desktop and mobile with a good size. Your CSS actually works like a charm so there’s just this desktop thumbnail which is still really small:-)

    ( The website is still in local at the present moment )

    #1958525
    Leo
    Staff
    Customer Support

    Try using the breakpoints here with CSS from the plugin author:
    https://docs.generatepress.com/article/responsive-display/

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.