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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
17 hours ago, marmaladeisgood said:

You mean Move Contact Button?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.