ShuiFeng Posted May 24, 2022 Share Posted May 24, 2022 Site URL: https://whale-apple-c5y9.squarespace.com/ I'm trying to place a "Checkout Now" button next to the "Add to cart" button on my product pages but nothing I've been able to find works. The "Checkout Now" button was added as a button block in the Additional Info field of the product. Would somebody mind helping me with this please? Thanks in advance Page with example: https://whale-apple-c5y9.squarespace.com/shop/p/intentional-candle-ceremony Password: ShuiFeng Link to comment
tuanphan Posted May 24, 2022 Share Posted May 24, 2022 Add to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('section.ProductItem-additional .button-block').appendTo('.ProductItem-details .sqs-add-to-cart-button-wrapper'); }); </script> 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
ShuiFeng Posted May 24, 2022 Author Share Posted May 24, 2022 Thanks so much for your response tuanphan! I've been reading the forums and your answers have always been useful, thanks for the time you put into this. The Checkout Now button is now below the Add to Cart button as opposed to next to it. Did I do something incorrectly? Thanks. Link to comment
ShuiFeng Posted May 25, 2022 Author Share Posted May 25, 2022 I found out one of the errors - the closing bracket for the first <script> was missing. I replaced it and now it doesn't work at all, the checkout button is still centered at bottom. Link to comment
tuanphan Posted May 25, 2022 Share Posted May 25, 2022 3 hours ago, ShuiFeng said: I found out one of the errors - the closing bracket for the first <script> was missing. I replaced it and now it doesn't work at all, the checkout button is still centered at bottom. You edited some symbol make it invalid Remove code You added, then I will check & give new code 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
ShuiFeng Posted May 25, 2022 Author Share Posted May 25, 2022 (edited) Thanks Tuan. I removed any additional code from the site, screenshots attached. The Checkout Now button is now below the Add To Cart button and moves with it on the page except it's not next to it. I also changed the internal squarespace domain to https://shuifeng.squarespace.com/ with the same password: ShuiFeng Edited May 26, 2022 by ShuiFeng Link to comment
ShuiFeng Posted May 26, 2022 Author Share Posted May 26, 2022 (edited) OK. I've moved the button(s) up above the product description and below the price as the description became too long. Will this impact how we're going to move the Checkout Now button? Thanks. I also changed the internal squarespace domain to https://shuifeng.squarespace.com/ with the same password: ShuiFeng Edited May 26, 2022 by ShuiFeng Link to comment
tuanphan Posted May 27, 2022 Share Posted May 27, 2022 To make 2 buttons side by side, add this to Code Injection > Header <style> .ProductItem-details .sqs-add-to-cart-button-wrapper { display: flex; align-items: center; justify-content: space-between; } @media screen and (max-width:767px) { .ProductItem-details .sqs-add-to-cart-button-wrapper { width: 100%; } } </style> 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
ShuiFeng Posted May 27, 2022 Author Share Posted May 27, 2022 Awesome, it worked! Unfortunately now when I click the Add To Cart/Purchase button both buttons squish together. Is there a way to resolve that? I've tried setting a fixed width for Add To Cart/Purchase button but that doesn't resolve the issue. It's as if the Add To Cart/Purchase button shrinks on action? Thanks for your help w.this. Fixed Width Add To Cart button: .sqs-add-to-cart-button { width: 155px !important; Link to comment
tuanphan Posted May 29, 2022 Share Posted May 29, 2022 On 5/28/2022 at 2:04 AM, ShuiFeng said: Awesome, it worked! Unfortunately now when I click the Add To Cart/Purchase button both buttons squish together. Is there a way to resolve that? I've tried setting a fixed width for Add To Cart/Purchase button but that doesn't resolve the issue. It's as if the Add To Cart/Purchase button shrinks on action? Thanks for your help w.this. Fixed Width Add To Cart button: .sqs-add-to-cart-button { width: 155px !important; You mean add a space between 2 buttons?? 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
ShuiFeng Posted May 29, 2022 Author Share Posted May 29, 2022 (edited) Yeah, a space between the buttons that stays a specific width. Picture #1 is how it looks when the page first loads which is how I want the buttons to look. Picture #2 is how it looks after I click the Add To Cart button - the buttons squish together on action for some reason? Picture #3 is what it looks like on mobile - the space between buttons is huge but when I click the Add To Cart button on mobile, the huge space disappears and the buttons squish together again (Picture #4) Thanks. EDIT: I got it, thanks! I had to change jutify-content to normal and add a right margin. justify-content: normal; margin-right: 10px; How do I replicate these buttons in Product Boxes also? Edited May 30, 2022 by ShuiFeng Link to comment
tuanphan Posted June 1, 2022 Share Posted June 1, 2022 On 5/30/2022 at 2:57 AM, ShuiFeng said: Yeah, a space between the buttons that stays a specific width. Picture #1 is how it looks when the page first loads which is how I want the buttons to look. Picture #2 is how it looks after I click the Add To Cart button - the buttons squish together on action for some reason? Picture #3 is what it looks like on mobile - the space between buttons is huge but when I click the Add To Cart button on mobile, the huge space disappears and the buttons squish together again (Picture #4) Thanks. EDIT: I got it, thanks! I had to change jutify-content to normal and add a right margin. justify-content: normal; margin-right: 10px; How do I replicate these buttons in Product Boxes also? "How do I replicate these buttons in Product Boxes also?" >> What do you mean? 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
ShuiFeng Posted June 1, 2022 Author Share Posted June 1, 2022 (edited) Sorry, I should have said Product Blocks. Within Product Blocks I need to add a Checkout button next to the Add To Cart button just like we did here for the Product Pages. The Product Blocks are on the page linked below:https://shuifeng.squarespace.com/classes Password: ShuiFeng (the checkout button that's there now is copy/pasted into the image) Edited June 1, 2022 by ShuiFeng Link to comment
tuanphan Posted June 2, 2022 Share Posted June 2, 2022 On 6/1/2022 at 10:25 AM, ShuiFeng said: Sorry, I should have said Product Blocks. Within Product Blocks I need to add a Checkout button next to the Add To Cart button just like we did here for the Product Pages. The Product Blocks are on the page linked below:https://shuifeng.squarespace.com/classes Password: ShuiFeng (the checkout button that's there now is copy/pasted into the image) Can you add a text link on top of excerpt text? Then we will give code to turn it to button & move its position 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
ShuiFeng Posted June 2, 2022 Author Share Posted June 2, 2022 (edited) Sure. When you say Excerpt text do you mean the Description section (red arrow in screenshot) or the Additional Info section (in yellow)? I've created a Checkout link in both just in case and will remove the unused one. Edited June 3, 2022 by ShuiFeng Link to comment
tuanphan Posted June 3, 2022 Share Posted June 3, 2022 13 hours ago, ShuiFeng said: Sure. When you say Excerpt text do you mean the Description section (red arrow in screenshot) or the Additional Info section (in yellow)? I've created a Checkout link in both just in case and will remove the unused one. Add to Last Line in Code Injection > Footer <script> $(document).ready(function() { $('.product-block').each(function(i, e) { $('.product-excerpt a').appendTo('.sqs-add-to-cart-button-wrapper'); }) }); </script> <style> div.sqs-add-to-cart-button + a + a { display: none; } div.sqs-add-to-cart-button + a { font-family: kepler-std; font-weight: 400 !important; font-style: normal; text-transform: none; color: #fff; background-color: #316684; border-color: #fff; border-radius: .4rem; width: 155px !important; min-width: 155px !important; margin-right: 5px; box-shadow: 1px 2px 10px 4px rgb(0 0 0 / 50%); display: inline-block; text-align: center; padding: .8em 1em; } </style> 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
ShuiFeng Posted June 3, 2022 Author Share Posted June 3, 2022 (edited) Aaaha!, it works beautifully for the Product Blocks! Thank you! Except I'm left with a text based checkout link on the Product Page at the top of the item description. Is there a way to hide it or remove it? Thanks EDIT: This is located on the Product Page for "What The Feng Do I Do With All This Shui?" https://shuifeng.squarespace.com/shop/p/what-the-feng Edited June 4, 2022 by ShuiFeng Link to comment
tuanphan Posted June 10, 2022 Share Posted June 10, 2022 On 6/4/2022 at 3:29 AM, ShuiFeng said: Aaaha!, it works beautifully for the Product Blocks! Thank you! Except I'm left with a text based checkout link on the Product Page at the top of the item description. Is there a way to hide it or remove it? Thanks EDIT: This is located on the Product Page for "What The Feng Do I Do With All This Shui?" https://shuifeng.squarespace.com/shop/p/what-the-feng It looks like you solved this? 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
ShuiFeng Posted June 15, 2022 Author Share Posted June 15, 2022 Yeah, thanks Tuan. I really appreciate all your help with this. 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