Jump to content

[Share] Cart Page: CSS ID

Recommended Posts

Cart Page ID List

Shopping Cart Title: h2.cart-title

Product Thumbnail

  • .cart-row-img
  • OR
  • .cart-row-img-wrapper

Product Name: a.cart-row-title

Variant: p.cart-row-variant

If you have 2 variants, it will be

  • p.cart-row-variant:nth-child(1)
  • p.cart-row-variant:nth-child(2)

image.png.12e85b8601f6a54344d4f5e291cd4e41.png

Quantity: input.cart-row-qty-input

  • Minus: button.cart-row-qty-desc
  • Plus: button.cart-row-qty-inc

image.png.21ad58e79df95a8e98ff4853799d8504.png

Price: p.cart-row-price

Remove Icon: button.cart-row-remove

image.png.fa2e2891bdf170fab10bf01e5cade9c8.png

Subtotal text

  • p.cart-subtotal-label
  • OR
  • p.cart-subtotal-label span

Subtotal price: p.cart-subtotal-price

Checkout button: button.cart-checkout-button

Text "You have nothing in your shopping cart."

  • p.empty-message

Continue Shopping Button: a.cart-continue-button

image.png.e497670e24c8519792ee221d05b54b54.png

Whole Cart Page: body#cart

Cart Page Header: body#cart header#header

Cart Page Logo: body#cart header#header img

Cart Page Menu Items

  • Desktop: body#cart div.header-nav-item>a
  • Mobile: body#cart div.header-menu-nav-item a

Cart Page Header Button: body#cart header#header a.btn

Cart Page Burger Icon

  • Burger Icon: body#cart:not(.header--menu-open) div.burger-inner>div
  • X close icon: body#cart.header--menu-open div.burger-inner>div

Cart Page Footer: body#cart footer.sections

If you have any problems, you can comment below.

 

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
  • Replies 0
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

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.