- This topic has 11 replies, 3 voices, and was last updated 3 years, 4 months ago by David.
-
AuthorPosts
-
March 3, 2019 at 8:30 pm #827922Pedro
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!
March 4, 2019 at 6:05 am #828228DavidStaffCustomer SupportHi 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; } }
March 4, 2019 at 9:12 am #828560PedroHello 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!!
March 4, 2019 at 9:24 am #828565DavidStaffCustomer SupportI edited the CSS above, the two lines for changing the image size have comments beside them, just set the pixel size you want.
March 4, 2019 at 9:33 am #828572PedroHello david! You are the best, it worked perfect. Thank you!
March 4, 2019 at 9:46 am #828591DavidStaffCustomer SupportYou’re welcome
November 22, 2020 at 9:57 am #1541322SamHi, 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.
November 22, 2020 at 12:25 pm #1541453ElvinStaffCustomer SupportHi 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.November 23, 2020 at 12:56 am #1541867SamHi Elvin, could that be caused by the Autoptimzed minification plugin?
It is the only thing that could be doing that.
Thanks
SamNovember 23, 2020 at 2:50 am #1542012DavidStaffCustomer SupportHi 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.
November 23, 2020 at 2:58 am #1542022SamOK noted, thanks for the info.
November 23, 2020 at 4:59 am #1542141DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.