[Resolved] ‘Add to Basket’ button with white borders

[Juned]

Hi,

Can I display ‘Add to Basket’ button with White Borders?

If yes, then I can set hover background color and text color as per my choice.

[David]

Hi there,

to add a border to the add to cart button requires some CSS:

.woocommerce ul.products li.product a.add_to_cart_button {
  border: 1px solid #fff;
}

The button gets its colors from the Customizer > Colors > Buttons.
If you want to set the Add to Cart button to a different color ( not matching the theme styles ) then you can use this CSS instead ( it includes the border ):

/* Add to cart static color */
.woocommerce ul.products li.product a.add_to_cart_button {
    border: 1px solid #fff;
    background-color: #0F0;
    color: #000;
}
/* Add to cart hover color */
.woocommerce ul.products li.product a.add_to_cart_button:hover {
    border: 1px solid #fff;
    background-color: #f00;
    color: #fff;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Juned]

Thanks. It’s working perfectly.

[Juned]

Resolved

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts