Customizing the Checkout button on the Shopping Cart page

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!

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

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 🙂

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

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!

@paul2009 @IXStudio Also, is there any way I can adjust the font and size of the text on the shopping cart page? my site password is 'mango' 🙂

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?

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

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!

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.

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

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.

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!

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!

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!

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