Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Customizing the Checkout Button and Checkout Page


Zoey
Go to solution Solved by paul2009,

Question

Site URL: http://www.dakineskava.com

Hi there! I'm looking for the custom coding to change the size and font of the Checkout Button on my site. I've found several solutions on the forum but none of them are working for some reason. Maybe because I'm using the Skye template?

Also, I was wondering if there is any customization of fonts that can be done on the actual checkout page, or whether that is standard for all Squarespace sites. Thanks!

dakineskava.com/checkout

Screen Shot 2020-03-21 at 1.23.10 PM.png

Screen Shot 2020-03-21 at 1.23.23 PM.png

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi @Zoey You didn't say how you wanted to change the cart's "Checkout" button, but here's an example of how you can change the padding to make it smaller: body .checkout button.CheckoutButton

Posted Images

4 answers to this question

Recommended Posts

  • 1

Hi @Zoey

You didn't say how you wanted to change the cart's "Checkout" button, but here's an example of how you can change the padding to make it smaller:

body .checkout button.CheckoutButton-checkoutButton-3yWY2 {
    padding: .7em 1.1em;
}

By default, there's 1em of padding top and bottom, and 2.5em on the sides.

You cannot customise the font (or very much else) on the Checkout page. Only the following settings are available for the checkout, and you cannot use CSS or other code to style it.

ss-checkout-styles.png.fef4d8e382fe23cc22269a8b50b0d1a8.png

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 0

Hello Paul,

Is there a way to add new text on the Check out page?

I have a bilingual website and I would like to add French texts next to the English ones.

I'm using Rally template.

Thanks.

Ewa.

Link to post
  • 0

@Ewa This isn't possible due to restrictions in place.

See my post here about translating the checkout page:

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 0
Posted (edited)

Hi Zoe and Paul,

In the v7.0 Brine family, I have managed to style the checkout button using the following code:

body .checkout button.CheckoutButton-checkoutButton-3yWY2 {
   display:block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:#231f74;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  opacity:1;
  text-align: center;
  width: auto;
  height: auto;
  text-decoration: none;
  padding: 9px 20px;
  background-color: white;
  border-radius: 3px;
  transition: .1s opacity linear;
  cursor: pointer;
  border-color: #231f74;
  border-width:2px;
  border-style:solid;
  margin-top:10px;
}
body .checkout button.CheckoutButton-checkoutButton-3yWY2:hover {color: #fff; background-color: #231f74;}

I'm using it at https://skywavegin.com

Edited by Challenger2
Added URL
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...