Move additional product info to under product description

Site URL: https://www.ahriaorganics.com/shop-all/baby-top-to-toe-cream

I am wanting to move the additional info blocks of products on this site to display under the product description/price block (to the right of the image) and not underneath the product info as it currently is. Is this possible? 

https://www.ahriaorganics.com/shop-all/baby-top-to-toe-cream

Hi. Have you solved it yet?

@raego, yes you can do this potentially with CSS and if not it can be done with JavaScript.  Is this the part you're wanting to move?

 

@raego you can add this code to your custom CSS to get the desired result

.ProductItem-details-excerpt {
order: 3 !important;
}

I have had the same problem.

how to categorize like you have done in excerpt description? 

Thank You in advance

On 6/10/2020 at 5:33 AM, tuanphan said:

Hi. Have you solved it yet?

Hello there, i am having the same question, I am struggling for days to find a way how to move "Additional info" of a product up to a "Product's description excerpt" so far I cannot find an answer anywhere. I would deeply appreciate if you can take a look.

Thank you in advance!

Here is my question forum page:

Yes, you can do this using jQuery. 

Add this to your PAGE HEADER CODE INJECTION— in the settings on your main product page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, function(){  
  $('section.ProductItem-additional').appendTo('.ProductItem-details-share');
});
</script>

Notes:
1. this assumes you're not running jQuery on the site; if you are, you can just use the second script.

2. The template I'm using is MOJAVE in the Brine Family (7.0), although this should work for most 7.0 templates. 

3. You have to make sure that SOCIAL SHARING is turned on in the Design Styling area— as that's the container I'm using to hold the additional content. It's a little hacky, but it was the easiest way to make it happen.

I have not been able to get this code to work for me. Has anyone else been able to achieve this?

10 hours ago, cbragg said:

I have not been able to get this code to work for me. Has anyone else been able to achieve this?

You have to make sure that SOCIAL SHARING is turned on in the Design Styling area— as that's the container I'm using to hold the additional content. It's a little hacky, but it was the easiest way to make it happen. (please see additional notes added to my original response)

@Alan-Squareflair Thank you! I am using 7.1 - do you know how I can do this for 7.1? Thanks

8 hours ago, cbragg said:

@Alan-Squareflair Thank you! I am using 7.1 - do you know how I can do this for 7.1? Thanks

Can you share link to product page? We can check easier.

Hi @tuanphan I have sent you an email. Thank you! https://fieldcrestnz.squarespace.com/fieldcrest/p/toulouse-duvet-cover-set-black-jean is the link to my website

2 hours ago, cbragg said:

Hi @tuanphan I have sent you an email. Thank you! https://fieldcrestnz.squarespace.com/fieldcrest/p/toulouse-duvet-cover-set-black-jean is the link to my website

Add to Last Line in Code Injection Header

<script>
jQuery(document).ready(function($) {
$('section.ProductItem-additional .button-block').insertAfter(".ProductItem-details-excerpt");
});
</script>
<style>
.ProductItem-details-excerpt + .button-block>div>div {
    text-align: left;
}
</style>

Hello, I'm looking to add this to my website as well, I have added the above code into the Header but my code is below the share buttons and below the add to cart button, how can I change this?


UPDATE: I changed ".ProductItem-details-share" to ".ProductItem-details-excerpt" And that seemed to work, thank you. 

13 hours ago, charlottelaila said:

Hello, I'm looking to add this to my website as well, I have added the above code into the Header but my code is below the share buttons and below the add to cart button, how can I change this?


UPDATE: I changed ".ProductItem-details-share" to ".ProductItem-details-excerpt" And that seemed to work, thank you. 

If you still have a problem, just share url, we can help easier

On 6/13/2020 at 1:10 AM, RyanDejaegher said:

@raego you can add this code to your custom CSS to get the desired result

 

 

.ProductItem-details-excerpt {
order: 3 !important;
}

 

hey there! may i know what product rating/review integration you're using? :) @raego

@tuanphan

On 9/7/2020 at 3:31 AM, tuanphan said:

<script> jQuery(document).ready(function($) { $('section.ProductItem-additional .button-block').insertAfter(".ProductItem-details-excerpt"); }); </script> <style> .ProductItem-details-excerpt + .button-block>div>div { text-align: left; } </style>

Hello, I'm having the same issue with my website - I would also like the Additional Info block to appear after the description and above the color box. I tried to enter the above code in the Header Code Injection spot, but it didn't appear to have any effect. Thanks so much in advance!

URL: https://www.promomomma.com/store/p/pfizer-pfam-minimal

On 5/10/2021 at 10:54 PM, MeaghanPM said:

@tuanphan

Hello, I'm having the same issue with my website - I would also like the Additional Info block to appear after the description and above the color box. I tried to enter the above code in the Header Code Injection spot, but it didn't appear to have any effect. Thanks so much in advance!

 

URL: https://www.promomomma.com/store/p/pfizer-pfam-minimal

Hi. Try this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> jQuery(document).ready(function($) { $('section.ProductItem-additional .button-block').insertAfter(".ProductItem-details-excerpt"); }); </script> <style> .ProductItem-details-excerpt + .button-block>div>div { text-align: left; } </style>

8 hours ago, tuanphan said:

Hi. Try this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> jQuery(document).ready(function($) { $('section.ProductItem-additional .button-block').insertAfter(".ProductItem-details-excerpt"); }); </script> <style> .ProductItem-details-excerpt + .button-block>div>div { text-align: left; } </style>

 

Hi @tuanphan,

I put this code in, and it's the only code in my Header Code Injection section, but I'm still seeing the Additional Info block on its own at the bottom of the page. Did I miss a step, or am I doing something wrong?

On 5/12/2021 at 11:50 PM, MeaghanPM said:

Hi @tuanphan,

I put this code in, and it's the only code in my Header Code Injection section, but I'm still seeing the Additional Info block on its own at the bottom of the page. Did I miss a step, or am I doing something wrong?

Okay. Remove code I set above. We will check again.

10 hours ago, tuanphan said:

Okay. Remove code I set above. We will check again.

@tuanphanJust removed. Thank you so much!

On 5/14/2021 at 11:21 PM, MeaghanPM said:

@tuanphanJust removed. Thank you so much!

Add new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('section.ProductItem-additional').insertAfter('.ProductItem-details-excerpt');
	});
</script>
<style>
  section.ProductItem-summary {
    align-items: flex-start !important;
}
  section.ProductItem-additional {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}
</style>

On 5/16/2021 at 5:04 AM, tuanphan said:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('section.ProductItem-additional').insertAfter('.ProductItem-details-excerpt'); }); </script> <style> section.ProductItem-summary { align-items: flex-start !important; } section.ProductItem-additional { margin-top: 20px !important; margin-bottom: 20px !important; } </style>

Worked like a charm! Thank you so much!

I have been trying to solve this for weeks now and have not been able to get any of the codes above to work for me! Wondering if there is another solution or something I am missing - I am using the Wells template and would like to move my additional info to the right hand side. Here is the link to my site: https://www.nicolekutz.com/nicole-kutz-print-shop/nicole-kutz-untitled-3-print

Thanks for any help!

18 hours ago, NKutz said:

I have been trying to solve this for weeks now and have not been able to get any of the codes above to work for me! Wondering if there is another solution or something I am missing - I am using the Wells template and would like to move my additional info to the right hand side. Here is the link to my site: https://www.nicolekutz.com/nicole-kutz-print-shop/nicole-kutz-untitled-3-print

Thanks for any help!

Hi. Can you take screenshot all code in Code Injection Header & Footer? I think you missing a library link