Jump to content

Change Checkout Button Font and Button Color

Go to solution Solved by tuanphan,

Recommended Posts

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
  • 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.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.