creedon Posted March 22, 2022 Share Posted March 22, 2022 (edited) 1 hour ago, jeaninewilson said: Is there a way to move the quantity and add to cart button below the additional product description? You can't move the existing quantity and perhaps the add to cart button as it breaks the functionality of the product detail page. You can however use a product block and add one referencing the current product you are viewing. Then with some CSS hide the original quantity and add to cart. Leaving the product block. Do you think that would work for your need? Edited March 22, 2022 by creedon 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
Guest Posted April 16, 2022 Share Posted April 16, 2022 Hello, I have the same request: move the "add to cart" button above the description site-wide. @creedon can you lend a hand? I've tried a few different things with no success. website: https://www.shoppemberley.com/shop/p/smoke-across-the-highlands-by-nigel-tranter Link to comment
creedon Posted April 16, 2022 Share Posted April 16, 2022 46 minutes ago, Pemberley said: I have the same request: move the "add to cart" button above the description site-wide. Please see my October 7, 2021 post earlier in this thread. Then set the CSS variables thusly. --add-to-cart-button : -1; --description : unset; --price : -1; --quantity : unset; --variants : unset; You may want to read the several posts following as some folks had trouble following the instructions. They may seem a bit obtuse but basically you are using building blocks to build up the elements needed to reach the final effect. Also the solution is a little more generalized to fit several uses cases. 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
Slyoung Posted May 26, 2022 Share Posted May 26, 2022 @creedon Hi - following up from your help back in January. On 1/27/2022 at 7:11 PM, Slyoung said: @creedon, it seems to be working perfectly! Thanks so much! I looked at my website on my phone this week and noticed that on the desktop, the price shows below the description, which is what I wanted. But on mobile, it still shows above the description. Is there additional code to re-order these elements for mobile? I already have installed, in this order: store product details natural order desktop store product details display flex desktop store product details reorder desktop Thanks for any help! Link to comment
creedon Posted May 26, 2022 Share Posted May 26, 2022 1 hour ago, Slyoung said: I looked at my website on my phone this week and noticed that on the desktop, the price shows below the description, which is what I wanted. But on mobile, it still shows above the description. Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. 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
Slyoung Posted May 26, 2022 Share Posted May 26, 2022 2 minutes ago, creedon said: Please post the URL for a page on your site where we can see your issue. Here ya go. Price is below description on desktop, but above the description on mobile. https://www.sarahyoungart.com/shop/p/hidden-stream-at-graveyard-fields Link to comment
creedon Posted May 26, 2022 Share Posted May 26, 2022 (edited) 17 hours ago, Slyoung said: Price is below description on desktop, but above the description on mobile. Ah ha! I was a bit slow on the uptake. The reason the effect doesn't work on mobile is that is was designed for desktop only. As a work around you could change the following line... @media screen and ( min-width : 768px ) { ...in the store product details reorder desktop code to the following... @media screen { That would remove the viewport width check. Let us know how it goes. Edited May 26, 2022 by creedon Slyoung 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
Nikitaly Posted May 30, 2022 Share Posted May 30, 2022 On 2/16/2022 at 2:49 AM, Jay_Encinares said: Worked like a charm! Legend! thanks a lot 🙂 Hi Jay, I tried your css above but its not working, maybe because our site is Flores (Bedford family). Could you poss help with this? thanks Niki Link to comment
tuanphan Posted June 1, 2022 Share Posted June 1, 2022 On 5/30/2022 at 11:06 PM, Nikitaly said: Hi Jay, I tried your css above but its not working, maybe because our site is Flores (Bedford family). Could you poss help with this? thanks Niki What is your site url? We can check easier 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
Nikitaly Posted June 1, 2022 Share Posted June 1, 2022 Thanks. https://www.rebelrebel.co.uk/bouquets-online Link to comment
creedon Posted June 1, 2022 Share Posted June 1, 2022 @Nikitaly I answered your question here... Nikitaly 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
Nikitaly Posted June 2, 2022 Share Posted June 2, 2022 Thank you so much. Apologies. I was getting confused with which code to use because of the site being v7. working great now. creedon 1 Link to comment
Slyoung Posted June 6, 2022 Share Posted June 6, 2022 On 5/26/2022 at 3:22 PM, creedon said: As a work around you could change the following line... @media screen and ( min-width : 768px ) { ...in the store product details reorder desktop code to the following... @media screen { That worked! You're the best, @creedon, thanks! (Sorry for the slow response; I was away.) creedon 1 Link to comment
Arkaitx Posted December 5, 2022 Share Posted December 5, 2022 On 5/26/2022 at 2:21 AM, Slyoung said: I looked at my website on my phone this week and noticed that on the desktop, the price shows below the description, which is what I wanted. But on mobile, it still shows above the description. Is there additional code to re-order these elements for mobile? Im trying to do a similar thing but with the add to cart button also. I want it to be the last thing you see in the mobile site. I haven't added any code yet since im a little bit lost regarding what code will work. Would appreciate any help. site: https://giraffe-harmonica-sk3p.squarespace.com/config/ Slyoung 1 Link to comment
Slyoung Posted December 5, 2022 Share Posted December 5, 2022 (edited) 5 hours ago, Arkaitx said: Im trying to do a similar thing but with the add to cart button also. I want it to be the last thing you see in the mobile site. I haven't added any code yet since im a little bit lost regarding what code will work. Would appreciate any help. site: https://giraffe-harmonica-sk3p.squarespace.com/config/ @Arkaitx, follow instructions from @creedon. I followed his instructions - he's fabulous! If it helps, here is the summary I wrote for myself of what I did (following his instructions) in case I needed to redo it on another website etc. If this doesn't do what you need, then tag Creedon. Good luck! Moved price down on the product detail page: Shop page - Settings - Advanced - Custom code - copied 3 sets of code from here https://github.com/tomsWebConsulting/twcsl/tree/main/v7.1/Store Product Details Reorder Desktop#store-product-details-reorder-desktop, and in this order: Natural Order, Display Flex, and Reorder - and then change the numerical sequence in the Reorder section. My help request, followed by his response. https://forum.squarespace.com/topic/163909-moving-add-to-cart-button/?do=findComment&comment=524798 Getting it fixed on mobile….posted to that thread on 5/25/2022 Solution - removed ( min-width : 768px ) from the Reorder section. Edited December 5, 2022 by Slyoung Link to comment
Arkaitx Posted December 5, 2022 Share Posted December 5, 2022 @Slyoung I made a new topic and got an short answer that got it done. Thanks though, much appreciated! Slyoung 1 Link to comment
wootiown Posted March 10, 2023 Share Posted March 10, 2023 Hi @creedon, reposting in this thread. I'm having an issue where using the "Half" format for products on Mobile, the reviews appear directly below the image rather than below the item's description at the bottom. Squarespace said they'll try to fix this but of course no ETA. Would it be possible to modify this to adjust the location of the reviews? I haven't had any luck finding the class to point to to move it using your existing code. Thanks! Link to comment
creedon Posted March 10, 2023 Share Posted March 10, 2023 3 hours ago, wootiown said: I'm having an issue Please post the URL for a page on your site where we can see your issue. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. Please set up a site-wide password, if your site is not public and you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the site-wide password and how to share a link documentation to understand how they work. We can then take a look at your issue. You may find How to post a forum question post useful. 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
wootiown Posted March 13, 2023 Share Posted March 13, 2023 On 3/10/2023 at 3:55 PM, creedon said: Please post the URL for a page on your site where we can see your issue. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. Please set up a site-wide password, if your site is not public and you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the site-wide password and how to share a link documentation to understand how they work. We can then take a look at your issue. You may find How to post a forum question post useful. Thanks for your response, my site is live so I didn't want to show it with the problematic config unless I had to. You can see the reviews at the following: https://www.sunkentreasureaquatics.com/plants/p/mystery-plant-treasure-chest-3ne9n The issue is only present on the mobile version of the site, there is no site password. Thank you. Link to comment
creedon Posted March 13, 2023 Share Posted March 13, 2023 (edited) On 3/10/2023 at 9:39 AM, wootiown said: I'm having an issue where using the "Half" format for products on Mobile, the reviews appear directly below the image rather than below the item's description at the bottom. Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection. <style> .view-item .products.collection-content-wrapper { display : flex; flex-direction : column; } .view-item .pdp-layout .reviewsSection { order : 1; } </style> This is for v7.1. Let us know how it goes. Edited March 14, 2023 by creedon version 2 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
wootiown Posted March 14, 2023 Share Posted March 14, 2023 18 hours ago, creedon said: Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection. <style> .products.collection-content-wrapper { display : flex; flex-direction : column; } .pdp-layout .reviewsSection { order : 1; } </style> This is for v7.1. Let us know how it goes. Thank you so much for your help, that did work! Unfortunately, it also caused an issue on the main store page, where it broke the side by side columns. The item categories were moved above the list of items rather than being to the left of them. Before https://prnt.sc/SJo3XgAcCxBD After https://prnt.sc/y_FQAPVAZ9kn I've left the code in my site so you can see it here https://www.sunkentreasureaquatics.com/plants Is there any way to fix this? Thank you. Also, do you have a donate button? Happy to throw some cash your way for the help! Link to comment
creedon Posted March 14, 2023 Share Posted March 14, 2023 1 hour ago, wootiown said: Unfortunately, it also caused an issue on the main store page, where it broke the side by side columns. I have updated my code post. 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
wootiown Posted March 14, 2023 Share Posted March 14, 2023 1 hour ago, creedon said: I have updated my code post. Works perfectly. Thanks so much! creedon 1 Link to comment
artgirl81 Posted August 25, 2023 Share Posted August 25, 2023 On 11/4/2020 at 11:32 PM, creedon said: The code @tuanphan posted was for a Squarespace v7.0 site. Your site is v7.1 and requires different code. Add the following to Store Settings > Advanced > Page Header Code Injection. <style> /* There is something odd going on with v7.1 CSS as of 11/04/20 .ProductItem-details-checkout has a rule of display block but sub elements have order properties on them. The first bit of CSS unsets those items for a clean slate returning the elements to natural order. */ .ProductItem-details .product-quantity-input, .ProductItem-details .product-variants, .ProductItem-details .ProductItem-details-excerpt, .ProductItem-details .ProductItem-product-price, .ProductItem-details .sqs-add-to-cart-button-wrapper { -webkit-box-ordinal-group: unset; -ms-flex-order: unset; order: unset; } .ProductItem-details .product-variants { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; width: auto; } .ProductItem-details .ProductItem-details-excerpt { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .ProductItem-details .ProductItem-additional { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } @media only screen and ( pointer: coarse ) and ( min-width: 1025px ), screen and ( min-width: 800px ) { .ProductItem-details .ProductItem-details-checkout { -webkit-column-gap: 3vw; -moz-column-gap: 3vw; grid-column-gap: 3vw; column-gap: 3vw; display: -ms-grid; display: grid; grid-row-gap: 3vh; row-gap: 3vh; -ms-grid-columns: 1fr 3vw 1fr 3vw 1fr 3vw 1fr 3vw 1fr; grid-template-columns: repeat( 5, 1fr ); } .ProductItem-details .ProductItem-details-checkout > * { -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1 / 6; margin: 0; margin-right: 1vw; } .ProductItem-details .product-quantity-input { -ms-grid-row-align: end; align-self: end; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2; margin-right: 0; } .ProductItem-details .sqs-add-to-cart-button-wrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-row-align: end; align-self: end; -ms-grid-column: 2; -ms-grid-column-span: 4; grid-column: 2 / 6; width: auto; } } @media only screen and ( pointer: coarse ) and ( max-width: 1024px ), screen and ( max-width: 799px ) { .ProductItem-details .ProductItem-details-checkout { display: -webkit-box; display: -ms-flexbox; display: flex; } } </style> Let us know how it goes. This is super close for me....I just need to move that button over or span it the whole column. I tried changing "center" to "start" and "left" but it didn't seem to work. Help? https://www.autoharpmusic.co/music/p/o-little-town-of-bethlehem-autoharp Thanks, A Link to comment
artgirl81 Posted August 26, 2023 Share Posted August 26, 2023 20 hours ago, artgirl81 said: This is super close for me....I just need to move that button over or span it the whole column. I tried changing "center" to "start" and "left" but it didn't seem to work. Help? https://www.autoharpmusic.co/music/p/o-little-town-of-bethlehem-autoharp Thanks, A please 🙂 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