How can I fix the color issue on the checkout button on the Cart page?

Store Design
, , ,

Topic summary

Issue: On the Cart page (Impulse theme), the checkout button displays the wrong color until hover, making it nearly invisible on mobile. Other site buttons and the drawer cart checkout button display correctly.

Fix provided: Add a custom CSS override in Online Store > Theme > Edit code > theme.css. Target the cart page checkout button selector (cart__checkout-wrapper button) and set the text color and background with !important to force the desired colors. The specific colors (e.g., white text on black background) can be adjusted to match the site’s design.

Notes: The use of !important ensures the custom styles override existing theme styles.

Outcome: The original poster confirmed the CSS fix worked. Status: Resolved; no further action needed.

Summarized with AI on January 30. AI used: gpt-5.
1

Guys I need help. The checkout button on Cart page is in wrong color, only after hovering over it it changes to the color i need. On mobile that makes it almost invisible. Is there any way to fix this. I’m using impulse theme, but i can’t seem to find an answer. Everywhere else on the site the buttons are working normal. The checkout button in drawer cart is OK, the only problem is on the Cart page.

2

Hi @Leo1603 ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

.cart__checkout-wrapper button {
    color: white !important;
    background: black !important;
}

NOTE: You can change value Black and White to fit your website
I hope it would help you
Best regards,

Richard | PageFly

1 Like
3

Thank you so much!!! Works like a charm!