Jump to content

edit shopping cart page

By H0LLY, in Customize with code

Go to solution Solved by Lesum,

Recommended Posts

H0LLY Level 2

H0LLY

Posted
Posted

Hello excellent humans,

Can anyone please tell me how to fix the following issues?

Empty shopping cart page: 

1. Make the Continue Shopping text appear as a black button with all caps text that says: CONTINUE SHOPPING (same style as the other buttons on my website, see example below.

2. Change Shopping Cart title to all caps.

OMENEMPRTSHOPPINGCART.thumb.png.c66eff80b2a1d7edf77748f7b1072abe.png
Image29-8-2024at2_44pm.thumb.jpg.19b87312b1d3281323ac373c339aa133.jpg

Shopping cart page: 

1. Make the Checkout text appear as white text on a black button in all caps CHECKOUT (same style as the other button above).

2. Change the Shopping Cart title to all caps SHOPPING CART.
 

Many thanks.

OMENSHOPPINGCART.thumb.png.1c37285638952675455a5375840e66e0.png

Link to comment
  • Replies 4
  • Views 212
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Lesum
Lesum

@H0LLY Hi! You can add this code under Website > Pages > Website Tools > Custom CSS #cart .sqs-button-element--secondary.cart-continue-button { background: #000; color: #fff; o

Lesum
Lesum

@H0LLY Hi! You can add this to change the Subtotal text to all caps: #cart .cart-subtotal-label { text-transform: uppercase; }  

Posted Images

  • Solution
Lesum Level 9

Lesum

Posted
  • Solution
Posted

@H0LLY Hi! You can add this code under Website > Pages > Website Tools > Custom CSS 

#cart .sqs-button-element--secondary.cart-continue-button {
    background: #000;
    color: #fff;
    opacity: 1;
    text-transform: uppercase;
}

#cart h2.cart-title {
    text-transform: uppercase;
}

#cart .cart-checkout {
    display: flex !important;
    justify-content: flex-end;
    align-items: flex-end;
}

#cart .sqs-button-element--primary.cart-checkout-button {
    background: #000;
    color: #fff;
    text-transform: uppercase;
    width: 155px;
}

@media screen and (max-width: 767px) {
    #cart .cart-checkout {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer
☕ Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources