Jump to content

Change Checkout Button Font and Button Color

Go to solution Solved by tuanphan,

Recommended Posts

  • Solution

Add to Home > Design > Custom CSS

body#cart .checkout span {
    font-family: enter-font-name !important;
    color: green;
}

 

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
23 minutes ago, cvanuch said:

@tuanphan Thank you, I tried it but it doesn't seem to be working. Do you have any other suggestions?

Have you declared custom font yet?

@font-face {
	font-family: tuan;
	src: url(upload font file and paste font url here);
}
body#cart .checkout span {
    font-family: tuan !important;
    color: green;
}

 

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
4 minutes ago, cvanuch said:

@tuanphan Yes, I was able to get the font to change but the button color isn't changing.

you mean background color or checkout text color?

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
  • 1 month later...
4 hours ago, jjjuliejj said:

Can you please post the Custom CSS for 7.1 to change the "checkout" button font, size, and spacing?

Can you share link to cart page on your site?

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
  • 1 year later...
On 4/30/2020 at 6:20 PM, tuanphan said:

Can you share link to cart page on your site?

hi Tuan, yes I'm needing the code too. the part for button colour worked but not able to make the font change no matter what I do and can't find the target class. Frustrating that Squarespace doesn't automatically make ALL buttons on the site pull the colour and font from the other settings!

https://bird-carillon-tzew.squarespace.com/shop/p/a-horse-with-no-name pw Wildthings55

thanks! (you'll need to check out this item to see the checkout page of course )

Link to comment
2 hours ago, jaisequoia said:

Frustrating that Squarespace doesn't automatically make ALL buttons on the site pull the colour and font from the other settings!

Normally this button would use the standard button styles (colours and fonts) but Squarespace made an undocumented change in February that "broke" this for the cart. I've documented this in the Circle "bugs" list here.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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.

Buy me a coffee

Link to comment

Hi there, thanks for this, I have been able to change the colour of my "checkout" button with the above code... wondering if I can get help for creating a black outline around my checkout button and the box which shows the quantity? Also for making the lines around the item and the words "item, quantity and price" on my shopping cart page black? 

Screen Shot 2022-03-18 at 1.42.12 PM.png

Link to comment
On 3/18/2022 at 7:45 AM, abbyleebonny said:

Hi there, thanks for this, I have been able to change the colour of my "checkout" button with the above code... wondering if I can get help for creating a black outline around my checkout button and the box which shows the quantity? Also for making the lines around the item and the words "item, quantity and price" on my shopping cart page black? 

Screen Shot 2022-03-18 at 1.42.12 PM.png

Can you share link to a product? We cancheck 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

@jaisequoia Until they fix the bug, this may help you:

body .checkout-button {
  border-radius: 0.4rem;
  font-family: hypatia-sans-pro!important;
  font-weight: 900!important;
}

862810317_Screenshot2022-03-19at21_32_11.png.497c6e69d37dbc8682b5423988983af9.png

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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.

Buy me a coffee

Link to comment
On 3/21/2022 at 4:56 AM, abbyleebonny said:

Hi there @tuanphan  - thanks so much for getting back to me!

The link is here: https://dekanstudios.com/shop/p/sol-diffuser

Add to Dsesign > Custom CSS

div.item-quantity input, button.checkout-button {
    border: 1px solid black !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
23 hours ago, tuanphan said:

Add to Dsesign > Custom CSS

div.item-quantity input, button.checkout-button {
    border: 1px solid black !important;
}

 

Thank you @tuanphan - that's amazing! Are you able to please help me, I have set my purchase buttons to 'outline' with black text, however when I hover over it the whole button turns black... Do you have custom css so that when it is hovered over the border and text remain black but the background turns from my site colour to white?

 

 

Screen Shot 2022-03-23 at 8.46.05 PM.png

Screen Shot 2022-03-23 at 8.50.34 PM.png

Link to comment
On 3/23/2022 at 2:51 PM, abbyleebonny said:

Thank you @tuanphan - that's amazing! Are you able to please help me, I have set my purchase buttons to 'outline' with black text, however when I hover over it the whole button turns black... Do you have custom css so that when it is hovered over the border and text remain black but the background turns from my site colour to white?

 

 

Screen Shot 2022-03-23 at 8.46.05 PM.png

Screen Shot 2022-03-23 at 8.50.34 PM.png

Add to Design > Custom CSS

/* Purchase Button */
div.sqs-add-to-cart-button:hover {
    background-color: white !important;
}
div.sqs-add-to-cart-button:hover div {
    color: black !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.