claudiafrat Posted September 5, 2022 Share Posted September 5, 2022 Site URL: https://isabmonaco.com/shop-1/p/mumi-ws86s-lrktm-9cf86 Site URL: https://isabmonaco.com/shop-1/p/mumi-ws86s-lrktm-9cf86 Hello, Im wondering if someone can help me adjusting some things in the shop section. 1 : Make the "Quantity button" and "Add to cart button" same height so that they're align. 2 : Align the "Quantity button" and "Add to cart button" at the bottom of the image 3 : Move only the dot color option under the price section and remove the text "Color:" Thank in advace! Link to comment
tuanphan Posted September 7, 2022 Share Posted September 7, 2022 Hi, The url 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
claudiafrat Posted September 8, 2022 Author Share Posted September 8, 2022 Hi, thank you in advance for the support. The url should be this one:https://isabmonaco.com/shop-1/p/mooi Link to comment
tuanphan Posted September 9, 2022 Share Posted September 9, 2022 #1. Add to Design > Custom CSS div.sqs-add-to-cart-button { padding-top: 22px !important; padding-bottom: 22px !Important; } .variant-option-title { display: none !important; } #2. Move it to this? 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
claudiafrat Posted September 9, 2022 Author Share Posted September 9, 2022 Yes, like this! I've tried the code but nothing changed Link to comment
tuanphan Posted September 10, 2022 Share Posted September 10, 2022 On 9/9/2022 at 3:21 PM, claudiafrat said: Yes, like this! I've tried the code but nothing changed Try adding it again to Home > Design > Custom CSS 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
claudiafrat Posted September 10, 2022 Author Share Posted September 10, 2022 Thank you, quantity and add to cart, they are now aligned. However how can I move the color option below the price? Thanks again for the help! Link to comment
tuanphan Posted September 11, 2022 Share Posted September 11, 2022 20 hours ago, claudiafrat said: Thank you, quantity and add to cart, they are now aligned. However how can I move the color option below the price? Thanks again for the help! Add this 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() { $('.ProductItem-details .product-variants').insertAfter('body.view-item .product-price'); }); </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
claudiafrat Posted September 11, 2022 Author Share Posted September 11, 2022 Super, it worked, thank you! how can i make it this works also on mobile? Link to comment
claudiafrat Posted September 11, 2022 Author Share Posted September 11, 2022 (edited) Also @tuanphan I've noticed that this happened (both on desktop and mobile).I also noticed this happened (on both desktop and mobile). When I click on the variant color, its image does not change. Edited September 15, 2022 by claudiafrat tag Link to comment
tuanphan Posted September 17, 2022 Share Posted September 17, 2022 On 9/11/2022 at 2:16 PM, tuanphan said: Add this 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() { $('.ProductItem-details .product-variants').insertAfter('body.view-item .product-price'); }); </script> Hi, Remove code I sent here. I will check it again claudiafrat 1 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
claudiafrat Posted September 17, 2022 Author Share Posted September 17, 2022 super, i'll wait, Thank you @tuanphan! Link to comment
tuanphan Posted September 18, 2022 Share Posted September 18, 2022 23 hours ago, claudiafrat said: super, i'll wait, Thank you @tuanphan! Try adding this to Code Injection > Header <style> .ProductItem-details .ProductItem-details-checkout { display: flex; flex-direction: column; } div.ProductItem-product-price { order: 1; } .product-variants { order: 2 !important; } section.ProductItem-additional { order: 3; margin-top: 0 !important; } .ProductItem-details .sqs-add-to-cart-button-wrapper { margin-top: -20px; order: 4 !important; } .ProductItem-details-excerpt { order: 6 !important; margin-top: 30px; } </style> claudiafrat 1 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
claudiafrat Posted September 18, 2022 Author Share Posted September 18, 2022 Hi @tuanphan thank you! the code works better and also works for mobile. The only thing is that the product description is now under the "Add to Cart" button. Can we move the product description under the color option? So that we'll you have: Product title - Product price - Color options - and the rest of the elements. Link to comment
tuanphan Posted September 20, 2022 Share Posted September 20, 2022 On 9/18/2022 at 2:57 PM, claudiafrat said: Hi @tuanphan thank you! the code works better and also works for mobile. The only thing is that the product description is now under the "Add to Cart" button. Can we move the product description under the color option? So that we'll you have: Product title - Product price - Color options - and the rest of the elements. Use this new code <style> .ProductItem-details .ProductItem-details-checkout { display: flex; flex-direction: column; } div.ProductItem-product-price { order: 1; } .product-variants { order: 2 !important; } section.ProductItem-additional { order: 7; margin-top: 0 !important; } .ProductItem-details .sqs-add-to-cart-button-wrapper { margin-top: -20px; order: 4 !important; } .ProductItem-details-excerpt { order: 6 !important; margin-top: 30px; } </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
claudiafrat Posted September 20, 2022 Author Share Posted September 20, 2022 Hi @tuanphan sorry but the order is still messed up! Link to comment
tuanphan Posted September 20, 2022 Share Posted September 20, 2022 14 hours ago, claudiafrat said: Hi @tuanphan sorry but the order is still messed up! I see it is fine. What should order be? 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
claudiafrat Posted September 21, 2022 Author Share Posted September 21, 2022 Hi @tuanphan the order should be: 1) Product title 2) Product price 3) Color options - and the rest of the elements. 4) Product description 5) Accordion. 6)Quantity + pre–order button. thank you! Link to comment
tuanphan Posted September 22, 2022 Share Posted September 22, 2022 On 9/21/2022 at 2:07 PM, claudiafrat said: Hi @tuanphan the order should be: 1) Product title 2) Product price 3) Color options - and the rest of the elements. 4) Product description 5) Accordion. 6)Quantity + pre–order button. thank you! Try this new code <style> .ProductItem-details .ProductItem-details-checkout { display: flex; flex-direction: column; } div.ProductItem-product-price { order: 1; } .product-variants { order: 2 !important; } section.ProductItem-additional { order: 5; margin-top: 0 !important; } .ProductItem-details .sqs-add-to-cart-button-wrapper { margin-top: -20px; order: 8 !important; } .ProductItem-details-excerpt { order: 4 !important; margin-top: 0; margin-bottom: 0 !important; } .product-quantity-input { order: 6 !important; } </style> claudiafrat 1 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
claudiafrat Posted September 22, 2022 Author Share Posted September 22, 2022 Super! Now it works, thank you so much! 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