Site logo

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

Viewing posts 1–4 of 4

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!

This archived topic is closed to new replies.