Issue with my Checkout button in the Shopping Cart page

Hello there,

Can anyone tell me what is going on with my Checkout button? It all of a sudden looks grey with blue text when it’s supposed to look a rosy brown colour with white text. It changed all of a sudden without me doing anything, I haven’t even touched or played around with the website styling in a while for this to have accidentally happened…until today when I tried to fix it but the colours in the styling menu appear to be correct…There aren’t even any blue or grey colours that appear in the styling colour menu at all so I don’t know where these colours have appeared from.

I’ve attached an image with the weird grey and blue checkout button 😞 and I’ve also attached an image of the rosy brown colour that it’s supposed to look like …it did look like this but suddenly changed. I can’t appear to get it back to normal.

If anyone can help me I’d be deeply appreciative. This has been really causing me to stress as I have customers frequently using this feature.

2 hours ago, Yollanda said:

Can anyone tell me what is going on with my Checkout button? It all of a sudden looks grey

Yes. It's a Squarespace bug that appeared on 21 February 2022. 

Squarespace Customer Care stated: "I can confirm this is related to an issue with the color option for the checkout button on our end. We’ve reported this to our Engineering team, and they’re currently prioritizing the issue."

In my opinion, this lighter colour and almost undetectable hover state change (a slight change in the opacity of the light grey!) could negatively impact conversion rates so it's a little frustrating that this hasn't been fixed in the last week.

Technical note: This is happening because when Squarespace made unannounced changes to the cart page on 21 February, they accidentally removed a class name from this element that controls its style.

Did this help? Please give feedback by clicking an icon below  ⬇️

1 hour ago, paul2009 said:

In my opinion, this lighter colour and almost undetectable hover state change (a slight change in the opacity of the light grey!) could negatively impact conversion rates so it's a little frustrating that this hasn't been fixed in the last week.

Thank you so much for your reply Paul, otherwise I wouldn’t have known it’s a bug on Squarespaces end!

I agree with you! And that’s what I’m afraid of. It will impact the conversion rate of so many stores. I hope it gets fixed soon because for the cost of the Squarespace subscription, this is a big issue and can’t afford to have these things keep on happening… otherwise it’s just not worth the price.

Thank you once again! I really appreciate your help Paul. I can’t wait for this all to be fixed, it was like a nightmare when I saw the checkout button… and I just discovered that on the desktop browser it looks even worse (the checkout button background doesn’t show up at all) sigh… sigh.

Nonetheless, have a great week, let’s hope this is all fixed soon!

Hey guys, It’s been a whole week and the checkout button on the Shopping Cart page is still looking grey on mobile. The button is non existent on desktop (only the word ‘checkout’ is)

Also, 9 days with no reply or response from Squarespace customer support via email.

Thankfully these forums exist or else it would’ve been a lonely journey trying to navigate this issue.

Any ideas about what we can do? Are we going to have to wait it out and see if Squarespace fixes it?

10 minutes ago, Yollanda said:

Any ideas about what we can do? Are we going to have to wait it out and see if Squarespace fixes it?

I can't see your site (you didn't provide a link 🙂) so I can't see the colours you were using on your own buttons, but here is a CSS workaround you can try whilst they fix this.

/* Cart Page Bugfix
   Checkout Button Styles */
button.checkout-button {
    color: #fff;
    background-color: #7877e6;
    border-color: #7877e6;
}

You'll need to substitute the colour codes that I've used for your own choices. Add it to Design > Custom CSS and after saving the changes refresh your browser (F5 or Cmd-R) to see the changes take effect.

Let me know how you get on. 

Did this help? Please give feedback by clicking an icon below  ⬇️