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

  • Answers 20
  • Created
  • Last Reply

Top Posters For This Question

20 answers to this question

Recommended Posts

  • 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 post
  • 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 post
  • 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 post
  • 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.

Link to post
  • 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>

 

Link to post
  • 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 post
  • 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

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

image.thumb.png.d5bca88d2163fd30d4224bed567eaa64.png 



 


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

 

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

Link to post
  • 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 post
  • 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>

 

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

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...