Changing Shopping Cart Page

Site URL: https://potato-sphere-g3k8.squarespace.com/config/

Hi! How do you change the color of the background and font on the shopping cart page? I'd like the "Shopping Cart" title to not be capitalized and match the font on the rest of my site. Also, how do you make "item," "QTY" and "Price" bigger and lowercase?

Website: naonow.com Password: naonow

@tuanphan

Add to Home > Design > Custom CSS

.cart-title {
    visibility: hidden;
}
.cart-title:before {
    visibility: visible;
    content: "Shopping Cart";
    color: red;
    font-size: 50px;
    font-family: monospace;
    letter-spacing: 1px;
}

Can you share link to product page?

@tuanphan here's the link for the page I'm trying to change:

https://potato-sphere-g3k8.squarespace.com/config/design/custom-css

https://naonow.com/cart

/config is url for site owner

Here!

https://naonow.com/products

https://naonow.com/get-started/ultimate

Is it possible to make the "Shopping Cart" title not capitalized and match the font on the rest of my site. Also, how do you make "item," "QTY" and "Price" bigger and lowercase?

https://naonow.com/cart Password: naonow

And can I change the color?

@tuanphan I don't see any changes when I use that code! Should I be uploading it to the checkout page?

18 hours ago, rachelt said:

@tuanphan I don't see any changes when I use that code! Should I be uploading it to the checkout page?

Add to Home . Design > Custom CSS

Hi guys. I'd like to change the Shopping cart title to read  'Basket' and I'd like to change the font too.

I also need to change the font and colour of the checkout button if poss. Any help would be really appreciated! Thank you 🙂

https://elephant-falcon-8x4p.squarespace.com/cart

p/w vineyard

21 hours ago, MakingWaves said:

Hi guys. I'd like to change the Shopping cart title to read  'Basket' and I'd like to change the font too.

I also need to change the font and colour of the checkout button if poss. Any help would be really appreciated! Thank you 🙂

https://elephant-falcon-8x4p.squarespace.com/cart

p/w vineyard

Add to Home > design > Custom CSS

/* Shopping cart title */
.cart-title {
    visibility: hidden;
}
.cart-title:before {
    visibility: visible;
    content: "tuanphan";
}
/* Checkout */
.checkout-button {
    background: green !important;
    color: red !important;
    font-family: monospace !important;
}

On 9/1/2020 at 10:59 AM, tuanphan said:

Add to Home > design > Custom CSS

/* Shopping cart title */
.cart-title {
    visibility: hidden;
}
.cart-title:before {
    visibility: visible;
    content: "tuanphan";
}
/* Checkout */
.checkout-button {
    background: green !important;
    color: red !important;
    font-family: monospace !important;
}

 

Hey Tuan. Always value your help, thank you.

I added your code (and amended the relevant areas) but nothing's happening at all 😞  I'm on v7.0 if that makes a difference?

56 minutes ago, MakingWaves said:

Hey Tuan. Always value your help, thank you.

I added your code (and amended the relevant areas) but nothing's happening at all 😞  I'm on v7.0 if that makes a difference?

I see the code worked here?

6 minutes ago, tuanphan said:

I see the code worked here?

Oh yeh I can see it now, sorry it didn't update straight away. Weird. How do I lose the italics on the title? TY

.cart-title:before {
    visibility: visible;
    content: "tuanphan";
	font-style: normal;
}

Thanks so much Tuan ❤️ 

For some reason the padding from the top margin of the shopping cart page is playing up, so 'Basket' is sitting too close to the header (on desktop). How can I increase the padding from the top without it affecting all other pages? TY!

https://elephant-falcon-8x4p.squarespace.com/cart

p/w vineyard

33 minutes ago, MakingWaves said:

Thanks so much Tuan ❤️ 

For some reason the padding from the top margin of the shopping cart page is playing up, so 'Basket' is sitting too close to the header (on desktop). How can I increase the padding from the top without it affecting all other pages? TY!

https://elephant-falcon-8x4p.squarespace.com/cart

p/w vineyard

Add to Home > Design > Custom CSS

body#cart {
    margin-top: 100px;
}

Hey @tuanphan thanks for your help with this! How do you also change the font of the item name, item price and subtotal?

22 hours ago, jeaninewilson said:

Hey @tuanphan thanks for your help with this! How do you also change the font of the item name, item price and subtotal?

Hi. Can you share link to a product? We can check easier

Bonjour @ tuanphan, 

J'ai un problème sur la page de mon panier. Je souhaite réduire la largeur de la page. Pour le moment, il prend toute la largeur comme vous pouvez le voir sur la capture d'écran.

Comment puis-je réduire la largeur de la page?

Merci 

https://arabicafes.com/cart

18 hours ago, Mevn said:

Bonjour @ tuanphan, 

J'ai un problème sur la page de mon panier. Je souhaite réduire la largeur de la page. Pour le moment, il prend toute la largeur comme vous pouvez le voir sur la capture d'écran.

Comment puis-je réduire la largeur de la page?

Merci 

https://arabicafes.com/cart

Utiliser ce CSS

/* page du panier */
@media screen and (max-width:1350px) {
.system-page {
    max-width: 1150px;
}
}

Hi all, I'm following along in this thread but still not seeing how to change the background color of this page. I want the background color of this page to be #F7EFE7 and all text (including title of product, price, and subtitle) to be black. Here's my code:

.cart-body {
  color: #F7EFE7;
}
.cart-title {
    visibility: hidden;
}
.cart-title:before {
    visibility: visible;
    content: "Shopping Cart";
    color: black;
    font-size: 50px;
    font-family: 'MDNichrome0.7';
    letter-spacing: 1px;
}
.cart-item-list-labels span {
    font-size: 20px !important;
    color: black;
}

My site is here: https://bamboo-icosahedron-37sw.squarespace.com/

This one is working on my page, you can try. ( For background color)

/* Shopping cart background */
body#cart {
    background-color: #ffffff;
}

Here for the text color:

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

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

/* cart page product title color */
.item-desc a {
    color: black;
}

On 6/9/2021 at 6:12 AM, AlishaK said:

Hi all, I'm following along in this thread but still not seeing how to change the background color of this page. I want the background color of this page to be #F7EFE7 and all text (including title of product, price, and subtitle) to be black. Here's my code:

.cart-body {
  color: #F7EFE7;
}
.cart-title {
    visibility: hidden;
}
.cart-title:before {
    visibility: visible;
    content: "Shopping Cart";
    color: black;
    font-size: 50px;
    font-family: 'MDNichrome0.7';
    letter-spacing: 1px;
}
.cart-item-list-labels span {
    font-size: 20px !important;
    color: black;
}

My site is here: https://bamboo-icosahedron-37sw.squarespace.com/

 

 

Add to Design > Custom CSS

/* Cart page */
body#cart #page {
    background: #F7EFE7;
}
body#cart div#sqs-cart-root * {
    color: black !important;
}

Thank you, both! Final thing I'm struggling with here, why is the button and Item/Qty/Price not changing? I'd like the button to be black with #F7EFE7 text color, and the Item/Qty/Price to be black. Appreciate the help!

/* Cart page */
body#cart #page {
    background: #F7EFE7;
}
body#cart div#sqs-cart-root * {
    color: black !important;
}
.cart-title {
    visibility: hidden;
}
.cart-title:before {
    visibility: visible;
    content: "Shopping Cart";
    color: black;
    font-size: 50px;
    font-family: 'MDNichrome0.7';
    letter-spacing: 1px;
}
.cart-item-list-labels span {
    font-size: 25px !important;
    color: black;
}

body .checkout button._3yWY284uI {
  background: black;
    color: #F7EFE7; 
  font-family: 'MDNichrome0.7';
}

17 hours ago, AlishaK said:

Thank you, both! Final thing I'm struggling with here, why is the button and Item/Qty/Price not changing? I'd like the button to be black with #F7EFE7 text color, and the Item/Qty/Price to be black. Appreciate the help!

 

/* Cart page */
body#cart #page {
    background: #F7EFE7;
}
body#cart div#sqs-cart-root * {
    color: black !important;
}
.cart-title {
    visibility: hidden;
}
.cart-title:before {
    visibility: visible;
    content: "Shopping Cart";
    color: black;
    font-size: 50px;
    font-family: 'MDNichrome0.7';
    letter-spacing: 1px;
}
.cart-item-list-labels span {
    font-size: 25px !important;
    color: black;
}

body .checkout button._3yWY284uI {
  background: black;
    color: #F7EFE7; 
  font-family: 'MDNichrome0.7';
}

with butotn, try this code

.checkout-button * {
  background: black;
    color: #F7EFE7; 
  font-family: 'MDNichrome0.7';
}