Guest Posted March 21, 2020 Share Posted March 21, 2020 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 Link to comment
Solution paul2009 Posted March 21, 2020 Solution Share Posted March 21, 2020 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. 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
Ewa Posted March 30, 2020 Share Posted March 30, 2020 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 comment
paul2009 Posted March 30, 2020 Share Posted March 30, 2020 @Ewa This isn't possible due to restrictions in place. See my post here about translating the checkout 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
Challenger2 Posted May 12, 2020 Share Posted May 12, 2020 (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 May 12, 2020 by Challenger2 Added URL ejcm1985 1 Link to comment
linds777 Posted April 10 Share Posted April 10 Hi there! I am trying to figure out how to change the checkout button to direct customers to another page with a form I have made (the product purchase form isn't routing where I need it to route and there doesn't seem to be as much control as with a form outside of the product edit). Is there certain coding I need to add for when customers click the "checkout" button I can reroute them to another page? Any help is sincerely appreciated! Link to comment
paul2009 Posted April 10 Share Posted April 10 6 hours ago, linds777 said: I am trying to figure out how to change the checkout button to direct customers to another page with a form I have made You can add a Custom Product Form to a product to allow you to capture custom information. If this isn't suitable, please provide us with more details, including a link to the form and the product. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment