Docs

[WoodWatchCo]

Can anyone help me match the button design and hover effect for woocommerce buttons on my site to match the rest of the buttons on my site?

Examples: Single product pages, Main shop and category collection pages, cart and checkout, etc..

I would like the same “buy now” buttons as I have on my homepage.

[WoodWatchCo]

This reply has been marked as private.

[Darshana]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.single_add_to_cart_button:hover {
    background-color: #ffffff;
    border-color: #000000;
    box-shadow: 0 0.075em 0.075em rgba(0, 0, 0, 0.5);
    color: #000000;
}

Hope that helps.

[WoodWatchCo]

Thank you for the response. I would also like to add this site-wide to include all the buttons such as checkout buttons as well as the buttons on my shop page and category pages.

[Christopher]

Hi there,

Please add this :

.product .x-btn:hover, .product .button:hover, .product [type=\\\"submit\\\"]:hover,input#place_order:hover {
    background-color: #ffffff;
    border-color: #000000;
    box-shadow: 0 0.075em 0.075em rgba(0, 0, 0, 0.5);
    color: #000000;
}

Hope it helps.

[WoodWatchCo]

Great progress, but the “proceed to checkout” button in shopping cart still needs the styling to match.

[Jade]

Hi there,

Please update the code to:

.woocommerce .cart-collaterals .checkout-button, 
.woocommerce-checkout .place-order .button, 
.shop_table [type=\\\"submit\\\"], .button.wc-backward,
.product .x-btn:hover, .product .button:hover, 
.product [type=\\\"submit\\\"]:hover,input#place_order:hover {
    background-color: #ffffff;
    border-color: #000000;
    box-shadow: 0 0.075em 0.075em rgba(0, 0, 0, 0.5);
    color: #000000;
}

.woocommerce .wc-proceed-to-checkout {
    margin: 50px 0 50px 0;
}

Hope this helps.

[WoodWatchCo]

That code did not work in styling the checkout button properly in the cart page. I want it to match the rest of the buttons on my site.

[WoodWatchCo]

The hover effect is missing.

[Friech]

Hi There,

Add this on your custom CSS.

/*Hover style specific to checkout button*/
.woocommerce-cart .checkout-button:hover {
	background-color: #ffffff;
    border: 1px solid #000000 !important;
    box-shadow: 0 0.075em 0.075em rgba(0, 0, 0, 0.5);
    color: #000000;
}

Thanks.

[WoodWatchCo]

Thank you. I have asked you guys a million questions in the past and you always help 🙂

[Joao]

Hi There,

We are glad it worked.

We are always here for you 🙂

Have a great day.

Joao

[Author]

Posts