Jump to content

Shopping cart & Checkout page custom font style & size

Go to solution Solved by paul2009,

Recommended Posts

Site URL: http://essentialsbymhd.com

Hi,

Is there a way to add a custom font style & size to my shopping cart page (Title, product name, etc.) as well as my checkout page (Store logo size, custom font & sizes for the whole page) I tried to add a css found online but none of them works. I was able to custom my font style and size for almost everything on my website except these two pages. Please help me figure that out!

Thank you,

Natalie 

Checkout Page.PNG

Shopping Cart.PNG

Link to comment

You won't be able to change the checkout. All Squarespace checkouts must use Squarespace's own font - Clarkson. 

You can change the Cart page, but as Squarespace changed many of the classes on this page last week, most of the solutions you find online will be out of date. 

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
  • Solution

All you need to do is add an item to your cart, then you can right-click the cart page and choose View Source to view all the classes that are being used on the page. By looking through these you can identify the elements you want to change. For example, here's a snippet of what you'll see...

<h2 class="i7PYLD8MO cart-title">SHOPPING CART</h2>

<div class="tdHSD5wnk cart-item-list-labels">

<div class="tF9EGG_rQ item-desc">

<span class="variant-name">Color</span>

<div class="RgUdJr28R item-quantity">

So you should be able to change the cart title font, by adding the class name (cart-title) prefixed with a "." something like this:

.cart-title {
  font-family: proxima-nova !important;
}

where proxima nova is the font name. Note that you'll need to save your changes and then refresh the page each time to see your CSS working.

You can do this for more than one element by separating the names with commas like this to affect the cart title and the list labels:

.cart-title, .cart-item-list-labels {
  font-family: proxima-nova !important;
}

 

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
7 hours ago, Essentialsbymhd said:

Can you also teach me how to change the font size?

Add something like this before the final curly brace:

font-size: 1.3em;

 

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

Hi,

I don't know why but everything worked except my item title & checkout Button. Bellow is my css code, let me know what went wrong

.cart-title, .cart-item-list-labels, .item-desc, .variant-name, .item-quantity, .item-price, .vP_HqHxwY, .TPEfWzjos, .sqs-editable-button KD_Juh_j6 checkout-button, {
  font-size: 1em !important;
}

 

 

Capture.PNG

Link to comment

You had some syntax errors and incorrect selectors.

Try the following.

// alter cart, uses LESS syntax

#cart {

  .cart-item-list-labels,
  .cart-title,
  .item-desc a,
  .item-price,
  .item-quantity,
  .checkout-button,
  .variant-name,
  .vP_HqHxwY
  
    {
    
      font-size : 1em;
      
      }
      
  }

I'm using a little bit of LESS syntax to save on typing of #cart over and over again. Adding #cart makes sure that other parts of your site aren't unexpectedly altered.

After LESS processes the input it looks like the following.

#cart .cart-item-list-labels,
#cart .cart-title,
#cart .item-desc a,
#cart .item-price,
#cart .item-quantity,
#cart .checkout-button,
#cart .variant-name,
#cart .vP_HqHxwY {
  font-size: 1em;
}

Let us know how it goes.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 year later...

Hello everyone, I have been trying to change the font and design of my shopping cart and checkout page but it doesn't work. I found this thread and try to follow your instructions but when I right click "view source" doesn't come up? Would appreciate some help!

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.