crisisandcreativity Posted March 13, 2022 Share Posted March 13, 2022 Site URL: https://elk-drum-5kzr.squarespace.com/ Hi all, I'd like to move my 'add to cart' button to be right-aligned with my site. I've also added some custom CSS to change the look of the button, and some of that goes away once you click on it and it does it's animation to show "added to cart". I'd like to remove the animation so it just says 'added to cart' once you click it, and keep all the styling of how it looks before you click it. And of course, move it to the right. Site:https://elk-drum-5kzr.squarespace.com/ pw: livingthedream But I'm hoping to change the domain and make it live tomorrow morning. If I don't hear back before then I can post the new link. Thank you! Marissa Link to comment
tuanphan Posted March 14, 2022 Share Posted March 14, 2022 Try adding to Design > Custom CSS .pdp-layout .pdp-details .sqs-add-to-cart-button-wrapper { float: right; } crisisandcreativity 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
crisisandcreativity Posted March 14, 2022 Author Share Posted March 14, 2022 Thank you! When you click on 'add to cart' it does a goofy animation where it says 'adding...' and then changes to "added to cart". When it does this it loses the custom css I added to the original button which is this: /*Add to cart: Remove button padding*/ .sqs-add-to-cart-button { padding: 0px !important; min-height: 35px !important; letter-spacing: 0em !important; } /*Add to cart: Button hover styling*/ .sqs-add-to-cart-button:hover { opacity: 1 !important; border-bottom: 4px dotted !important; color: #100FOF !important; } I'd like to remove the animation so it just says 'added to cart' once you click it, and keep all the styling of how it looks before you click it. Link to comment
tuanphan Posted March 15, 2022 Share Posted March 15, 2022 Try adding this code .sqs-add-to-cart-button-inner { border-bottom: 4px solid black; } .sqs-add-to-cart-button-inner:hover { border-bottom-style: dotted; } .pdp-layout .pdp-details .sqs-add-to-cart-button { border: none !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
crisisandcreativity Posted March 15, 2022 Author Share Posted March 15, 2022 Wonderful, thank you! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment