Archived topic
woo basket blocks spacing
5 replies · Started by Stephen on May 29, 2022
Hi, it looks like the woocommerce cart page is made of 3 blocks - Cart, Cross sells and Basket totals.
Ive used additional CSS (from David) to change the order for mobile phone screen but I'd also like to add vertical space between Cart and Total and Cross sells on mobile phone screen size.
- Can you let me know how to do this please ?
Thank you
Stephen
/* woo cart move cross sells to below checkout */
@media (max-width: 768px) {
.woocommerce-cart .cart-collaterals {
display: flex;
flex-direction: column-reverse;
}
}
Hi Stephen,
I'm not seeing the cross sell section on your cart page, try this CSS to add spacing below the other two sections:
.woocommerce-cart .entry-content .woocommerce > *:not(.woocommerce-notices-wrapper) {
margin-bottom: 100px;
}Hi Ying, thanks for the reply.
The cross sells section does not always display, it depends on what is in the cart.
Ive added your CSS and it does add a margin below Cart Section and below Cross Sells section but really I would like a space below the Basket Total section.
Thanks
Stephen
The margin applied to the basket totals, check the orange part:
https://www.screencast.com/t/tYU5apQFu
Or would you like it to be added this way?
https://www.screencast.com/t/juvkDWZwM
If so, try this CSS:
.cart_totals {
margin-bottom: 100px;
}and change the previous CSS to:
.woocommerce-cart .entry-content .woocommerce > *:not(.woocommerce-notices-wrapper,.cart-collaterals) {
margin-bottom: 100px;
}thats great thanks
in the end the CSS below arranged things nicely
@media (max-width: 768px) {
.woocommerce-cart .cart-collaterals {
display: flex;
flex-direction: column-reverse;
}
.cart_totals {
margin-bottom: 50px;
}
}
You are welcome :)
