I’m trying to change the white “Check Out” and “Estimate” text to black on the yellow buttons on the cart page. However, when hovered over, the text should remain white. Could someone assist me? I’ve attached a screenshot.
Topic summary
Goal: Change the cart page’s yellow button text (“Check Out” and “Estimate”) from white to black, while keeping the text white on hover.
Context: A screenshot and the cart URL were provided to show the current styling.
Proposal 1: Edit theme.liquid and add code in the . However, the shared code block was empty, so no concrete CSS/HTML was provided in that reply.
Proposal 2 (most concrete): Edit base.css and set button text to black using the selectors .text-button and .theme-button. The snippet changes color to black but does not include a :hover rule to keep text white on hover. There also appears to be a possible typo/spacing in “.text-b utton”.
Technical notes: This is a CSS change; appropriate selectors and a :hover state are required to meet the hover requirement.
Status: No confirmed solution. Hover behavior remains unaddressed in the provided code, and the first suggestion lacks actual code. Thread appears open/ongoing.
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme. liquid file and add the following code to the head tag
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
Hello @skipsbazaar ,
Go to online store > themes > Edit code > find base.css file
Add to the given code at the bottom of the file base.css
.text-button {
color: black;
}
.theme-button {
color: black;
}
Save Changes
