Move text or code block from "Additional Info" to "Product page description" product detail excerpt

Hello dear forum, 

I am struggling for days to find a way with CSS how to move "Additional info" of a product up to a "Product's description excerpt"

(Text from   "ProductItem-additional"   move to    "ProductItem-details-excerpt")

I am a newbie in coding, except have a general idea how to use chrome's inspector, but still have no idea how to interchange them or create from scratch via CSS.

If someone could help me solve this puzzle I would deeply appreciate you, and because of you, i will finally be able to sleep at night.

Thank you in advance!

Please post a link to your page, thanks.

17 hours ago, rwp said:

Please post a link to your page, thanks.

www.*************.com

Thank you

Do you want to remove the text on the right, and replace it with the description, or keep it all?

6 minutes ago, rwp said:

Do you want to remove the text on the right, and replace it with the description, or keep it all?

Ideally i would just remove the standard product description text because "additional info" text is more flexible can also add a button, but at the same time it would be very helpful to keep it all just in case i will need in the future, both methods would be really helpful 🙂

Do you have a premium account?

3 minutes ago, rwp said:

Do you have a premium account?

Due to the outbreak I recently downgraded my plan, at this moment i do not have the premium, it is simply personal plan.

53 minutes ago, rwp said:

$('section.ProductItem-details').html( $('section.ProductItem-additional').html() );
$('section.ProductItem-additional').html('');

This jQuery would do it, but personal accounts don't allow code injection.

Thank you so much I will try once i upgrade, do you happen to know if there is a slight little chance to get this result with CSS?

or Code Injection is the only option you can offer at this moment?

Maybe? I'd have to look at it more. JQuery was just the easiest way I could think of doing it.

4 hours ago, angeldr said:

Thank you so much I will try once i upgrade, do you happen to know if there is a slight little chance to get this result with CSS?

or Code Injection is the only option you can offer at this moment?

CSS can't sove this problem. You need to use jQuery/JavaScript

9 hours ago, tuanphan said:

CSS can't solve this problem. You need to use jQuery/JavaScript

I understood, appreciate your reply!

13 hours ago, rwp said:

Maybe? I'd have to look at it more. JQuery was just the easiest way I could think of doing it.

Thank you for your time. Appreciate!

On 6/27/2020 at 10:27 PM, rwp said:

$('section.ProductItem-details').html( $('section.ProductItem-additional').html() );
$('section.ProductItem-additional').html('');

This jQuery would do it, but personal accounts don't allow code injection.

Hi there! Not trying to hijack your post, but I'm having a similar issue on my client's site. 😞 I used this jQuery in addition to the jQuery 3.x script code RWP provided, however I'm not seeing any movement in the section. I'm operating on a trial right now, but will be moving forward with a business account as soon as everything's ready to go. 

Website link: https://pokerbling.squarespace.com/shop/p/goldelite-test
Password: test123

Am I doing something wrong? Here's the script info I have in the code injection:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>


<script>$('section.ProductItem-details').html( $('section.ProductItem-additional').html() );
$('section.ProductItem-additional').html('');</script>

I've attached a screenshot of what I'm looking to do, which I believe is similar to what the original poster was looking to do as well. I would also be happy to move these product options from the Additional Information section underneath the product images if possible. I just think they are too far down on the page and get lost. Any help is much appreciated. Thanks!

17 hours ago, oakandmoss said:

Hi there! Not trying to hijack your post, but I'm having a similar issue on my client's site. 😞 I used this jQuery in addition to the jQuery 3.x script code RWP provided, however I'm not seeing any movement in the section. I'm operating on a trial right now, but will be moving forward with a business account as soon as everything's ready to go. 

Edit this code

<script>$('section.ProductItem-details').html( $('section.ProductItem-additional').html() );
$('section.ProductItem-additional').html('');</script>

to this

<script>
  jQuery(document).ready(function($) {
$('.ProductItem .ProductItem-additional').insertAfter('.ProductItem-details-excerpt');
});
</script>

On 9/1/2020 at 5:47 AM, tuanphan said:

Edit this code

<script>$('section.ProductItem-details').html( $('section.ProductItem-additional').html() );
$('section.ProductItem-additional').html('');</script>

to this

<script>
  jQuery(document).ready(function($) {
$('.ProductItem .ProductItem-additional').insertAfter('.ProductItem-details-excerpt');
});
</script>

 

@tuanphan Thank you for this!!! I put the codes in and its definitely working! Is there any way to move the "add to cart" for the original bracelet above the additional info/custom engraving section? Right now it's at the very bottom of the product listing, underneath even the additional information section. Ideally I'd like to get the "Add to Cart" button in-line with the price of the bracelet, but I'm not sure if that's something I can do.

I also noticed on the mobile view that the custom engraving options (from the additional information product listings) are showing up before the product information on the original product. Is there any way to switch the order up on mobile devices so that you still see the original product price/description/add to cart button before you see the custom engraving options from the additional information section?

Thanks SO much for your help, I really appreciate it!!

On 6/28/2020 at 1:28 AM, angeldr said:

Hello dear forum, 

I am struggling for days to find a way with CSS how to move "Additional info" of a product up to a "Product's description excerpt"

(Text from   "ProductItem-additional"   move to    "ProductItem-details-excerpt")

I am a newbie in coding, except have a general idea how to use chrome's inspector, but still have no idea how to interchange them or create from scratch via CSS.

If someone could help me solve this puzzle I would deeply appreciate you, and because of you, i will finally be able to sleep at night.

Thank you in advance!

 

 

Hi there, 

I’m having the same issue as this. Where do I add the suggested script? @rwp

Thanks in advance 

16 hours ago, CASKATE said:

Hi there, 

I’m having the same issue as this. Where do I add the suggested script? @rwp

Thanks in advance 

 

Can you share link to product? We can check easier

@tuanphan

I’ve figured out an alternative to this. I’ve added an accordion to the product description instead and it has worked out well.

Thanks for your reply and to so many other posts on this forum.   🙏 

On 6/27/2020 at 7:28 PM, angeldr said:

Hello dear forum, 

I am struggling for days to find a way with CSS how to move "Additional info" of a product up to a "Product's description excerpt"

(Text from   "ProductItem-additional"   move to    "ProductItem-details-excerpt")

I am a newbie in coding, except have a general idea how to use chrome's inspector, but still have no idea how to interchange them or create from scratch via CSS.

If someone could help me solve this puzzle I would deeply appreciate you, and because of you, i will finally be able to sleep at night.

Thank you in advance!

 

 

On 6/27/2020 at 9:27 PM, rwp said:

$('section.ProductItem-details').html( $('section.ProductItem-additional').html() );
$('section.ProductItem-additional').html('');

This jQuery would do it, but personal accounts don't allow code injection.

I am having same issue, but nothing is happening when I insert this code. Am I inserting in wrong field???

16 hours ago, taurip said:

 

I am having same issue, but nothing is happening when I insert this code. Am I inserting in wrong field???

Can you share link to a product? We can help easier

On 1/13/2021 at 6:33 PM, tuanphan said:

Can you share link to a product? We can help easier

Hi @tuanphan! I'm trying to do the same for this page https://www.elunioncoffee.com/shop/bagulin but I can't seem to get either of the codes here to work. I'm using 7.0 Fulton Template. I also included a photo of what I'm trying to do for reference. Thanks!

On 11/23/2021 at 9:43 PM, mattsanpedro said:

Hi @tuanphan! I'm trying to do the same for this page https://www.elunioncoffee.com/shop/bagulin but I can't seem to get either of the codes here to work. I'm using 7.0 Fulton Template. I also included a photo of what I'm trying to do for reference. Thanks!

Hi,

You want

• Remove default add to cart/variant
• Move new button/variant

Is this right?

On 11/26/2021 at 5:30 PM, tuanphan said:

Hi,

You want

• Remove default add to cart/variant
• Move new button/variant

Is this right?

Yes exactly those 2 things!

On 12/5/2021 at 5:29 PM, mattsanpedro said:

Yes exactly those 2 things!

It looks like you fixed this?

On 12/8/2021 at 5:18 PM, tuanphan said:

It looks like you fixed this?

oh no i haven't. that's still the native add to cart button of Squarespace. i'm trying to install the shopify buy button which would normally be embedded in the product's additonal info.