mars2 Posted November 16, 2020 Share Posted November 16, 2020 (edited) Site URL: https://lilamethyst.com/ Good morning- I was hoping to get help with my Checkout button on the shopping cart page of my website. I tried a few codes I found here on the forums but I've been having trouble getting it to look right. I would like to use the same button (font, background color, shape) seen here on this page. My website's password is 'mango'. Thanks so much in advanced for your help and time! Edited November 16, 2020 by megan222 spelling correction Link to comment
IXStudio Posted November 16, 2020 Share Posted November 16, 2020 Hi Use this code in Design -> Custom CSS .CartFooter-checkout-28MW2 button.sqs-editable-button { background-color: #db29ff !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; color: #fff !important; -webkit-backface-visibility: hidden !important; -webkit-transition: .1s opacity linear !important; -moz-transition: .1s opacity linear !important; -ms-transition: .1s opacity linear !ii; transition: .1s opacity linear !important; padding: 13px 26px !important; font-family: synthemesc !important; font-weight: 400 !important; font-style: normal !important; font-size: 39px !important; letter-spacing: .1em !important; text-transform: uppercase !IMPORTANT; line-height: normal !important; } Please use the like button if it helps you! Best, Leopold Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
paul2009 Posted November 16, 2020 Share Posted November 16, 2020 55 minutes ago, megan222 said: I would like to use the same button (font, background color, shape) seen here on this page. Your site is password protected, so I couldn't see the specific button you were referring to without knowing the password. However, as I posted here, you can use CSS to change the button's styling. If you add the template below to Design > Custom CSS you can then add settings within the curly braces to decide the font-size, color, and so on: body .checkout button.CheckoutButton-checkoutButton-3yWY2 { } body .checkout button.CheckoutButton-checkoutButton-3yWY2:hover { } For example: color: black; background-color: red; font-size: 14px; The first selector determines the styles for the button at rest. The second selector determines the styles for the button when the user hovers over it, allowing you to change the background-color or opacity. Bear in mind that you will need to save the CSS and then refresh the cart page before you will see any visible changes. Do reach out if you need more guidance 🙂 creedon 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
mars2 Posted November 17, 2020 Author Share Posted November 17, 2020 12 hours ago, paul2009 said: Your site is password protected, so I couldn't see the specific button you were referring to without knowing the password. However, as I posted here, you can use CSS to change the button's styling. If you add the template below to Design > Custom CSS you can then add settings within the curly braces to decide the font-size, color, and so on: body .checkout button.CheckoutButton-checkoutButton-3yWY2 { } body .checkout button.CheckoutButton-checkoutButton-3yWY2:hover { } For example: color: black; background-color: red; font-size: 14px; The first selector determines the styles for the button at rest. The second selector determines the styles for the button when the user hovers over it, allowing you to change the background-color or opacity. Bear in mind that you will need to save the CSS and then refresh the cart page before you will see any visible changes. Do reach out if you need more guidance 🙂 Thank you so much Paul!!! Link to comment
mars2 Posted November 17, 2020 Author Share Posted November 17, 2020 13 hours ago, IXStudio said: Hi Use this code in Design -> Custom CSS .CartFooter-checkout-28MW2 button.sqs-editable-button { background-color: #db29ff !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; color: #fff !important; -webkit-backface-visibility: hidden !important; -webkit-transition: .1s opacity linear !important; -moz-transition: .1s opacity linear !important; -ms-transition: .1s opacity linear !ii; transition: .1s opacity linear !important; padding: 13px 26px !important; font-family: synthemesc !important; font-weight: 400 !important; font-style: normal !important; font-size: 39px !important; letter-spacing: .1em !important; text-transform: uppercase !IMPORTANT; line-height: normal !important; } Please use the like button if it helps you! Best, Leopold HI Leopold- This worked like a charm and my button is exactly how I wanted. Thank you so much for your help and time! IXStudio 1 Link to comment
mars2 Posted November 17, 2020 Author Share Posted November 17, 2020 (edited) @paul2009 @IXStudio Also, is there any way I can adjust the font and size of the text on the shopping cart page? my site password is 'mango' 🙂 Edited November 17, 2020 by megan222 spelling correction Link to comment
creedon Posted November 17, 2020 Share Posted November 17, 2020 16 minutes ago, megan222 said: Also, is there any way I can adjust the font and size of the text on the shopping cart page? Yes. If you could tell us which elements you want to change and how you want to change them we can help. Which font families do you want to use and with which items? What font sizes do you want to use and with which items? Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
mars2 Posted November 17, 2020 Author Share Posted November 17, 2020 (edited) 44 minutes ago, creedon said: Yes. If you could tell us which elements you want to change and how you want to change them we can help. Which font families do you want to use and with which items? What font sizes do you want to use and with which items? Hi Thomas! I would like to change "Shopping Cart" and the text of the product names to the font Synthemesc in size 45px, all uppercase. I would also like to change "item", "quantity", and "price" to the font Chicle in size 32px, all lowercase. For the price, quantity number, and subtotal price I was hoping to change it to the font Spicy Rice in size 30px. Thanks for reading and for your time!! Edited November 17, 2020 by ana3000 uppercase/lowercase Link to comment
Solution creedon Posted November 17, 2020 Solution Share Posted November 17, 2020 Add the following to Design > Custom CSS. /* begin modify cart appearance */ .CartHeader-cartTitle-9Dk3d.cart-title, .CartTableRow-itemTitle-1MDgZ a { font-size: 43px; } .CartTable-itemLabel-3zzV1, .CartTable-subtotalLabel-3qWE9 { font-size: 32px; } .CartTableRow-itemPrice-26eXS, .CartTable-subtotalPrice-2JFeD { color: #bf0; font-family: 'Spicy Rice'; font-size: 44px; } /* end modify cart appearance */ Thank you for the detailed description of what you wanted. It made it much easier to hopefully implement the effect you want to achieve! 🙂 Let us know how it goes. IXStudio 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
mars2 Posted November 17, 2020 Author Share Posted November 17, 2020 (edited) 21 minutes ago, creedon said: Add the following to Design > Custom CSS. /* begin modify cart appearance */ .CartHeader-cartTitle-9Dk3d.cart-title, .CartTableRow-itemTitle-1MDgZ a { font-size: 43px; } .CartTable-itemLabel-3zzV1, .CartTable-subtotalLabel-3qWE9 { font-size: 32px; } .CartTableRow-itemPrice-26eXS, .CartTable-subtotalPrice-2JFeD { color: #bf0; font-family: 'Spicy Rice'; font-size: 44px; } /* end modify cart appearance */ Thank you for the detailed description of what you wanted. It made it much easier to hopefully implement the effect you want to achieve! 🙂 Let us know how it goes. This was PERFECT! Wow, you rock! Would it be possible to get the code to modify the size of the product name on this page as well? In my case, the text that says "happy place print". You made this super easy and I will have no trouble adjusting these codes in the future. Thanks again! Edited November 17, 2020 by ana3000 wrong photo creedon 1 Link to comment
creedon Posted November 17, 2020 Share Posted November 17, 2020 Add the following to Store Settings > Advanced > Page Header Code Injection for your store page. <style> .ProductItem-details h1.ProductItem-details-title { font-size: 60px; } </style> Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
mars2 Posted November 17, 2020 Author Share Posted November 17, 2020 14 minutes ago, creedon said: Add the following to Store Settings > Advanced > Page Header Code Injection for your store page. <style> .ProductItem-details h1.ProductItem-details-title { font-size: 60px; } </style> Let us know how it goes. Sorry, this one didn't seem to work! I am referring to the Product Name on the shopping cart page 🙂 Like how this code helped e change the item and subtotal price font styles. Thank you! .CartTableRow-itemPrice-26eXS, .CartTable-subtotalPrice-2JFeD Link to comment
creedon Posted November 17, 2020 Share Posted November 17, 2020 7 minutes ago, ana3000 said: I am referring to the Product Name on the shopping cart page My bad. I already provided selector for that, if I understand correctly, for the cart. It is... Quote ,CartTableRow-itemTitle-1MDgZ a If you need to control that separately from ..CartHeader-cartTitle-9Dk3d.cart-title let us know. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
mars2 Posted November 17, 2020 Author Share Posted November 17, 2020 1 hour ago, creedon said: My bad. I already provided selector for that, if I understand correctly, for the cart. It is... If you need to control that separately from ..CartHeader-cartTitle-9Dk3d.cart-title let us know. Ah, got it! My apologies! I was able to make a code to control it separately. Thanks so much for all of your help with my website! You are appreciated! creedon 1 Link to comment
Guest Posted February 10, 2022 Share Posted February 10, 2022 Hi I am looking for a help. I see some of you got some codes. I need to change CHECKOUT button into my language MAKSMA Also is there a possibility to change words like ITEM, QUANTITY, PRICE, SUBTOTAL? My head is exploding as I am no coder and new to all this but trying to make it work. Many thanks if someone could help! Link to comment
tuanphan Posted February 14, 2022 Share Posted February 14, 2022 On 2/10/2022 at 3:02 PM, missandei said: Hi I am looking for a help. I see some of you got some codes. I need to change CHECKOUT button into my language MAKSMA Also is there a possibility to change words like ITEM, QUANTITY, PRICE, SUBTOTAL? My head is exploding as I am no coder and new to all this but trying to make it work. Many thanks if someone could help! Add to Design > Custom CSS /* Shopping Cart Title */ .cart-title { visibility: hidden; } .cart-title:before { visibility: visible; content: "New Shopping Cart"; text-transform: capitalize; } /* Item */ .cart-item-list-labels>span:first-child span { visibility: hidden; } .cart-item-list-labels>span:first-child span { content: "New Item"; visibility: visible; } /* Quantity */ .cart-item-list-labels>div:nth-child(4) span span { visibility: hidden; font-size: 0; } .cart-item-list-labels>div:nth-child(4) span span:before { visibility: visible; content: "New quantity"; font-size: 12px; } /* price */ .cart-item-list-labels>div:nth-child(5) span span { visibility: hidden; } .cart-item-list-labels>div:nth-child(5) span span:after { visibility: visible; content: "new price"; } /* Subtotal */ ._2nJjmtuOe span span { visibility: hidden; } ._2nJjmtuOe span span:after { visibility: visible; content: "New Subtotal:"; } /* checkout */ .checkout-button span { visibility: hidden; font-size: 0; } .checkout-button span:before { visibility: visible; content: "Checkout"; font-size: 14px; } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment