Needing help with product page order with new update

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

@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! 

Thanks @Lesum, that helped for Web, is there any chance you could help for mobile? 

@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>

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

Hi @Lesum this didn't work for me, any chance you could help?

@Molololol You can share link to a product, we can check easier

Hi @tuanphan on mobile we are wanting the imagery first, then product title, then details etc.

https://www.elisefriedman.co.uk/shop/p/m11-bbg

password: accesscode

thanks!

On 7/5/2024 at 6:30 PM, Molololol said:

Hi @tuanphan on mobile we are wanting the imagery first, then product title, then details etc.

 

https://www.elisefriedman.co.uk/shop/p/m11-bbg

password: accesscode

 

thanks!

I see it already Image - Title - Details..

Hi @tuanphan

This is how we see it

Thank you so much @tuanphan