Edit Shopping Cart Page

Site URL: https://www.inhisimageartistry.com/cart

Hello! I'd like some help editing the look of the shopping cart page in my site. I'd like to be able to change the background color of the page and edit the color of the checkout button as well as the font on the checkout button. I'd also like to be able to edit the color of the font for the words "item, quantity, etc." Can anyone please help?

27 minutes ago, bphillips71 said:

Site URL: https://www.inhisimageartistry.com/cart

Hello! I'd like some help editing the look of the shopping cart page in my site. I'd like to be able to change the background color of the page and edit the color of the checkout button as well as the font on the checkout button. I'd also like to be able to edit the color of the font for the words "item, quantity, etc." Can anyone please help?

Hi, just add these codes to custom css (Design > Custom CSS). You didn't mention the colours and font you want to change them to, so in the codes below, just add your hex code and font name where it says so. Let me know if you need help with that 🙂

Code for checkout button:

.checkout-button {
  background-color:#HEX;
  color:#HEX;
  font-family:'insert font name between the apostrophes';
}

Code for the page's background colour:

#cart 
background-color:#HEX;
}

Code to edit the colours of "item, quantity, price":

.cart-item-list-labels {
  color:#HEX;
}

On 3/9/2022 at 7:55 AM, Jia said:

Hi, just add these codes to custom css (Design > Custom CSS). You didn't mention the colours and font you want to change them to, so in the codes below, just add your hex code and font name where it says so. Let me know if you need help with that 🙂

Code for checkout button:

.checkout-button {
  background-color:#HEX;
  color:#HEX;
  font-family:'insert font name between the apostrophes';
}

Code for the page's background colour:

#cart 
background-color:#HEX;
}

Code to edit the colours of "item, quantity, price":

.cart-item-list-labels {
  color:#HEX;
}

Hi! Thanks for getting back to me. I tried to implement those changes and nothing changed for me. Is there something I'm doing wrong? 

9 hours ago, bphillips71 said:

Hi! Thanks for getting back to me. I tried to implement those changes and nothing changed for me. Is there something I'm doing wrong? 

Hi, I noticed that on the last code, you didn't change the #HEX with a hex code and that could break the code. Do replace it with your hex code, but other than that, the checkout button and page background colour have changed on my end.

13 hours ago, Jia said:

Hi, I noticed that on the last code, you didn't change the #HEX with a hex code and that could break the code. Do replace it with your hex code, but other than that, the checkout button and page background colour have changed on my end.

 

Thank you! It seems to have updated on my end when I revisited the page. One last question though. Do you suppose there's any way I can update the weight and size of the font for the ".cart-item-list-labels" and the adjust the padding & font size of the checkout button?

6 hours ago, bphillips71 said:

Thank you! It seems to have updated on my end when I revisited the page. One last question though. Do you suppose there's any way I can update the weight and size of the font for the ".cart-item-list-labels" and the adjust the padding & font size of the checkout button?

Here are the codes, just change the values to what you prefer.

To change the font weight and size for the 'item, qty, price':

._K32yoEnv {
  font-size: 12px;
  font-weight:bold;
}

To change how the product name is styled:

.ZlqJl1uBV {
  font-size:15px;
  font-weight:bold;
}

Adjust the padding and font size of the checkout button:

.checkout-button {
  padding: 50px !important;
  font-weight: bold !important;
}

One thing to note about the dynamic class names ( _K32yoEnv and ZlqJl1uBV ) SS is using is that they can change without warning and the effect will break.

SS has been changing the dynamic class about once a month for the last several months.

@creedon Thanks for the reminder!

@bphillips71 you can replace those codes with the following:

Product names:

.item-desc a {
  font-size:15px;
  font-weight:bold;
}

Cart item list labels

.cart-item-list-labels {
  font-weight: bold;
  font-size: 11px !important;
}

hi guys 
when my customers click 'checkout' i want a lightbox to appear with upsell items, i have the code for the lightbox for upsell but i dont know how to make it appear when they click check out 

On 11/21/2022 at 4:23 PM, molliehiggi said:

hi guys 
when my customers click 'checkout' i want a lightbox to appear with upsell items, i have the code for the lightbox for upsell but i dont know how to make it appear when they click check out 

Hi,

See this answer 

Hello - on an empty checkout page, a random black box appears that I can't get rid of. See attached.

Is there a way to change that "continue shopping" button so it looks like the rest of the buttons on the website? 

Also - how am I able to change the background color of the checkout page? https://silver-hyperboloid-kt5p.squarespace.com/config/

On 11/28/2022 at 6:19 AM, Rudybro said:

Hello - on an empty checkout page, a random black box appears that I can't get rid of. See attached.

Is there a way to change that "continue shopping" button so it looks like the rest of the buttons on the website? 

Also - how am I able to change the background color of the checkout page? https://silver-hyperboloid-kt5p.squarespace.com/config/

#1. Did you solve?

#2. To change button style, add this to Design > Custom CSS

button[onclick="goBack()"] {
    background-color: transparent !important;
    padding: 10px 20px;
}

#3. You mean Cart Page /cart or Checkout page /checkout?

#1) No it still exists. 

#2) thank you 

#3) I figured it out thank you. 

On 11/23/2022 at 6:58 PM, tuanphan said:

Hi,

See this answer 

 

 

Howdy

I've impemented a redirect page using said script ^ and it works really well

the only issue is i have a custom form on my product that pops up after you click add to cart

now it flashes on the screen before redirecting to the upsell page 

This form is important as its an "i agree to the terms and conditions"

https://lilithdesigns.com/store/p/atra-pendant

the password is 64lilith

2 hours ago, ygarbers said:

the only issue is i have a custom form on my product that pops up after you click add to cart

I suspect product forms were not an anticipated use case for the redirect code.

You can always try contacting the code author to see if they can update their code.

I'm unaware of any add to cart button redirect code that takes product forms into account. However it may be possible to do so using MutationObserver, a way to watch for certain conditions. MO's are not easy to implement.

Hello,

I am having an issue with changing the color of the cart item list labels.

I've tried the code here below but it did not change anything.

.cart-item-list-labels {
  color:#HEX;
}

Could someone help me ? 😕

I've attached a screenshot of the page.

Right now I've change the color page back to white so people can purchase items but I'd like this check out page to be black and font in white.

Thank you!

Sophie

15 hours ago, sophysticate said:

Could someone help me ? 😕

I've attached a screenshot of the page.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Hi all,

I was going through all this to see if there was a solution offered for my issue as well but I couldn't find it.

Call me a perfectionist, but I really don't like it that on my checkout page, the item details aren't vertically aligned with the image. See image. I really tested out chatgpt with generating custom ccs but after 25 attempts we didn't find a solution. Anyone willing to help?

3 hours ago, rikdevoogd said:

I really don't like it that on my checkout page, the item details aren't vertically aligned with the image.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Thank you for this topic!

Is there a way to change the text under #2 "Delivery Method" in the cart? Many of my customers choose local pickup and this makes it seem like they have to have the item shipped. I would like to change the copy to read something like: "Please enter your address to see pickup, delivery and shipping options for your area."

www.sweetmercyfarms.com

Thank you!

@SweetMercy

Please see Local pickup.

21 hours ago, creedon said:

 

@SweetMercy

Please see Local pickup.

 

Hi creedon,

Thank you for the Pickup Suggestion. Yes, that does allow customers to see Shipping and Pickup options without filling out their address, but I have 2 issues with the current format:

1. I offer delivery which doesn't appear unless the address is filled out so customers are not aware that it's an option. It appears that Pickup and shipping are the only options. See screenshot. 

2. I offer a physical product as a subscription: a Farm CSA. Unfortunately, Pickup options don't apply to subscription products, so I have to offer "free pickup" as a SHIPPING option in order for customers to have the option of picking up their CSA for free. 

Because of these issues, I thought it might just be easier to add all of the options, including free pickup, as SHIPPING options and change the verbiage to "Please enter your address to see pickup, delivery and shipping options for your area."

Any other suggestions are welcome, and thank you for your input. 

36 minutes ago, SweetMercy said:

I thought it might just be easier to add all of the options, including free pickup, as SHIPPING options and change the verbiage to "Please enter your address to see pickup, delivery and shipping options for your area."

There's the rub. The checkout page can not be altered with custom code. It is a Squarespace security feature.

Thanks creedon. I will recommend changes to the checkout section as suggested features.