Edit Woocommerce empty cart buttons

[dewi]

Please could you tell me how to edit the colours of the ‘Add to basket’ buttons in the Woocommerce empty cart block. They look OK in the editor (pale grey background), but on the page the background is dark grey and the text is difficult to read - see the two screenshots below. I assume something in the HivePress theme is overriding the Woocommerce format.

[kseniia]

Hi,

Could you please clarify where exactly this button appears so we can take a closer look? If possible, please share a link to the page or describe the steps needed to reach it. This will help us check the issue and see whether a CSS snippet can be provided.

[dewi]

Hi,

Yes, the buttons with the dark grey background appear in my empty basket: https://ohmfromohm.co.uk/basket/

[ChrisB]

Hi @dewi,

In the back-end of WordPress, visit Appearance > Customize > Additional CSS.
Paste the following snippet:

/* Recolour WooCommerce Button text */
a.wp-block-button__link.add_to_cart_button.ajax_add_to_cart {
    color: #ffffff;
}

Click ‘Publish’

The changes should then be applied.

Example:

I hope this helps!

Cheers,
Chris

[kseniia]

Hi,

Thanks for the details.

Please let me know whether the solution provided by ChrisB works for you.

[dewi]

@ChrisB

/* Recolour WooCommerce Button text */
a.wp-block-button__link.add_to_cart_button.ajax_add_to_cart {
    color: #ffffff;
}

Yes, works perfectly - thank you! Can you also tell me what the code would be to change the background colour for the same button?

[ChrisB]

Hi @dewi,

Glad to hear it!

You can try adding:

background-color: #80E376;

Below

color: #ffffff;

Inside the existing snippet.

Replace the 80E376 part with your preferred colour for the background of the buttons.

You can use a tool like this to help you find the correct colour code to use:

• Color Picker – HTML Color Codes

I hope this helps!

Cheers,
Chris