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

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

Question

Posted (edited)

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

Share this post


Link to post

14 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.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Please post a link to your page, thanks.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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

Share this post


Link to post
  • 0

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


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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

Share this post


Link to post
  • 0

Do you have a premium account?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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.

Share this post


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?

Share this post


Link to post
  • 0

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


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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!

Share this post


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

Share this post


Link to post
  • 0
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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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