Archived topic
How to make the 'View cart' link (after adding product to cart) more prominent
3 replies · Started by Allan on April 3, 2021
After adding a product to cart, there's a WooCommerce banner notice.
By styling links in bold, I was able to make this 'View cart' link a little more prominent.
But it still blends too much with the other text in the notice, especially since it usually has 3 lines of text on mobile.
How do I make this link more prominent? Perhaps, by turning it into a button (with a surrounding border), like what the other themes do?
Hi Allan,
You could try this CSS:
/*normal style*/
.woocommerce-message .button.wc-forward {
border: 1px solid #782d31;
padding: 10px 20px;
background-color: #782d31;
color: #fff;
}/*hover style*/
.woocommerce-message .button.wc-forward:hover {
border: 1px solid #782d31;
padding: 10px 20px;
background-color: #782d31;
color: #fff;
}
Feel free to change numbers/colors, let me know how it works :)
Adding CSS: https://docs.generatepress.com/article/adding-css/
Does the trick, thank you Ying!
Nice :)
You are welcome!