Jump to content

Move product description below product title + above product price for desktop + mobile

Recommended Posts

Site URL: https://www.homemadeart.com.au/store/p/p0av2i3r79yn0cs4bmcefu9iuq5ro6

Hiya. First off want to say I'm very grateful for the squarespace forum community. Been able to adjust so much of my website by myself without ever having done any coding before just from others questions and amazing helpful answers. 

I'm hoping to make one adjustment on my site that I can't seem to find on the forum. As the title says, I'd like to move the normal (not additional/form info) description which is at the bottom of my site, to underneath the "Home Portrait" title and above the pricing and image gallery sections. And I'd like to Centre that title title as well. Oh and, is it possible to level off the top of the image gallery with the "from $205.00" pricing title sothey're in one line? So that it looks all neat and tidy?

I've attached some pics to demonstrate.

Cheers! 

IMG_5E1B4265F897-1 3.jpeg

IMG_0D63510883A8-1.jpeg

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
	// title
	$('h1.ProductItem-details-title').insertBefore('section.ProductItem-summary');
	// description
	$('.ProductItem-details-excerpt').insertAfter('h1.ProductItem-details-title');
	// price
	$('.ProductItem-product-price').insertAfter('.ProductItem-details-excerpt');
});
</script>
<style>
  h1.ProductItem-details-title {
    text-align: center;
}
  .ProductItem-details-excerpt p {
    text-align: center !important;
}
  .ProductItem-product-price {
    text-align: center;
}
  span.afterpayString {
    display: block;
    margin-top: 15px;
}
</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
On 1/27/2022 at 11:19 PM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
	// title
	$('h1.ProductItem-details-title').insertBefore('section.ProductItem-summary');
	// description
	$('.ProductItem-details-excerpt').insertAfter('h1.ProductItem-details-title');
	// price
	$('.ProductItem-product-price').insertAfter('.ProductItem-details-excerpt');
});
</script>
<style>
  h1.ProductItem-details-title {
    text-align: center;
}
  .ProductItem-details-excerpt p {
    text-align: center !important;
}
  .ProductItem-product-price {
    text-align: center;
}
  span.afterpayString {
    display: block;
    margin-top: 15px;
}
</style>

 

Thank you! Unfortunately it didn’t work. 

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.