Home › Forums › Support › Display product thumbnail on checkout with large thumbnail Desktop – Woocommerce
- This topic has 3 replies, 3 voices, and was last updated 3 years, 9 months ago by
Leo.
-
AuthorPosts
-
October 9, 2021 at 4:52 am #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
October 9, 2021 at 7:14 am #1958008David
StaffCustomer SupportHi 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
October 9, 2021 at 7:27 am #1958031GC
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 )
October 9, 2021 at 3:10 pm #1958525Leo
StaffCustomer SupportTry using the breakpoints here with CSS from the plugin author:
https://docs.generatepress.com/article/responsive-display/ -
AuthorPosts
- You must be logged in to reply to this topic.