Move additional product info to under product description

57 minutes ago, MKrause18 said:

I put the twcsl and the code into the Page Header Code Injection

twcsl is not installed correctly.

This indicates to me that you missed Step 2 of the Paid Plan Install Steps or it wasn't done correctly.

• Step 2

  In Pages > Not Linked add a Link page and link to the twcsl.js file.

Please see Adding links to your navigation - Add a link.

2 hours ago, creedon said:

twcsl is not installed correctly.

This indicates to me that you missed Step 2 of the Paid Plan Install Steps or it wasn't done correctly.

• Step 2

  In Pages > Not Linked add a Link page and link to the twcsl.js file.

Please see Adding links to your navigation - Add a link.

Oops! That is fixed now. Still unsure of the next steps, I put the "move product detail additional info first n blocks to end of product details.html" into Store Settings > Advanced > Page Header Code Injection for the store page.

1 hour ago, MKrause18 said:

That is fixed now.

Now you need Step 3.

• Step 3

  Add the following to Settings > Advanced > Code Injection > HEADER.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="/s/twcsl.js"></script>

1 hour ago, creedon said:

Now you need Step 3.

•  

Oh gosh, today is not my day. I had that in and then deleted it. I think everything is in the right place now, 

1 hour ago, MKrause18 said:

Oh gosh, today is not my day. I had that in and then deleted it. I think everything is in the right place now, 

It is and it's working!

A note from the code.

Quote

 

this effect is not active in SS Preview. to test it use private browsing < https://bit.ly/3f6lhq2 >

 

Are you going to want to get rid of quantity and Purchase? If so would this be for every product in your Store?

As to changing the Amazon button itself. Unless Amazon provides a configurator or an attribute that you can throw on the div you show in the code, I don't think it will be possible to change the text.

Hi Squarespace friends! @creedon @tuanphan 

I am seeking your help, I tried implementing a few of these codes but still seem to be missing something. I am wanting to move the "additional information" section on this product so the booking calendar section appears before the quantity and add to cart sections. Any help is so appreciated!!! 🙏

https://www.alexandra-lyon.com/offerings/p/inner-wisdom-session

On 9/5/2023 at 4:06 AM, GretchenElizabeth said:

Hi Squarespace friends! @creedon @tuanphan 

I am seeking your help, I tried implementing a few of these codes but still seem to be missing something. I am wanting to move the "additional information" section on this product so the booking calendar section appears before the quantity and add to cart sections. Any help is so appreciated!!! 🙏

https://www.alexandra-lyon.com/offerings/p/inner-wisdom-session

Do this for all products or 1 product in screenshot only?

2 hours ago, tuanphan said:

Do this for all products or 1 product in screenshot only?

@tuanphan just this one product in the screenshot!! thank you!!! 🙏

Hi @tuanphan, 

I am moving the accordion to the product description using code: 

 

<script>

(function(){

  var accordion = document.querySelector('.ProductItem-additional .accordion-block');

  var quantitylabel = document.querySelector('.quantity-label');                    

  if(accordion && quantitylabel) {

    // Remove accordion from current position.

    accordion.parentNode.removeChild(accordion);

    // Add accordion before the quantity label.

    quantitylabel.before(accordion);

  }

})()

</script>

Works perfectly on live website but disappears on mobile. Any ideas please?

URL:https://www.potsandpaperbysteph.com/shop/p/o3rmu4pac0fwpetkskvge721p57asg
Password: HELP

On 9/5/2023 at 4:06 AM, GretchenElizabeth said:

Hi Squarespace friends! @creedon @tuanphan 

I am seeking your help, I tried implementing a few of these codes but still seem to be missing something. I am wanting to move the "additional information" section on this product so the booking calendar section appears before the quantity and add to cart sections. Any help is so appreciated!!! 🙏

https://www.alexandra-lyon.com/offerings/p/inner-wisdom-session

Add to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('body#item-64f25aa4651cc5686aa3019b section.ProductItem-additional').appendTo('.ProductItem-details-excerpt');
})
</script>

9 minutes ago, PotsandPaperbySteph said:

Hi @tuanphan, 

I am moving the accordion to the product description using code: 

 

<script>

(function(){

  var accordion = document.querySelector('.ProductItem-additional .accordion-block');

  var quantitylabel = document.querySelector('.quantity-label');                    

  

  if(accordion && quantitylabel) {

    // Remove accordion from current position.

    accordion.parentNode.removeChild(accordion);

    

    // Add accordion before the quantity label.

    quantitylabel.before(accordion);

  }

})()

</script>

Works perfectly on live website but disappears on mobile. Any ideas please?

URL:https://www.potsandpaperbysteph.com/shop/p/o3rmu4pac0fwpetkskvge721p57asg
Password: HELP

I'm not familiar with JavaScript. if you don't mind using jQuery like comment above for @GretchenElizabeth, I will send new code

9 hours ago, tuanphan said:

Add to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('body#item-64f25aa4651cc5686aa3019b section.ProductItem-additional').appendTo('.ProductItem-details-excerpt');
})
</script>

AMAZING!! Worked like a charm. I am so grateful for your help!! Thank you so much @tuanphan  🙏

Hi guys, @creedon @tuanphan

This isn't working for me. I also want to move the additional info up and below the product description. I'm using Squarespace 7.1. 

https://frog-kazoo-57nh.squarespace.com/stone-merchants-australia-2/p/black-swan

Password: takealook

Thank you in advance 🙂 

On 11/7/2023 at 11:01 PM, WildSpace said:

This isn't working for me.

Thanks for taking a look @creedon.

I've just extended the trial now. 

On 11/7/2023 at 11:01 PM, WildSpace said:

This isn't working for me.

I don't see any custom code installed. We can't diagnose what we can't see.

Sorry @creedon

Could you try now? 

33 minutes ago, WildSpace said:

Could you try now?

It appears you've not done the first step of the install instructions, install twcsl.

• Install twcsl.

@creedon@creedon

I followed the Trial Period Install Steps. My understanding is that you insert those two pieces of code in steps 1 & 3 instead? 

43 minutes ago, WildSpace said:

I followed

Please move the jquery line before the twcsl code. twcsl is dependant on jQuery.

• Step 1

  Add the following to Settings > Developer Tools > Code Injection > HEADER.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

   

• Step 2

  In your web browser visit the following URL.

  https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.3.2/twcsl.html
  

   

  The twcsl.html file will display in your browser.

• Step 3

  Copy the entire contents of the page and add it to Settings > Developer Tools > Code Injection > HEADER after the previously installed code. jQuery must be before the twcsl code.

@creedon

Ok, I placed the jquery line before the twcsl code. I hope!

1 hour ago, WildSpace said:

I placed the jquery line before the twcsl code. I hope!

It appears the codes are now installed in the correct order.

Now the issue is that my code was last updated almost two years ago and SS has made changes since then. I need to update my code. If you set your layout for the detail page to Simple, it should work now. But obviously if you want to use a layout other than Simple, then you'll need to wait for an update.

Please give me several days to update my code. If you don't hear back from me, please bump this thread.

Thanks so much for looking into this @creedon

I do have the layout set to simple already but unfortunately it's still not bringing the additional info up & below the product description. 

I do have some other CSS code which is hiding the 'Add to Cart' & 'Quantity' sections so not sure if that is interfering somehow. 

6 minutes ago, WildSpace said:

I do have the layout set to simple already but unfortunately it's still not bringing the additional info up & below the product description.

I'll dig a bit further. I see that you are indeed in using Simple layout.

Quote

I'll dig a bit further. I see that you are indeed in using Simple layout.

Ah ha. The code is working! I can see that it has moved one image block up under the hidden add to cart button.