Change Checkout Button Font and Button Color

Site URL: https://www.bricktechstudios.com/cart

Hello! I'm trying to change the checkout button color to black and also change the font to the custom font I uploaded. Does anyone know how to target it?

My site password is: SuperSoup

Thanks!

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

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;
}

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

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?

@tuanphan The background color.

.checkout-button {
    background: green !important;
}

@tuanphan Perfect! Thank you!

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

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?

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 )

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.

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? 

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? 

Can you share link to a product? We cancheck easier

@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;
}

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

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

On 3/19/2022 at 2:32 PM, paul2009 said:

@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;
}

very kind thank you @paul2009!! I'll make a note of this for other sites too. You you just made my day! 

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;
}

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?

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?

 

 

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;
}