How to change button color at cart and orders pages?

[mireek.kacper]

Hi. I am looking for a solution to the problem with changing the color of the buttons on the cart and order page. As you can see, in the cart tab the button is white and almost invisible, similarly in the order tab (gray). I’m trying to find a place where I could change their colors. I use gutenberg. Elementor is not working properly on this imported page template.

• This topic was modified 1 day, 23 hours ago by mireek.kacper.

Attachments:

You must be logged in to view attached files.

Hello,

Currently, our button customization options only support the classic cart and checkout shortcodes included with the standard import of our theme (screenshot https://monosnap.com/file/9UKONbPPKouesnKd5YGJ9YleaSPeYM).

In the upcoming 8.1 update, we plan to add support for button styling in new WooCommerce cart/checkout Gutenberg blocks. For now, you can adjust the buttons using custom code, which should be added to the Global Custom CSS Area in Theme Settings.

.wc-block-cart__submit-container .wp-element-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
    border-radius: var(--btn-accented-brd-radius);
    color: var(--btn-accented-color);
    box-shadow: var(--btn-accented-box-shadow);
    background-color: var(--btn-accented-bgcolor);
    text-transform: var(--btn-accented-transform, var(--btn-transform, uppercase));
    font-weight: var(--btn-accented-font-weight, var(--btn-font-weight, 600));
    font-family: var(--btn-accented-font-family, var(--btn-font-family, inherit));
    font-style: var(--btn-accented-font-style, var(--btn-font-style, unset))
		line-height: 1;
		transition: all .25s ease !important;
}

.wc-block-cart__submit-container .wp-element-button:hover,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
    color: var(--btn-accented-color-hover);
    box-shadow: var(--btn-accented-box-shadow-hover) !important;
    background-color: var(--btn-accented-bgcolor-hover);
}

.wc-block-cart__submit-container .wp-element-button:active,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:active {
    box-shadow: var(--btn-accented-box-shadow-active) !important;
    bottom: var(--btn-accented-bottom-active, 0);
}

Kind Regards

[Author]

Posts