Product page- change code block position

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;
}

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');
    });

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

You will need to keep the script tags.

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

Yours is insert after product title mine is after product price.

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. 

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.

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>

Try .product-excerpt

Bingo! Thanks again rwp!!

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?

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.

Try this. Design -> CSS

.ProductItem-details .sqs-block.code-block.sqs-block-code {
    order: 4;
}

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?

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

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

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.

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 

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!

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