Home › Forums › WoodMart support forum › How to change button color at cart and orders pages?

How to change button color at cart and orders pages?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • December 21, 2024 at 4:22 pm #624405

    mireek.kacper
    Participant

    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.

    Attachments:
    You must be logged in to view attached files.
    December 23, 2024 at 11:02 am #624638

    Bogdan Donovan
    Keymaster

    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
Viewing 2 posts - 1 through 2 (of 2 total)