Pop-up checkout button text not visible

The text on my checkout pop up when you an add an item is not showing the text. The button works but you cannot see the words, please can someone help! I have no idea why this is. The below image is how it is showing

@edlion-studio Thank you it is, Tranquilweaves.com

Hi @tranquilweaves ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.button.button--primary {
    background-color: black !important;
}

At your storefront, the checkout button is set with a background color of white (#fff9), causing the checkout pop-up when you add an item to not show the text.

=> You need to change it to black so that the text will display properly.

Step 3: Save your code and reload this page.

=>> The result:

We hope my suggestions will solved your issue.

If it is helpful, can you kindly give us many likes and mark the solution for us?

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

Have a nice day, sir!

@BSSCommerce-B2B Hi this changes all my buttons to solid black so does not work, how can we make it to only change the checkout one?

@edlion-studio Hi I make all the edits to my website myself, so I know everything that has been changed. Usually people put code here that I can then put in myself

@edlion-studio if you input the code here I can do it myself which is better as it is my website and I need to know all edits

Hi @tranquilweaves

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

@theycallmemakka Hi thank you so much for this response, the text now shows but it should be a black button white text, like in my photo below. Please can you help with this?

Hi @tranquilweaves ,

Please replace the above code with this updated code.


@theycallmemakka thanks so much! Really appreciate it, it has worked.

Hi @tranquilweaves ,

Sorry about my mistake and this reply delay,

In step 2, You can edit exactly class to make it to only change the checkout one :

#cart-notification-form .button.button--primary {
    background-color: black !important;
}

I hope these instructions will help you. If they are helpful, please give us to like and mark as the solution.

Have a nice day sir!

I am having the same issue but this didnt work on the refresh theme. I am not code savy at all so advice would be much appreciated.

i’m facing the same problem..please help