Jump to content

Custom code for cart icon no longer working!

Recommended Posts

Hello,

As of recently, the CSS I was using to replace the cart icon with a custom image stopped working. I've found some updated code online, but it isn't working as it was before. I'd like to position the number of items in the cart next to the cart icon, not on top of it. I'd also like to be able to position the icon on the page differently for mobile than desktop. Thanks for any help anyone can provide. Also, I'd love to know why the code I've been using for the past year stopped working out of the blue.

Link to comment
  • Replies 3
  • Views 280
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 1/18/2023 at 9:09 PM, tuanphan said:

Hi,

Which code & What is your site url?

The site is lewisrossignolart.com. I've already replaced the code and it works most of the way. But I can't figure out how to display the number of items in the cart **next to** the cart icon. And I need to reposition the cart on mobile. It doesn't matter much where it appears on desktop, but I'd like to horizontally align it with the burger menu icon on mobile. Thanks so much. Here it the code I'm currently using:

 

/*custom cart icon*/
.header-actions-action.header-actions-action--cart svg,
.header-actions-action.header-actions-action--cart .icon-cart-quantity {
  display: none !important;
}

.header-actions-action.header-actions-action--cart a {
    display:block;
    width: 32px;
    height: 80px;
    background-size: 32px 32px;
  background-image: url(https://static1.squarespace.com/static/61c22944e0aaed7bd8f066c3/t/620d5b4b335ff0014b413dd9/1645042507602/cart.png); background-size: contain;
background-repeat: no-repeat;
}

Link to comment
On 1/30/2023 at 5:52 PM, dross said:

The site is lewisrossignolart.com. I've already replaced the code and it works most of the way. But I can't figure out how to display the number of items in the cart **next to** the cart icon. And I need to reposition the cart on mobile. It doesn't matter much where it appears on desktop, but I'd like to horizontally align it with the burger menu icon on mobile. Thanks so much. Here it the code I'm currently using:

 

/*custom cart icon*/
.header-actions-action.header-actions-action--cart svg,
.header-actions-action.header-actions-action--cart .icon-cart-quantity {
  display: none !important;
}

.header-actions-action.header-actions-action--cart a {
    display:block;
    width: 32px;
    height: 80px;
    background-size: 32px 32px;
  background-image: url(https://static1.squarespace.com/static/61c22944e0aaed7bd8f066c3/t/620d5b4b335ff0014b413dd9/1645042507602/cart.png); background-size: contain;
background-repeat: no-repeat;
}

#1. Add to Design > Custom CSS

.header-actions-action.header-actions-action--cart .icon-cart-quantity {
    display: block !important;
    position: relative;
    right: -30px;
    top: -10px;
    font-size: 30px;
}

#2. I see you solved?

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

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.