Jump to content

How to move "Additional information" section to description

Recommended Posts

Site URL: https://www.mozerisfineantiques.com/jewellery/p/bvkbk1lv2a3pgpqwbgutfgchgvm03y

This is my product page.

https://www.mozerisfineantiques.com/jewellery/p/bvkbk1lv2a3pgpqwbgutfgchgvm03y

I would like to move the information below such as "Enquire" and "live Chat", as well as the information of accordion into the blank space. The blank space is where product "description" would be. 

The buttons and accordion are entered into "Additional information" when listing.

How can it be moved? Thank you.

Best Regards

example.jpg

Edited by Faustas
Link to comment
17 hours ago, Faustas said:

Added image, perhaps this can be easier understood with image.

UP

 

example.jpg

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('section.ProductItem-additional').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');
	});
</script>

 

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 5/5/2022 at 6:51 AM, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('section.ProductItem-additional').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');
	});
</script>

 

Thank you so much!! Hero

Link to comment
On 5/12/2022 at 5:10 PM, Faustas said:

Move Enquire next to add to cart

or move add to cart next to enquire?

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...
  • 2 weeks later...
On 6/6/2022 at 10:06 PM, Faustas said:

I would like to move enquiry only, add to cart can stay, thank you.

Add to Last Line in Code Injection > Footer

<script>
$(document).ready(function() { 
		$('section.ProductItem-additional .button-block').appendTo('div.sqs-add-to-cart-button-wrapper');
	});
</script>
<style>
  div.sqs-add-to-cart-button-wrapper {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    flex-wrap: nowrap !important;
}
  #siteWrapper.with-button-variants .sqs-button-element--primary {
    max-width: unset !important;
    min-width: unset !important;
    width: auto !important;
    margin-right: 20px;
}
</style>

 

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...
On 6/10/2022 at 8:06 AM, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
$(document).ready(function() { 
		$('section.ProductItem-additional .button-block').appendTo('div.sqs-add-to-cart-button-wrapper');
	});
</script>
<style>
  div.sqs-add-to-cart-button-wrapper {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    flex-wrap: nowrap !important;
}
  #siteWrapper.with-button-variants .sqs-button-element--primary {
    max-width: unset !important;
    min-width: unset !important;
    width: auto !important;
    margin-right: 20px;
}
</style>

 

Thank you so much, really appreciate it.

I am very happy. Just one last question is how can I have the buttons all the same size, and perhaps some spacing inbetween?

 

Thank you

 

a.png

Link to comment
20 hours ago, Faustas said:

Thank you so much, really appreciate it.

I am very happy. Just one last question is how can I have the buttons all the same size, and perhaps some spacing inbetween?

 

Thank you

 

a.png

Do you still need help? I see them stacked here

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
  • 3 months later...
On 5/5/2022 at 6:51 AM, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('section.ProductItem-additional').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');
	});
</script>

 

@tuanphan Thanks for this code, it was really helpful. I made a small adjustment so the Additional Info section would sit above the variant selector. (See below). 
When viewed on mobile, the Additional Info section (size chart button) is above the product description, is there a way to resolve this? Thank you.

https://baskapparel.squarespace.com/shop/p/bask-suit

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

Link to comment
22 hours ago, kirstym said:

@tuanphan Thanks for this code, it was really helpful. I made a small adjustment so the Additional Info section would sit above the variant selector. (See below). 
When viewed on mobile, the Additional Info section (size chart button) is above the product description, is there a way to resolve this? Thank you.

https://baskapparel.squarespace.com/shop/p/bask-suit

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

Add to under your code

<style>
  @media screen and (max-width:767px) {
  section.ProductItem-additional {
    order: 4;
}
  }
</style>

 

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
15 hours ago, marmaladeisgood said:

Hi there, I'm having the same issue as the initial post that started this thread but the code that helped this person doesn't work on my site. I'm trying to move the content of 'additional info' into the same area as 'product description'. This is the product page currently: https://wigshairmakeup.com/all-prints/p/fresa-kaw7a. Thanks for your help!

Page doesn't exist. Can you check it again?

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 10/14/2022 at 4:09 AM, marmaladeisgood said:

Yes, move the contact button to underneath the product title where 'product description' would typically be.

Add this to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('section.ProductItem-additional').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');
	});
</script>

 

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
  • 3 months later...
On 2/9/2023 at 3:36 AM, Srob__ said:

Hello,

I have kind of a big ask.  I would like to not only move the 'additional info' section to underneath the 'add the cart' button but also put the product variants (size and quantity ) on the same line.  Can anyone help me?  I have attached photos for reference 

 

https://www.studio---dot.work/giftshop/p/studio-first-team

 

Screenshot 2023-02-08 at 3.34.34 PM.png

Add to Design > Custom CSS

@media screen and (min-width:992px) {
#page .ProductItem-details-checkout .product-variants {
    float: left !important;
    width: 45% !important;
}
.product-quantity-input {
    float: left !important;
    width: 45% !important;
    position: relative;
    top: -130px;
}
}

image.png.54c68d459b4ac722b364dd98b333d2a2.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

Hello! Quick question about mobile breakpoint.

The code works great for desktop but when I view it on mobile the "additional information" is underneath the image instead of being under the Add to Cart CTA. Image attached.

This is the code that I'm using:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
        $('section.ProductItem-additional').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');
    });
</script>

 

Thank you for your help!

Screenshot 2023-02-16 at 7.17.55 PM.png

Edited by ccoolsaet
Link to comment
On 2/17/2023 at 8:21 AM, ccoolsaet said:

Hello! Quick question about mobile breakpoint.

The code works great for desktop but when I view it on mobile the "additional information" is underneath the image instead of being under the Add to Cart CTA. Image attached.

This is the code that I'm using:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
        $('section.ProductItem-additional').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');
    });
</script>

 

Thank you for your help!

Screenshot 2023-02-16 at 7.17.55 PM.png

Hi,

What is site url?

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

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.