Jump to content

Custom CSS Not Working on Shopping Cart Page

Recommended Posts

Site URL: https://nothing-matters.squarespace.com/

Hi,

I'm having 2 issues with my shopping cart page:

  1. I'm trying to add some custom CSS to style things like horizontal line color, 'item', 'quantity', 'price' fonts but none of it seems to be working.
  2. There is a default side bar that exists on this page but I do not see an option to turn it off (I'm using the Five theme on 7.0 - on most pages there is a settings section to make the content full width, but this page is less customizable). If need be, I'm fine with hiding it with custom CSS but I can't get that to work either.

Password: 1234

Thanks!

Screen Shot 2021-04-20 at 8.52.56 AM.png

Link to comment
  • Replies 12
  • Views 1.5k
  • Created
  • Last Reply

Hey Logang, try using this bit of CSS to remove the sidebar:

body.cart #sidebar-one-wrapper {
  display:none;
}

All the other items are a bit more complicated. It doesn't look like they're using a default class naming convention with random classnames. But these bits of CSS might do the trick:

/*Borders*/
body.cart .cart-container .qrq0lfTEB{
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

/*Label Fonts*/
body.cart .cart-item-list-labels {
  font-family: 'El Camino' !important;
}

 

Hey there, my name is Will and I help Squarespace designers and developers with my plugins, tutorials, and my Code Curious Membership
  
I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life  - I'm an expert in 2 of these. 

Youtube | Website

Link to comment

Hi Will, thanks very much for your reply.

Heres the thing - upon adding these bits of CSS, no changes were visible. I saved those bits in there anyways, opened an incognito window and re-logged into my squarespace account. The changes are now visible. But, when I try to add more changes (ie. make the borders a different color) nothing happens.. 

Any idea why this is happening?

Link to comment

@creedon, that would have been my first guess as well.  
 

@logang2, are you seeing the font label styles change? It’s possible there’s some weird specificity issue happening so you’d need the !important; tags on each value for it to work.

Hey there, my name is Will and I help Squarespace designers and developers with my plugins, tutorials, and my Code Curious Membership
  
I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life  - I'm an expert in 2 of these. 

Youtube | Website

Link to comment

@creedon Yes, I just clear cache, restarted machine and browser. Still no change..

@WillMyers No I am not seeing any changes and I am using the important tag..

I added font-color and font-size attributes hoping to see the changes happen, but still nothing.

/*Label Fonts*/
body.cart .cart-item-list-labels {
   font-family: 'El Camino' !important;
   font-color: #F8F1E6 !important;
   font-size: 2rem !important;
}

Any other ideas?

Link to comment
18 hours ago, logang2 said:

@creedon Yes, I just clear cache, restarted machine and browser. Still no change..

@WillMyers No I am not seeing any changes and I am using the important tag..

I added font-color and font-size attributes hoping to see the changes happen, but still nothing.

/*Label Fonts*/
body.cart .cart-item-list-labels {
   font-family: 'El Camino' !important;
   font-color: #F8F1E6 !important;
   font-size: 2rem !important;
}

Any other ideas?

Can you share link to a product?

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
On 4/22/2021 at 3:18 AM, logang2 said:

Hi Tuanphan,

Here is a product: https://nothing-matters.squarespace.com/clothing/test

Just wanted to reiterate that the page I'm having trouble with is the checkout page, so after you add a product to the cart and then see the total.

Hi. The url doesn't exist

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.