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

Customizing the Checkout button on the Shopping Cart page


mars2
Go to solution Solved by creedon,

Question

Site URL: https://lilamethyst.com/

Good morning-

I was hoping to get help with my Checkout button on the shopping cart page of my website. I tried a few codes I found here on the forums but I've been having trouble getting it to look right. I would like to use the same button (font, background color, shape) seen here on this page. My website's password is 'mango'. Thanks so much in advanced for your help and time!

Edited by megan222
spelling correction
Link to post
  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Your site is password protected, so I couldn't see the specific button you were referring to without knowing the password. However, as I posted here, you can use CSS to change the button's stylin

HI Leopold- This worked like a charm and my button is exactly how I wanted. Thank you so much for your help and time!

Add the following to Design > Custom CSS. /* begin modify cart appearance */ .CartHeader-cartTitle-9Dk3d.cart-title, .CartTableRow-itemTitle-1MDgZ a { font-size: 43px;

Posted Images

13 answers to this question

Recommended Posts

  • 0

Hi

Use this code in Design -> Custom CSS

.CartFooter-checkout-28MW2 button.sqs-editable-button {
    background-color: #db29ff !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: #fff !important;
    -webkit-backface-visibility: hidden !important;
    -webkit-transition: .1s opacity linear !important;
    -moz-transition: .1s opacity linear !important;
    -ms-transition: .1s opacity linear !ii;
    transition: .1s opacity linear !important;
    padding: 13px 26px !important;
    font-family: synthemesc !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 39px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !IMPORTANT;
    line-height: normal !important;
}

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to post
  • 0
55 minutes ago, megan222 said:

I would like to use the same button (font, background color, shape) seen here on this page.

Your site is password protected, so I couldn't see the specific button you were referring to without knowing the password.

However, as I posted here, you can use CSS to change the button's styling. If you add the template below to Design > Custom CSS you can then add settings within the curly braces to decide the font-size, color, and so on:

body .checkout button.CheckoutButton-checkoutButton-3yWY2 {
  
  
}

body .checkout button.CheckoutButton-checkoutButton-3yWY2:hover {

  
}

For example: 

color: black;
background-color: red;
font-size: 14px;

The first selector determines the styles for the button at rest. The second selector determines the styles for the button when the user hovers over it, allowing you to change the background-color or opacity. 

Bear in mind that you will need to save the CSS and then refresh the cart page before you will see any visible changes.

Do reach out if you need more guidance 🙂

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include™, including a range of Squarespace extensions.
I value honesty, integrity, transparency and respect.
Links in my posts may refer to SF Digital products or may be affiliate links.
I ♥️ Squarespace. I've been a loyal and enthusiastic supporter of the platform since 2007. 

 

Link to post
  • 0

Add the following to Design > Custom CSS.

/* begin modify cart appearance */

  .CartHeader-cartTitle-9Dk3d.cart-title,
  .CartTableRow-itemTitle-1MDgZ a
  
    {
    
      font-size: 43px;
      
      }
      
  .CartTable-itemLabel-3zzV1,
  .CartTable-subtotalLabel-3qWE9
  
    {
    
      font-size: 32px;
      
      }
      
  .CartTableRow-itemPrice-26eXS,
  .CartTable-subtotalPrice-2JFeD
  
    {
    
      color: #bf0;
      font-family: 'Spicy Rice';
      font-size: 44px;
      
      }
      
  /* end modify cart appearance */

Thank you for the detailed description of what you wanted. It made it much easier to hopefully implement the effect you want to achieve! 🙂

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
12 hours ago, paul2009 said:

Your site is password protected, so I couldn't see the specific button you were referring to without knowing the password.

However, as I posted here, you can use CSS to change the button's styling. If you add the template below to Design > Custom CSS you can then add settings within the curly braces to decide the font-size, color, and so on:


body .checkout button.CheckoutButton-checkoutButton-3yWY2 {
  
  
}

body .checkout button.CheckoutButton-checkoutButton-3yWY2:hover {

  
}

For example: 


color: black;
background-color: red;
font-size: 14px;

The first selector determines the styles for the button at rest. The second selector determines the styles for the button when the user hovers over it, allowing you to change the background-color or opacity. 

Bear in mind that you will need to save the CSS and then refresh the cart page before you will see any visible changes.

Do reach out if you need more guidance 🙂

Thank you so much Paul!!!

Link to post
  • 0
13 hours ago, IXStudio said:

Hi

Use this code in Design -> Custom CSS


.CartFooter-checkout-28MW2 button.sqs-editable-button {
    background-color: #db29ff !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: #fff !important;
    -webkit-backface-visibility: hidden !important;
    -webkit-transition: .1s opacity linear !important;
    -moz-transition: .1s opacity linear !important;
    -ms-transition: .1s opacity linear !ii;
    transition: .1s opacity linear !important;
    padding: 13px 26px !important;
    font-family: synthemesc !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 39px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !IMPORTANT;
    line-height: normal !important;
}

Please use the like button if it helps you!

Best,
Leopold

HI Leopold- This worked like a charm and my button is exactly how I wanted. Thank you so much for your help and time!

Link to post
  • 0
16 minutes ago, megan222 said:

Also, is there any way I can adjust the font and size of the text on the shopping cart page?

Yes. If you could tell us which elements you want to change and how you want to change them we can help.

Which font families do you want to use and with which items? What font sizes do you want to use and with which items?

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
44 minutes ago, creedon said:

Yes. If you could tell us which elements you want to change and how you want to change them we can help.

Which font families do you want to use and with which items? What font sizes do you want to use and with which items?

Hi Thomas! I would like to change "Shopping Cart" and the text of the product names to the font Synthemesc in size 45px, all uppercase. I would also like to change "item", "quantity", and "price" to the font Chicle in size 32px, all lowercase. For the price, quantity number, and subtotal price I was hoping to change it to the font Spicy Rice in size 30px. Thanks for reading and for your time!!

 

Screenshot 2020-11-16 at 9.01.33 PM.png

Edited by ana3000
uppercase/lowercase
Link to post
  • 0
21 minutes ago, creedon said:

Add the following to Design > Custom CSS.



/* begin modify cart appearance */

  .CartHeader-cartTitle-9Dk3d.cart-title,
  .CartTableRow-itemTitle-1MDgZ a
  
    {
    
      font-size: 43px;
      
      }
      
  .CartTable-itemLabel-3zzV1,
  .CartTable-subtotalLabel-3qWE9
  
    {
    
      font-size: 32px;
      
      }
      
  .CartTableRow-itemPrice-26eXS,
  .CartTable-subtotalPrice-2JFeD
  
    {
    
      color: #bf0;
      font-family: 'Spicy Rice';
      font-size: 44px;
      
      }
      
  /* end modify cart appearance */

Thank you for the detailed description of what you wanted. It made it much easier to hopefully implement the effect you want to achieve! 🙂

Let us know how it goes.

This was PERFECT! Wow, you rock! Would it be possible to get the code to modify the size of the product name on this page as well? In my case, the text that says "happy place print". You made this super easy and I will have no trouble adjusting these codes in the future. Thanks again!

 

Screenshot 2020-11-16 at 9.01.33 PM.png

Edited by ana3000
wrong photo
Link to post
  • 0
14 minutes ago, creedon said:

Add the following to Store Settings > Advanced > Page Header Code Injection for your store page.


<style>

  .ProductItem-details h1.ProductItem-details-title {
  
    font-size: 60px;
    
    }
    
  </style>

Let us know how it goes.

Sorry, this one didn't seem to work! I am referring to the Product Name on the shopping cart page 🙂 Like how this code helped e change the item and subtotal price font styles. Thank you!

.CartTableRow-itemPrice-26eXS,
  .CartTable-subtotalPrice-2JFeD

 

Screenshot 2020-11-16 at 10.47.45 PM.png

Link to post
  • 0
7 minutes ago, ana3000 said:

I am referring to the Product Name on the shopping cart page

My bad.

I already provided selector for that, if I understand correctly, for the cart. It is...

Quote

,CartTableRow-itemTitle-1MDgZ a

If you need to control that separately from ..CartHeader-cartTitle-9Dk3d.cart-title let us know.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
1 hour ago, creedon said:

My bad.

I already provided selector for that, if I understand correctly, for the cart. It is...

If you need to control that separately from ..CartHeader-cartTitle-9Dk3d.cart-title let us know.

Ah, got it! My apologies! I was able to make a code to control it separately. Thanks so much for all of your help with my website! You are appreciated!

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...