creedon Posted November 4, 2021 Share Posted November 4, 2021 39 minutes ago, Ciodensky said: Anyway, do you still need the store page password? I don't know also where to get it. If your intent was to change the product block only then no. Ciodensky 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
Ciodensky Posted November 4, 2021 Share Posted November 4, 2021 29 minutes ago, creedon said: If your intent was to change the product block only then no. Yes, I am working actually with the product block. I have one last question: Does your code affects only the product page but not the checkout page, right? Link to comment
creedon Posted November 4, 2021 Share Posted November 4, 2021 2 minutes ago, Ciodensky said: Does your code affects only the product page but not the checkout page, right? You are correct. Just a note. The checkout page can not be changed by any code. It is a SS security feature. Ciodensky 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
Ciodensky Posted November 4, 2021 Share Posted November 4, 2021 3 minutes ago, creedon said: You are correct. Just a note. The checkout page can not be changed by any code. It is a SS security feature. I agree. Thanks for all these information. Cheers! creedon 1 Link to comment
creedon Posted November 4, 2021 Share Posted November 4, 2021 (edited) Please see the following. Edited November 4, 2021 by creedon Ciodensky 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
Ciodensky Posted November 4, 2021 Share Posted November 4, 2021 (edited) 13 minutes ago, creedon said: Try the following for product blocks. Add the following to Page Settings > Advanced > Page Header Code Injection for the page. <style> /* begin product blocks variants first Version : 0.1d0 SS Version : 7.1 By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ .product-block .productDetails { display : -webkit-box; display : -ms-flexbox; display : flex; -webkit-box-orient : vertical; -webkit-box-direction : normal; -ms-flex-direction : column; flex-direction : column; gap : 20px; } .product-block .productDetails > *, .product-block .productDetails .product-price, .product-block .productDetails .product-title { margin-bottom : 0; margin-top : 0; } .product-block .productDetails .product-variants { -webkit-box-ordinal-group : 0; -ms-flex-order : -1; order : -1; } /* end product blocks variants first */ </style> Let us know how it goes. It works! Wow! Thank you so much Creedon! Greatly appreciate it! How can I mark it as answered even best solution? I couldn't find the button. Edited November 4, 2021 by Ciodensky follow up where to mark as answered creedon 1 Link to comment
creedon Posted November 4, 2021 Share Posted November 4, 2021 20 minutes ago, Ciodensky said: How can I mark it as answered even best solution? I couldn't find the button. You would have had to start a new question to be able to do that. 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
Ciodensky Posted November 4, 2021 Share Posted November 4, 2021 5 minutes ago, creedon said: You would have had to start a new question to be able to do that. I see. So I will create this question and you post your answer. I think this is valid because it is a separate topic "product-block" re-ordering of contents. creedon 1 Link to comment
monotangente Posted July 29, 2022 Share Posted July 29, 2022 On 8/12/2020 at 4:00 PM, tuanphan said: Add to Home > Design > Custom CSS .ProductItem-details .ProductItem-details-checkout { display: flex; } .ProductItem-details-excerpt { order: 1 !important; } .ProductItem-product-price { order: 2 !important; } Is this still working ? I copied it in the custom CSS, but it doesn't move anything.. Link to comment
tuanphan Posted July 30, 2022 Share Posted July 30, 2022 16 hours ago, monotangente said: Is this still working ? I copied it in the custom CSS, but it doesn't move anything.. Can you share link to a product? 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
Brooke202 Posted February 4, 2023 Share Posted February 4, 2023 Hi, I tried using the code from the original question however it isn't working for me. Is there an updated code I can use in order to have the price displayed at the bottom, before 'Add To Cart'? Link to comment
creedon Posted February 4, 2023 Share Posted February 4, 2023 1 hour ago, Brooke202 said: I tried using the code from the original question however it isn't working for me. 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
Brooke202 Posted February 11, 2023 Share Posted February 11, 2023 https://www.brookekeamphotography.com.au/shop Link to comment
creedon Posted February 11, 2023 Share Posted February 11, 2023 On 2/3/2023 at 7:37 PM, Brooke202 said: Is there an updated code I can use in order to have the price displayed at the bottom, before 'Add To Cart'? Please see the following. You may want to read the follow on posts in that thread if you are finding the install process a challenge. Then set the CSS variables thusly. --add-to-cart-button : 2; --description : unset; --price : 1; --quantity : unset; --variants : unset; 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
Brooke202 Posted February 13, 2023 Share Posted February 13, 2023 Still can't get it working 😞 Link to comment
creedon Posted February 13, 2023 Share Posted February 13, 2023 1 hour ago, Brooke202 said: Still can't get it working It appears you have some code already trying to manipulate the order. Remove it, make a copy somewhere. Install my code as suggested. This is what it looks like. 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
Terratag Posted September 1, 2023 Share Posted September 1, 2023 On 6/17/2021 at 12:44 AM, Jheverard said: Hi Love this fix, but is it possible to move the price to above the add to cart button? Please see attached picture.. thank you in advance! j Try this, it's just moved the price down one extra in the order, which should move it under the option boxes: .ProductItem-details .ProductItem-details-checkout { display: flex; } .ProductItem-details-excerpt { order: 1 !important; } .ProductItem-product-price { order: 3 !important; } Link to comment
rhondahymason Posted April 8 Share Posted April 8 On 6/24/2021 at 5:36 AM, creedon said: @Jheverard Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. <!-- begin reorder .ProductItem-details-checkout child elements SS Version : 7.1 Note : the code is comprised of two style tags both of which must be present for the effect to work. the second style tag is where the user controls the order of elements By : Thomas Creedon < http://www.tomsWeb.consulting/ > --> <style> /* There is something odd going on with .ProductItem-details-checkout CSS as of 06/23/21. The rule-set has a display property value of block but child elements of .ProductItem-details-checkout have order properties on them. The first bit of CSS unsets those properties for a clean slate returning the elements to natural order. */ /* user, ignore the rest of the rulesets in this tag and move to the next tag to set the order of elements */ .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; -moz-box-ordinal-group : unset; -ms-flex-order : unset; -webkit-order : unset; order : unset; } .ProductItem-details .ProductItem-details-checkout { display : -webkit-box; display : -ms-flexbox; display : flex; } </style> <style> /* begin user reorder, this is where you get to control the order */ .ProductItem-details .ProductItem-product-price { -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductItem-details .sqs-add-to-cart-button-wrapper { -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } /* end user reorder */ </style> <!-- end reorder .ProductItem-details-checkout child elements --> Let us know how it goes. Amazing!!! You are a life saver! Thank you so much for sharing this. Link to comment
creedon Posted April 8 Share Posted April 8 10 hours ago, rhondahymason said: Thank you so much for sharing this. I have more modern code for this effect which you will see in another thread you posted in. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment