Jump to content

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

Go to solution Solved by rwp,

Recommended Posts

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 comment
  • 2 months later...
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 comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 comment
  • 2 months later...
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 comment
  • 1 month later...
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!

 

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

 

 

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

Link to comment
  • 10 months later...
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!

Screen Shot 2021-11-23 at 10.40.05 PM.png

Hi,

You want

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

Is this right?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.