Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2

Move additional product info to under product description


raego

Question

Recommended Posts

  • 0
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:

 

Link to comment
  • 1

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>

 

Screen+Shot+2020-08-30+at+10.12.16+PM.pn 

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.

Screen+Shot+2020-08-31+at+9.55.42+AM.png

 

Edited by Alan-Squareflair
More details
Link to comment
  • 0
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)

 

Edited by Alan-Squareflair
additional details
Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

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. 

Screenshot 2020-11-13 at 10.13.57 AM.png

Edited by charlottelaila
Link to comment
  • 0
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. 

Screenshot 2020-11-13 at 10.13.57 AM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

@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

Link to comment
  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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?

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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!

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...