Jump to content

Changing Colour & Font on Shopping Cart Page

Recommended Posts

I'm having a few different issues customizing my shopping cart page, specifically the following:

- changing the background colour

- changing the "checkout" button colour

- changing the product, quantity and price font

- adding a "continue shopping" button

Any help would be greatly appreciated as I have read countless forum posts and still can't find an answer that works.

Link to comment
8 hours ago, xosarahdesigns said:

I'm having a few different issues customizing my shopping cart page, specifically the following:

- changing the background colour

- changing the "checkout" button colour

- changing the product, quantity and price font

- adding a "continue shopping" button

Any help would be greatly appreciated as I have read countless forum posts and still can't find an answer that works.

Hi, it's best if you share the website link (and password) so I can look into it

Please give this a 👍 if it helps

Link to comment
9 hours ago, xosarahdesigns said:

I was able to change the colour of the background and the checkout button.  Now all I need to fix is the product, quantity and price font to my custom font and add the continue shopping button.

Here are the following codes you're looking for. 

Product name:

.cart-row-desc {
  font-family:’Font Name’;
}

Qty:

.cart-row-qty {
  font-family:’Font Name’;
}

Price:

.cart-row-price {
  font-family:’Font Name’;
}

Please give this a 👍 if it helps

Link to comment
46 minutes ago, Jia said:

Here are the following codes you're looking for. 

Product name:

.cart-row-desc {
  font-family:’Font Name’;
}

Qty:

.cart-row-qty {
  font-family:’Font Name’;
}

Price:

.cart-row-price {
  font-family:’Font Name’;
}

Unfortunately it didn't work.  I tried refreshing and closing the screen and it didn't change.

Link to comment
On 11/16/2022 at 12:42 AM, xosarahdesigns said:

Unfortunately it didn't work.  I tried refreshing and closing the screen and it didn't change.

Try this then:

// product name //

.css-b3eyut {
  font-family:'Font Name';
}

// qty //

.css-1te16u1 {
  font-family:'Font Name';
}

// price //
.css-1jp19h {
  font-family:'Font Name';
}

Let me know how it goes 🙂

Please give this a 👍 if it helps

Link to comment
39 minutes ago, Jia said:

Try this then:

// product name //

.css-b3eyut {
  font-family:'Font Name';
}

These selectors (prefixed with css) are dynamic and shouldn’t be used. They will change regularly, breaking your changes. The original selectors in the earlier post should be used, but with ‘!important’ rule.  

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment
6 hours ago, paul2009 said:

These selectors (prefixed with css) are dynamic and shouldn’t be used. They will change regularly, breaking your changes. The original selectors in the earlier post should be used, but with ‘!important’ rule.  

Would you be able to give me the whole code including '!important'?  I've tried everything and nothing seems to be working.

Link to comment
12 minutes ago, xosarahdesigns said:

Would you be able to give me the whole code including '!important'?

.cart-row-title, .cart-row-qty, .cart-row-price, .cart-subtotal {
  font-family: Seasons!important;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment
3 minutes ago, paul2009 said:
.cart-row-title, .cart-row-qty, .cart-row-price, .cart-subtotal {
  font-family: Seasons!important;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

It worked!!  Thank you SO much!  I was wondering if you'd be able to help me also change the font size of the shopping cart title?  As well as the font and price size on individual product listings?

Link to comment
21 hours ago, xosarahdesigns said:

It worked!!  Thank you SO much!  I was wondering if you'd be able to help me also change the font size of the shopping cart title?  As well as the font and price size on individual product listings?

Here's the code for that. Change the number to the value you prefer.

.cart-title {
  font-size: 40px;
}

Please give this a 👍 if it helps

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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