Jump to content

Changing checkout button colour in shopping cart

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://sawfish-cat-9nxl.squarespace.com/cart

hi there,

pw: Ch4rl13

I'm trying the change the background colour on the checkout button in the cart - I've managed to change the font and font colour, but nothing seems to make the background change. This is the code I've been messing around with to try and get it to work:

/* checkout button */
.checkout-button span {
  color: #414042 !important;
  background: #F4ED3 !important;
  font-family: LilitaOne-Regular !important;
}

...and on the payment page I've changed the button colour but can't figure out how to change the text!

any help would be appreciated - Thanks folks!

Edited by kennedyc
Link to comment
  • Solution
2 hours ago, kennedyc said:

I'm trying the change the background colour on the checkout button in the cart

The password you've provided for your site isn't correct, but you should be able to change the button colour on your Squarespace 7.1 site by adding the following to Design > Custom CSS:

body .checkout button.CheckoutButton-checkoutButton-3yWY2 {
  background-color: #F4ED3;
}

   If a post helps you, please click a "Like" option below  ↘️

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment

Because it’s the cart, the CSS won’t take effect immediately. You’ll need to save it then refresh the page.

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
  • 1 month later...
On 11/10/2020 at 1:12 AM, JKassel said:

I am needing help with this also. I entered the code you provided substituting my preferred color. How long does this take to become visible? It's been about 10 minutes. 

 

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...
On 9/11/2021 at 4:23 AM, LivelyHouse said:

 

Hi there -  I would so appreciate your help as well. I tried using the code and the color didn't update for me.  My site is livelyhouse.co. THANK YOU!

Add to Design > Custom CSS

/* Checkout button */
button.checkout-button {
    background-color: red !important;
}
button.checkout-button a {
    color: green !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.