Jump to content

Needing help with product page order with new update

Recommended Posts

hi, I had had a very different order to my product page than is there currently. I assume this is related to the new update. I have left the code as is but would like it to be in this order: 

Product name, product description, variant selection if applicable, price, checkout button, additional information.

Originally for this I had had help from @tuanphan if you have any new advice. Thanks so much

the website is elisefriedman.co.uk and the password is accesscode

Link to comment
  • Replies 4
  • Views 211
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

@Molololol Hi! Try adding this code snippet under Website > Pages > Website Tools > Custom CSS.

.ProductItem-details-excerpt {
    order: 1 !important;
}
.ProductItem-details .product-variants {
    order: 2 !important;
}
.ProductItem-product-price {
    order: 3 !important;
}
.ProductItem-quantity-add-to-cart {
    order: 4 !important;
}

Make sure to add the code after your existing code. Let me know how it goes. Thanks! 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Molololol Here's the solution for mobile view. Insert the code under Website > Pages > Website Tools > Custom CSS.

@media screen and (max-width: 767px) {
	#pdp h1.ProductItem-details-title {
		margin-top: 0 !important;
	}
	.ProductItem-details-excerpt-below-add-to-cart {
		order: 1 !important;
	}
    .ProductItem-details .product-variants {
		order: 2 !important;
	}
	.ProductItem-details .ProductItem-product-price {
		order: 3 !important;
	}
	.ProductItem-quantity-add-to-cart {
		order: 4 !important;
	}
}

If you want to position the product name below the gallery and directly above the description in mobile view, you can achieve this by adding the following code under Website > Pages > Website Tools > Code Injection > Header.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){  
$('.ProductItem-details-title').prependTo('.product-details');
});
</script>

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
17 hours ago, Lesum said:

@Molololol Hi! Try adding this code snippet under Website > Pages > Website Tools > Custom CSS.

.ProductItem-details-excerpt {
    order: 1 !important;
}
.ProductItem-details .product-variants {
    order: 2 !important;
}
.ProductItem-product-price {
    order: 3 !important;
}
.ProductItem-quantity-add-to-cart {
    order: 4 !important;
}

Make sure to add the code after your existing code. Let me know how it goes. Thanks! 

Hiya, how would you change this so that it is Title, Variant, Quantity, Price, Add to card

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.