How to customize the "buy now" button on the product page

Hello there,

I'd like to customize the purchase button changing its background color to orange and its text to bold white. Also, I'd like the button to be wider than it's nowadays. Is it possible?

Thanks.

Welton

Hi,

Please add the following custom css code (and adjust css values to your needs):

Code: Select all

.gk-product-gallery .addtocart-button {
   background: #e34f34;
   font-size: 17px;
   font-weight: bold;
   padding: 20px 50px;
   line-height: 10px;
   height: 50px
}


Hi Piotr,

This css code only changes the "See more" button, I also need it to affect the "Add to cart" button. Take a look at www.balani.com.br. It's in pt but you'll figure it out easily...

Thank you.

Welton

Piotr,

I discovered what css I must override in order to change the add to cart button inspecting css elements in the page. However, in the checkout page I didn't manage to custom the buttons' appearance even referring to the elements names in override.css file.

I want to change "Apply Cupom", "Update Cart" and "Checkout" buttons as well. How do I do it?

Thank you.

Welton

For these buttons, please use the following css selectors:

Code: Select all

table.cart td.actions input.button,
.wc-proceed-to-checkout a {
 ...
}


Hi Piotr,

Thanks, it worked out partially. It still remains one last button to change, btw the main button: "Checkout" as you can see in the picture labeled as "Finalizar Compra" in black!

Captura de Tela 2015-10-26 às 11.23.02.png

I saw its class is named "checkout-button", I added it to the list you gave me but had no results.

Is there something else to do?

Thank you.

Welton

Hi,

Try to change the:

Code: Select all

 .wc-proceed-to-checkout a

selector to

Code: Select all

#gk-mainbody .wc-proceed-to-checkout a