Jump to content

Customizing the Checkout button on the Shopping Cart page

Go to solution Solved by creedon,

Recommended Posts

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 comment

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 comment
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 🙂

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to 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 is optional.

Link to comment
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 comment
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 comment
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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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 comment
  • Solution

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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 comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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 comment
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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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

Hi I am looking for a help. I see some of you got some codes.

I need to change CHECKOUT button into my language MAKSMA

Also is there a possibility to change words like ITEM, QUANTITY, PRICE, SUBTOTAL?

My head is exploding as I am no coder and new to all this but trying to make it work. 

Many thanks if someone could help!

376127714_ScreenShot2022-02-10at9_59_24AM.thumb.png.3408824ceb7eb266ff96b4382853037c.png

Link to comment
On 2/10/2022 at 3:02 PM, missandei said:

Hi I am looking for a help. I see some of you got some codes.

I need to change CHECKOUT button into my language MAKSMA

Also is there a possibility to change words like ITEM, QUANTITY, PRICE, SUBTOTAL?

My head is exploding as I am no coder and new to all this but trying to make it work. 

Many thanks if someone could help!

376127714_ScreenShot2022-02-10at9_59_24AM.thumb.png.3408824ceb7eb266ff96b4382853037c.png

Add to Design > Custom CSS

/* Shopping Cart Title */
.cart-title {
    visibility: hidden;
}

.cart-title:before {
    visibility: visible;
    content: "New Shopping Cart";
    text-transform: capitalize;
}
/* Item */
.cart-item-list-labels>span:first-child span {
    visibility: hidden;
}
.cart-item-list-labels>span:first-child span {
    content: "New Item";
    visibility: visible;
}
/* Quantity */
.cart-item-list-labels>div:nth-child(4) span span {
    visibility: hidden;
    font-size: 0;
}
.cart-item-list-labels>div:nth-child(4) span span:before {
    visibility: visible;
    content: "New quantity";
    font-size: 12px;
}
/* price */
.cart-item-list-labels>div:nth-child(5) span span {
    visibility: hidden;
}
.cart-item-list-labels>div:nth-child(5) span span:after {
    visibility: visible;
    content: "new price";
}
/* Subtotal */
._2nJjmtuOe span span {
    visibility: hidden;
}
._2nJjmtuOe span span:after {
    visibility: visible;
    content: "New Subtotal:";
}
/* checkout */
.checkout-button span {
    visibility: hidden;
    font-size: 0;
}
.checkout-button span:before {
    visibility: visible;
    content: "Checkout";
    font-size: 14px;
}

 

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.