How to move "Additional information" section to description

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

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

UP

17 hours ago, Faustas said:

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

UP

 

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>

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

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>

 

How would i move add to cart next to enquire ?

https://www.mozerisfineantiques.com/timepieces/p/piaget-p10182-18kt-yellow-gold-wristwatch

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

How would i move add to cart next to enquire ?

https://www.mozerisfineantiques.com/timepieces/p/piaget-p10182-18kt-yellow-gold-wristwatch

Move Enquire next to add to cart

or move add to cart next to enquire?

On 5/14/2022 at 10:30 AM, tuanphan said:

Move Enquire next to add to cart

or move add to cart next to enquire?

Move Enquire next to add to cart

13 hours ago, Faustas said:

Move Enquire next to add to cart

I see you have 2 buttons: Enquire + Livechat. Move enquiry only or both?

On 5/24/2022 at 5:17 AM, tuanphan said:

I see you have 2 buttons: Enquire + Livechat. Move enquiry only or both?

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

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>

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

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

 

Do you still need help? I see them stacked here

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>

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>

On 9/28/2022 at 10:22 AM, tuanphan said:

Add to under your code

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

 

Thank you! That's perfect.

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!

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?

https://wigshairmakeup.com/catalogue-working/p/fresa-kaw7a-26f89-5tnsh

17 hours ago, marmaladeisgood said:

https://wigshairmakeup.com/catalogue-working/p/fresa-kaw7a-26f89-5tnsh

You mean Move Contact Button?

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

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>

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

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

 

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;
}
}

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!

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!

Hi,

What is site url?