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

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


angeldr
Go to solution Solved by rwp,

Question

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!

 

2020-06-27_17-14-25.png

 

Edited by angeldr
Link to post
  • Answers 17
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

$('section.ProductItem-details').html( $('section.ProductItem-additional').html() ); $('section.ProductItem-additional').html(''); This jQuery would do it, but personal accounts don't allow code in

Edit this code <script>$('section.ProductItem-details').html( $('section.ProductItem-additional').html() ); $('section.ProductItem-additional').html('');</script> to this <sc

Posted Images

17 answers to this question

Recommended Posts

  • 1
$('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.

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

image.thumb.png.16285534420d0cf537465b1de2faf459.png

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
Posted (edited)
17 hours ago, rwp said:

Please post a link to your page, thanks.

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

Thank you

Edited by angeldr
Link to post
  • 0
Posted (edited)
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 🙂

Edited by angeldr
Link to post
  • 0
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.

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

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

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

PokerBling_MoveInfo_Option1.jpg

PokerBling_MoveInfo_Option2.jpg

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

Screen Shot 2020-09-02 at 9.18.42 AM.png

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

 

2020-06-27_17-14-25.png

 

Hi there, 

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

Thanks in advance 

 

Link to post
  • 0

@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.   🙏 

Edited by CASKATE
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...