Archived topic
Woocommerce Cart Styling
7 replies · Started by Ree on September 4, 2021
Hi I have several cart questions:
1) How to increase size of Woocommerce product thumbnail in Cart especially mobile:
I tried this code but its not working
@media(max-width: 768px) {
.woocommerce-page table.cart .product-thumbnail {
display: block !important;
}
.woocommerce-page table.cart .product-thumbnail:before {
content: '';
}
.woocommerce-page table.cart .product-thumbnail img {
width: 100px!important;
}
.woocommerce-page table.cart .product-remove {
float: left;
border-bottom: 0;
}
}2) How to move [x] to the far right in mobile, currently it is overlapping the product thumbnail in cart. Sample:
[img]https://i.imgur.com/a8w5DWx.png[/img]
3) How to center the cart contents in middle (boxed layout) in desktop? Currently it is in Full Width
4) Can I use GP hook to display checkout steps ?
Example:
Hi there,
#1 - you have this CSS in your Child Theme:
tr.woocommerce-cart-form__cart-item.cart_item {
display: grid !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
grid-template-columns: 80px auto 100px;
}In grid-template-columns: 80px auto 100px; you have set the first grid item ( which the picture is in ) to 80px - you need to increase that to allow the original CSS you shared to apply.
#2 - this CSS to absolutely position the X to the right:
@media (max-width: 768px) {
tr.woocommerce-cart-form__cart-item.cart_item {
position: relative;
}
tr.woocommerce-cart-form__cart-item.cart_item td.product-remove {
right: 0;
top: 0;
}
}#3 - you can use a Hook to add that content above the cart/checkout/confirmation - but you would need a plugin or custom developed code to display that inforamtion. Woo doesn't provide that by default.
Thank you! Works like wonder!
What about this?
3) How to center the cart contents in middle (boxed layout) in desktop? Currently it is in Full Width.
3) The checkout page Content Container has beens set to Full Width - which method did you use to set the Full Width template ?
I am not sure.. how can I check?
On Pages all the settings are by default.
[img]https://i.imgur.com/vcEY4DA.png[/img]
Go to Appearance > Elements and look for a Layout Element to see if one those has its Content tab set to Full Width.
If it does, then edit the Display Rules > Exclusions and add your Checkout / Cart pages.
I got it! Thanks for saving tonnes of my time searching
Glad to be of help.
