WordPress.org

Resolved kirstythomson
(@kirstythomson)

2 years, 9 months ago

Hi
I have used the css .woocommerce a.button.alt,
.woocommerce a.button.alt:hover {
background-color: #2596be;
}
But the Proceed to checkout button is still showing up black instead of the correct colour in the Woocommerce blocks cart. How do I fix this please?

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author Automattic
(@automattic)

2 years, 9 months ago
Hi there! Thanks for reaching out, and I’m happy to assist.

I’m assuming you’ve used the Cart block?

If not, please do let us know which block you’re referring to. If you can link us to a live site where we can see it in action that would be best, otherwise a screenshot would do. Either upload the screenshots to your media library and share the direct links with us, or you can use a service like Droplr or CloudApp and share the links with us here.

Meanwhile, I used the Cart block on a page of a test site running WooCommerce and the Storefront theme, added your CSS to the WP Admin > Appearance > Customize > Additional CSS box, and it seems to work for me:

Link to image: https://d.pr/i/dZYQyQ

In case your theme or another plugin is overriding it, you can try the following to give your CSS prominence:
```
.woocommerce a.button.alt,
.woocommerce a.button.alt:hover {
background-color: #2596be !important;
}
```
Let us know if that works for you, otherwise provide the bits asked for above, then we’ll try to assist you further.
Plugin Author Darren Ethier (nerrad)
(@nerrad)

2 years, 9 months ago
Sorry about that, but the instructions above are actually incorrect. The provided CSS example is for the default Cart page (powered by the [woocommerce_cart] shortcode) and not the Cart block.

In order to style the Proceed to Checkout button for the Cart block you would need to use something like this:
```
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
    background-color: #2596be;
}
```