Molololol Posted June 2 Share Posted June 2 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
Lesum Posted June 2 Share Posted June 2 @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 Posted June 3 Author Share Posted June 3 Thanks @Lesum, that helped for Web, is there any chance you could help for mobile? Link to comment
Lesum Posted June 3 Share Posted June 3 @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
Chvntelle Posted June 3 Share Posted June 3 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
Molololol Posted July 3 Author Share Posted July 3 Hi @Lesum this didn't work for me, any chance you could help? Link to comment
tuanphan Posted July 5 Share Posted July 5 @Molololol You can share link to a product, we can check easier 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
Molololol Posted July 5 Author Share Posted July 5 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! Link to comment
tuanphan Posted July 8 Share Posted July 8 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.. 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
Molololol Posted July 11 Author Share Posted July 11 Hi @tuanphan This is how we see it Link to comment
Solution tuanphan Posted July 13 Solution Share Posted July 13 On 7/11/2024 at 8:14 PM, Molololol said: Hi @tuanphan This is how we see it Use this code to bottom of Code Injection > Footer <script> jQuery(document).ready(function($) { function run() { if ($(window).width() <= 767) { $('h1.ProductItem-details-title').insertBefore('.product-details .ProductItem-details-excerpt-below-price'); } else { } } run(); window.addEventListener('resize', run) }); </script> 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment