bphillips71 Posted March 9, 2022 Share Posted March 9, 2022 Site URL: https://www.inhisimageartistry.com/cart Hello! I'd like some help editing the look of the shopping cart page in my site. I'd like to be able to change the background color of the page and edit the color of the checkout button as well as the font on the checkout button. I'd also like to be able to edit the color of the font for the words "item, quantity, etc." Can anyone please help? Link to comment
Jia Posted March 9, 2022 Share Posted March 9, 2022 27 minutes ago, bphillips71 said: Site URL: https://www.inhisimageartistry.com/cart Hello! I'd like some help editing the look of the shopping cart page in my site. I'd like to be able to change the background color of the page and edit the color of the checkout button as well as the font on the checkout button. I'd also like to be able to edit the color of the font for the words "item, quantity, etc." Can anyone please help? Hi, just add these codes to custom css (Design > Custom CSS). You didn't mention the colours and font you want to change them to, so in the codes below, just add your hex code and font name where it says so. Let me know if you need help with that 🙂 Code for checkout button: .checkout-button { background-color:#HEX; color:#HEX; font-family:'insert font name between the apostrophes'; } Code for the page's background colour: #cart background-color:#HEX; } Code to edit the colours of "item, quantity, price": .cart-item-list-labels { color:#HEX; } CassAggett 1 Please give this a 👍 if it helps www.sevenstars.studiowww.instagram.com/sevenstars.studio Link to comment
bphillips71 Posted March 10, 2022 Author Share Posted March 10, 2022 On 3/9/2022 at 7:55 AM, Jia said: Hi, just add these codes to custom css (Design > Custom CSS). You didn't mention the colours and font you want to change them to, so in the codes below, just add your hex code and font name where it says so. Let me know if you need help with that 🙂 Code for checkout button: .checkout-button { background-color:#HEX; color:#HEX; font-family:'insert font name between the apostrophes'; } Code for the page's background colour: #cart background-color:#HEX; } Code to edit the colours of "item, quantity, price": .cart-item-list-labels { color:#HEX; } Hi! Thanks for getting back to me. I tried to implement those changes and nothing changed for me. Is there something I'm doing wrong? Link to comment
Jia Posted March 11, 2022 Share Posted March 11, 2022 9 hours ago, bphillips71 said: Hi! Thanks for getting back to me. I tried to implement those changes and nothing changed for me. Is there something I'm doing wrong? Hi, I noticed that on the last code, you didn't change the #HEX with a hex code and that could break the code. Do replace it with your hex code, but other than that, the checkout button and page background colour have changed on my end. Please give this a 👍 if it helps www.sevenstars.studiowww.instagram.com/sevenstars.studio Link to comment
bphillips71 Posted March 11, 2022 Author Share Posted March 11, 2022 13 hours ago, Jia said: Hi, I noticed that on the last code, you didn't change the #HEX with a hex code and that could break the code. Do replace it with your hex code, but other than that, the checkout button and page background colour have changed on my end. Thank you! It seems to have updated on my end when I revisited the page. One last question though. Do you suppose there's any way I can update the weight and size of the font for the ".cart-item-list-labels" and the adjust the padding & font size of the checkout button? Link to comment
Jia Posted March 12, 2022 Share Posted March 12, 2022 6 hours ago, bphillips71 said: Thank you! It seems to have updated on my end when I revisited the page. One last question though. Do you suppose there's any way I can update the weight and size of the font for the ".cart-item-list-labels" and the adjust the padding & font size of the checkout button? Here are the codes, just change the values to what you prefer. To change the font weight and size for the 'item, qty, price': ._K32yoEnv { font-size: 12px; font-weight:bold; } To change how the product name is styled: .ZlqJl1uBV { font-size:15px; font-weight:bold; } Adjust the padding and font size of the checkout button: .checkout-button { padding: 50px !important; font-weight: bold !important; } Please give this a 👍 if it helps www.sevenstars.studiowww.instagram.com/sevenstars.studio Link to comment
creedon Posted March 12, 2022 Share Posted March 12, 2022 (edited) One thing to note about the dynamic class names ( _K32yoEnv and ZlqJl1uBV ) SS is using is that they can change without warning and the effect will break. SS has been changing the dynamic class about once a month for the last several months. Edited March 12, 2022 by creedon Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Jia Posted March 15, 2022 Share Posted March 15, 2022 @creedon Thanks for the reminder! @bphillips71 you can replace those codes with the following: Product names: .item-desc a { font-size:15px; font-weight:bold; } Cart item list labels .cart-item-list-labels { font-weight: bold; font-size: 11px !important; } CassAggett 1 Please give this a 👍 if it helps www.sevenstars.studiowww.instagram.com/sevenstars.studio Link to comment
molliehiggi Posted November 21, 2022 Share Posted November 21, 2022 hi guys when my customers click 'checkout' i want a lightbox to appear with upsell items, i have the code for the lightbox for upsell but i dont know how to make it appear when they click check out Link to comment
tuanphan Posted November 23, 2022 Share Posted November 23, 2022 On 11/21/2022 at 4:23 PM, molliehiggi said: hi guys when my customers click 'checkout' i want a lightbox to appear with upsell items, i have the code for the lightbox for upsell but i dont know how to make it appear when they click check out Hi, See this answer 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
Rudybro Posted November 27, 2022 Share Posted November 27, 2022 (edited) Hello - on an empty checkout page, a random black box appears that I can't get rid of. See attached. Is there a way to change that "continue shopping" button so it looks like the rest of the buttons on the website? Also - how am I able to change the background color of the checkout page? https://silver-hyperboloid-kt5p.squarespace.com/config/ Edited November 27, 2022 by Rudybro Link to comment
tuanphan Posted December 2, 2022 Share Posted December 2, 2022 On 11/28/2022 at 6:19 AM, Rudybro said: Hello - on an empty checkout page, a random black box appears that I can't get rid of. See attached. Is there a way to change that "continue shopping" button so it looks like the rest of the buttons on the website? Also - how am I able to change the background color of the checkout page? https://silver-hyperboloid-kt5p.squarespace.com/config/ #1. Did you solve? #2. To change button style, add this to Design > Custom CSS button[onclick="goBack()"] { background-color: transparent !important; padding: 10px 20px; } #3. You mean Cart Page /cart or Checkout page /checkout? 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
Rudybro Posted December 2, 2022 Share Posted December 2, 2022 #1) No it still exists. #2) thank you #3) I figured it out thank you. Link to comment
ygarbers Posted January 20 Share Posted January 20 On 11/23/2022 at 6:58 PM, tuanphan said: Hi, See this answer Howdy I've impemented a redirect page using said script ^ and it works really well the only issue is i have a custom form on my product that pops up after you click add to cart now it flashes on the screen before redirecting to the upsell page This form is important as its an "i agree to the terms and conditions" https://lilithdesigns.com/store/p/atra-pendant the password is 64lilith Link to comment
creedon Posted January 20 Share Posted January 20 2 hours ago, ygarbers said: the only issue is i have a custom form on my product that pops up after you click add to cart I suspect product forms were not an anticipated use case for the redirect code. You can always try contacting the code author to see if they can update their code. I'm unaware of any add to cart button redirect code that takes product forms into account. However it may be possible to do so using MutationObserver, a way to watch for certain conditions. MO's are not easy to implement. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! 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