Moving 'additional info' blocks between item description and option on product page

Hoping to get some help- have looked and tried to implement a few different variations of CSS that I've seen provided to others but none seem to work!

Want to move additional info blocks (aware that my input Javascript isn't available until I upgrade plans but my trial still has 7 days left) between product description text (ending 'PLACEHOLDER TEXT') and 'colourway & base' product options. Is this possible?

See screenshots of what I mean- first is what it is now, second what I want to look like. Planning on adding a few lines of text and buttons as well at a later time.

Current site + password: https://porcupine-swordfish-s7e8.squarespace.com/ with password: wallpaper

EDIT: Want this to appear on *all* product pages, not just this one product.

Thanks in advance if anyone can assist!

1 minute ago, ysdlondon said:

aware that my input Javascript isn't available until I upgrade plans but my trial still has 7 days left

There are no limitations on JavaScript or code whilst in a trial 🙂.

Did this help? Please give feedback by clicking an icon below  ⬇️

I've managed to add an accordion dropdown to the additional information instead of the JavaScript from before, now I want to be able to move this box to directly beneath product description. See images for how it is/ how I'd like it!

I feel like this should be super simple but can't begin to figure out what I can do to move it below description/ above colourway options. Or even to have an accordion featured *inside* the product description, is that possible?

12 minutes ago, jaeveedee said:

Try this and see if it works. If it doesn't leave it in place and let me know. It doesn't look like you have jquery installed so this adds that as well. If you do then you can ignore the first line. Add this to your code injection footer area.

edit: SS doesn't offer this particular thing so you need to make it in the additional info area like you did and then move it with some code

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
  var accordion = $(".ProductItem-additional .sqs-block-accordion");
  var excerpt = $(".ProductItem-details-excerpt");

  excerpt.append(accordion);
});

</script>

 

Amazing, that's worked!!! Thank you so much...

Any way to adjust the padding between accordion block and description/ product options so it's in alignment with the rest of the line breaks? If not I'm more than happy with leaving it, you've really saved me...!

I have no idea about code, CSS, JavaScript or JQuery etc...so for me this is huge, thank you so much again!

EDIT: Is this applied to every product page or do I need to put this into every footer section?

try this in CSS 

.ProductItem-details-excerpt .sqs-block-accordion {
  padding-top: 0 !important; //adjust up and down as px ex(10px)
  padding-bottom: 0 !important; //adjust up and down as px ex(10px)
}

also try this for the code injection part too. this way you can still edit the block while in edit mode but live it will slip into place

<script>
  if(self===top){
    $(document).ready(function() {
      var accordion = $(".ProductItem-additional .sqs-block-accordion");
      var excerpt = $(".ProductItem-details-excerpt");

      excerpt.append(accordion);
    });
  }
</script>

3 minutes ago, jaeveedee said:

try this in CSS 

 

.ProductItem-details-excerpt .sqs-block-accordion {
  padding-top: 0 !important; //adjust up and down as px ex(10px)
  padding-bottom: 0 !important; //adjust up and down as px ex(10px)
}

 

Ooh thanks, that's helped reduce the spacing by quite a lot! You're amazing, thanks!