-
Hello,
For some products I have added connected products which show up in cart after you add them.
I’m talking about this: https://prnt.sc/oMlVMqjbH-SQ
The problem is that when you’re in the cart on your phone, these products take up the whole screen: https://prnt.sc/GgwNY7De43Gu
How can these recommended products be made smaller in the cart for mobile? On desktop their size is okay.
Sending you a link in the private area to test.
-
Hi there,
the theme has no control over the woo cart block, so you would need to treat it with some CSS :
@media(max-width: 768px) { .wc-block-cart__main, .wc-block-cart__sidebar { padding: 20px !important; } .wp-block-woocommerce-cart-cross-sells-block h2 { font-size: 1.5rem !important; margin-block: 1rem; } .wp-block-woocommerce-cart-cross-sells-block > div { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); } }This will add some spacing around the cart, reduce cross sell heading sizes and make the cross sell products a 2 column grid.
-
Hello David,
I added the CSS through the Customizer but unfortunately nothing happened :/
-
I don’t see the CSS in your customizer, do you have cache plugin? Have you cleared cache after the changes made?
-
Now it works! Thank you so much! I thought the cart is non cacheable.
I wanted to ask how can the cross sale products in the cart have a green buy button? Now it’s grey and I don’t know how to change it.
-
Can you share the link to the product again ?
-
Yes, added it in the private area
-
Can you set the color for the button in the cross-sell product block?
if not, then try this CSS:
.cross-sells-product .wp-block-button.wc-block-components-product-button.wp-block-cart-cross-sells-product__product-add-to-cart a { background-color:green; } -
Thank you so much! The block had no color option but the CSS worked.
-
You are welcome 🙂
- You must be logged in to reply to this topic.