Changing Shopping Cart Page

Hi Taun, unfortunately that didn't seem to work. The result is even more confounding. 

I just tried playing around with the colors, it seems there is a box around the font!

On 6/12/2021 at 8:34 PM, AlishaK said:

Hi Taun, unfortunately that didn't seem to work. The result is even more confounding. 

Remove this code

.checkout-button * {
    padding: 4px;
    background: #f7efe7;
    font-family: 'MDNichrome0.7';
}

add new code

.checkout-button * {
    padding: 4px;
    font-family: 'MDNichrome0.7';
    color: green !important;
}
.checkout-button {
    background: red !important;
}

Amazing, Taun. Thank you so much.

Is it bad to revive old questions on this forum?  Or is it preferred to piggy back here if I have a similar question?

I am trying to change the color of these black X's on the shopping cart page but I can't find where to adjust this color.

 

26 minutes ago, dustinandjessica said:

Is it bad to revive old questions on this forum?
I am trying to change the color of these black X's on the shopping cart page.

No, that's fine 🙂

You can change these by adding the following to Design > Custom CSS:

#sqs-cart-container .item-remove button {
  color: white;
}

10 minutes ago, paul2009 said:

No, that's fine 🙂

You can change these by adding the following to Design > Custom CSS:

#sqs-cart-container .item-remove {
  color: white;
}

 

Hi Paul,

Thank you for looking into this issue.  

I pasted the code into my Custom CSS area but the X's are still black.  

If you add something to your cart from this page, then go to the cart, are they black for you also?
https://www.theblissboxstore.com/what-kind-of-bliss


 

Hmm. Try again (I've updated it).

2 minutes ago, paul2009 said:

Hmm. Try again (I've updated it).

That did it!  Thank you Paul!

While I have you here, do you mind if I ask one more question about the cart page?  Is it possible to create a border around the cart area similar to what I have done in the attached photo?  I think I have seen it on other peoples' square space pages.

On 7/2/2021 at 4:56 AM, dustinandjessica said:

That did it!  Thank you Paul!

While I have you here, do you mind if I ask one more question about the cart page?  Is it possible to create a border around the cart area similar to what I have done in the attached photo?  I think I have seen it on other peoples' square space pages.

Add to Design > Custom CSS

/* Cart border */
div#sqs-cart-container {
    border: 1px solid white;
    padding: 2em;
}

19 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Cart border */
div#sqs-cart-container {
    border: 1px solid white;
    padding: 2em;
}

 

THANK YOU TUAN!!!  It looks beautiful 😎

Hey there! A lot of these helped so thank you already. However, is there a way to change the color of the text in the 'quantity' box, as it's currently white in a white box. Alternatively, is there a way to change the color of the box background itself?

@IainMadden

Please post the URL for your site.

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

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

7 minutes ago, creedon said:

@IainMadden

Please post the URL for your site.

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

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Sorry, the client isn't happy with giving that out so I am unable to. I'll try to make it more clear using images. The client wants the text in the quantity box, which I've circled in red, to be a different color, since currently it's white on white (as is shown in the second image where I highlight the quantity number). If that's not possible, would it be possible to change the color of the quantity box instead?

@IainMadden

.LwuRxog4z input { /* cart quantity field */

  background-color : red;
  
  }

Without access to the site I can't be sure this will work.

Let us know how it goes.

On 7/1/2021 at 5:20 PM, dustinandjessica said:

Is it bad to revive old questions on this forum?  Or is it preferred to piggy back here if I have a similar question?

I am trying to change the color of these black X's on the shopping cart page but I can't find where to adjust this color.

 

May I ask how you changed the fonts within the same line? (The Bliss Box). It's lovely!

15 hours ago, AlishaK said:

May I ask how you changed the fonts within the same line? (The Bliss Box). It's lovely!

Which line?

This was actually a question for @dustinandjessica 🙂 Apologies, didn't realize it would appear all the way at the bottom of the forum.

@tuanphan

@creedon

Hi guys thanks for all the code.

Do you know the code to change the 'subtotal?' text colour?

1 hour ago, Emileah said:

Do you know the code to change the 'subtotal?' text colour?

Add the following to Design > Custom CSS.

/* cart subtotal color */

#cart ._c0S6XFZk {

  color : red;
  
  }

Let us know how it goes.

@paul2009

I'm having trouble with finding how to change the quantity and subtotal items so they are visible (white) on a black background. Do you know of the CSS code for this? 

This is what I have so far from what I've been able to make sense of from discussions here:

/* Variant */
.variant-info * {
    color: white;
}
/* price */
.item-price {
    color: white;
}

/* subtotal price */
._2nJjmtuOe * {
    color: white;
}

/* cart page product title color */
.item-desc a {
    color: white;
}
.cart-body {
  color: white;
}
.cart-item-list-labels span {
    font-size: 20px !important;
    color: white;
}
#sqs-cart-container .item-remove button {
  color: white;
}

@Michelle_0198

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

If your site is not public please set up a site-wide password, if 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 documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Please note SS is using dynamic class names in many places on the cart page. SS has been changing those names about once a month for the last several months. It is absolutely infuriating but something you need to be aware of so that you can take action when the class names change. In other words CSS you create today may break at anytime without notification.

11 hours ago, Michelle_0198 said:

I'm having trouble with finding how to change the quantity and subtotal items so they are visible (white) on a black background. Do you know of the CSS code for this? 

In all honesty, I don't recommend that you use CSS to customise the cart page.

As @creedonsaid above, Squarespace are making far too many hasty unannounced changes to the cart page at the moment without considering the impact on customers. If you use CSS it's likely to stop working without notice, and could stop customers using your cart. They have made unannounced changes to the cart page five times in the last three months.

@creedon this is actually for a client.
site is: www.kara-ladd.com
She has a black background and we are just trying to make sure everything is visible. no heavy customizations. thx for the info!

9 hours ago, Michelle_0198 said:

She has a black background and we are just trying to make sure everything is visible.

The first issue I see is when the cart is empty the empty cart text is transparent.

It looks to me like one of the color settings for text has been set to transparent. Design > Styles.

Check all your font color settings. If the transparency is set to the red circle that is bad for text visibility. Green is good.

Let us know what you find then we can move on from there.