kevin310 Posted July 13, 2020 Share Posted July 13, 2020 Site URL: https://www.blankforces.com/allproducts/v2-titanium-edc-ink-pens-clip Hi Squarespace gurus! On my "product page" I have a "code block" that I've placed in the "additional info" section. The code in the code block is working but it is below all of the product info.... but I'd love to move it so that it is positioned right below the "product price" as indicated in the image below. Below is the code that I was trying to use. Thanks for any help! -Kevin --------------- This code is from Code Injection >Footer: <script> $(document).ready(function() { $('.product-description .code-block').insertAfter('.product-title'); }); </script> This code is from my custom CSS: .ProductItem-description .code-block { order: 4; } Link to comment
rwp Posted July 13, 2020 Share Posted July 13, 2020 (edited) The code you used to move the code block only moves what is inside the code block, so the CSS is not being applied to it, because it is no longer in that div. Try this: $(document).ready(function() { $('.product-description .code-block').insertAfter('.product-price'); }); Edited July 13, 2020 by rwp Link to comment
kevin310 Posted July 13, 2020 Author Share Posted July 13, 2020 5 hours ago, rwp said: The code you used to move the code block only moves what is inside the code block, so the CSS is not being applied to it, because it is no longer in that div. Try this: $(document).ready(function() { $('.product-description .code-block').insertAfter('.product-price'); }); Hi rwp... thanks so much for getting back to me so quickly! I really appreciate it! Just so I understand. You just removed the <script> and <script/> from the code? and I should use it that way? I made that change and don't see any change. the code block is still working at the bottom of the page. I am guessing that the actual names... like "product-description" and "product-price". I found those one this forum, but i'm not sure they are correct for my site. Thanks again for your help! Kevin Link to comment
rwp Posted July 13, 2020 Share Posted July 13, 2020 You will need to keep the script tags. Link to comment
kevin310 Posted July 13, 2020 Author Share Posted July 13, 2020 Understood. So the code you posted is the exact same as what I posted then? I see no difference, and it is still not doing anything to move the code block. Thanks for taking the time to respond! Kevin Link to comment
rwp Posted July 13, 2020 Share Posted July 13, 2020 Yours is insert after product title mine is after product price. Link to comment
kevin310 Posted July 13, 2020 Author Share Posted July 13, 2020 Sorry about that... yes I see. I am using your code in the Code Injection FOOTER and the Custom CSS show below. It is still not doing anything. I'm not sure if i have the correct names that are highlighted in yellow below. I have tried to make these the same as well but I don't see an change in the code block's position. Also, for the CSS... I don't know what the "order number" actually does. Should it be 3? I also tried other numbers but don't see any change. Link to comment
rwp Posted July 13, 2020 Share Posted July 13, 2020 You don't need any CSS, and it won't work anyway. The code you are using moves the content of .ProductItem-description, not the entire div, so after you move it, it is no longer part of that class. You need to put the jquery script in the header injection. There are directions on how to do that in my signature. Link to comment
kevin310 Posted July 13, 2020 Author Share Posted July 13, 2020 Fantastic!! It's working...Thanks so much rwp!!! You are awesome. One last question if you don't mind. If I want to move the code block to this location... what would I change "product-price" to? <script> $(document).ready(function() { $('.product-description .code-block').insertAfter('.product-price'); }); </script> Link to comment
kevin310 Posted July 13, 2020 Author Share Posted July 13, 2020 Bingo! Thanks again rwp!! rwp 1 Link to comment
Zurra Posted September 1, 2020 Share Posted September 1, 2020 On 7/14/2020 at 7:16 AM, rwp said: Try .product-excerpt Hi rwp, Just reviving this thread - I've tried the code you provided, with some variations, and it only seems to insert the "Additional Info" code block above my product title, no matter what tag I give. The code I am using currently is as follows: <script> $(document).ready(function() { $('.ProductItem-additional .code-block').insertAfter('.ProductItem-details-title'); }); </script> It only seems to be able to move my "Additional Info" to above the title, and nowhere else. I want to try and have it above my product price/below the product title, as shown in the script. I am running a "star review" style code block in the "Additional Info" area. What am I doing wrong here? Link to comment
tuanphan Posted September 1, 2020 Share Posted September 1, 2020 8 hours ago, Zurra said: Hi rwp, Just reviving this thread - I've tried the code you provided, with some variations, and it only seems to insert the "Additional Info" code block above my product title, no matter what tag I give. The code I am using currently is as follows: <script> $(document).ready(function() { $('.ProductItem-additional .code-block').insertAfter('.ProductItem-details-title'); }); </script> It only seems to be able to move my "Additional Info" to above the title, and nowhere else. I want to try and have it above my product price/below the product title, as shown in the script. I am running a "star review" style code block in the "Additional Info" area. What am I doing wrong here? Can you share link to 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 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
rwp Posted September 1, 2020 Share Posted September 1, 2020 Try this. Design -> CSS .ProductItem-details .sqs-block.code-block.sqs-block-code { order: 4; } Zurra 1 Link to comment
Zurra Posted September 1, 2020 Share Posted September 1, 2020 2 hours ago, rwp said: Try this. Design -> CSS .ProductItem-details .sqs-block.code-block.sqs-block-code { order: 4; } Works beautifully, thank you! Is there a way to reduce padding between the additional info block and the product title? Link to comment
IXStudio Posted September 1, 2020 Share Posted September 1, 2020 Hi @Zurra Use this code in Design -> Custom CSS .tweak-product-item-details-show-price .ProductItem-details .product-price { margin-bottom: 20px !important; /* change it - default: 30px */ } .tweak-product-item-details-show-title .ProductItem-details h1.ProductItem-details-title { margin-bottom: 20px !important; /* change it - default: 30px */ } 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
IndigoBolt11 Posted December 21, 2021 Share Posted December 21, 2021 Reviving this because I have the same question and the answer is unclear Product page https://www.risingfirefly.org/shop/p/initiatictalesofhejptah I put the code in the footer - am I supposed to put code in the header as well or css to make it move? @rwp @tuanphan Link to comment
tuanphan Posted December 25, 2021 Share Posted December 25, 2021 On 12/21/2021 at 10:21 PM, IndigoBolt11 said: Reviving this because I have the same question and the answer is unclear Product page https://www.risingfirefly.org/shop/p/initiatictalesofhejptah I put the code in the footer - am I supposed to put code in the header as well or css to make it move? @rwp @tuanphan Did you solve or still needhelp? I see button under price here. 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
IndigoBolt11 Posted December 25, 2021 Share Posted December 25, 2021 10 hours ago, tuanphan said: Did you solve or still needhelp? I see button under price here. Thanks I ended up buying Paul's product Link to comment
MJKing Posted January 17, 2022 Share Posted January 17, 2022 Hi, I am trying to achieve something similar. I want to move my 'Additional Info" block to below the product image on my product page. It currently is showing up below the check out button. None of the previous codes seem to work for me. I am using a 7.0 version. Is there anyway to achieve this? Thank you! Link to comment
tuanphan Posted January 19, 2022 Share Posted January 19, 2022 On 1/17/2022 at 10:30 PM, MJKing said: Hi, I am trying to achieve something similar. I want to move my 'Additional Info" block to below the product image on my product page. It currently is showing up below the check out button. None of the previous codes seem to work for me. I am using a 7.0 version. Is there anyway to achieve this? Thank you! Hi. Can you share link to product in screenshot? We can check easier 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment