EmmaW 2 Share Posted May 7, 2020 Site URL: https://seabass-greyhound-r843.squarespace.com/home Does any one happen to have code that would change the display on individual products so that the price and quantity are on one single line? I'd like the order to be: 'price' followed by 'quantity' Followed by 'add to cart' Link to post
1 tuanphan 8,978 Share Posted July 2, 2020 7 hours ago, IDC said: Thanks! The above code puts the Price and Quantity picker (label and number picker stacked vertically) in the same line. Is it possible to get the label "Quantity" and the number picker on the same line instead of being stacked on top of each other as per the image I had in my original email? Edit style code <style> @media screen and (min-width:768px) { .ProductItem-details .ProductItem-product-price { display: flex !important; align-items: center; } .ProductItem-details .ProductItem-product-price .product-price { margin-right: 20px; } .product-quantity-input>* { float: left; } .product-quantity-input { width: 50%; display: flex !important; align-items: center !important; } .quantity-label, .product-quantity-input { margin-bottom: 0 !important; } } </style> IDC 1 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 tuanphan 8,978 Share Posted May 7, 2020 What is access password? You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 EmmaW 2 Author Share Posted May 7, 2020 12 minutes ago, tuanphan said: What is access password? Zurich1984 I'm using the following code right now, which brings the price down: section.ProductItem-details .ProductItem-details-checkout { display: flex; flex-flow: column; } .ProductItem-details .ProductItem-details-excerpt { order: 1 !important; } .ProductItem-details .product-variants { order: 2 !important; } .ProductItem .ProductItem-details .product-quantity-input { order: 3 !important; } .ProductItem-details .ProductItem-product-price { order: 4 !important; } .ProductItem-details .sqs-add-to-cart-button-wrapper { order: 5 !important; } .ProductItem .ProductItem-additional { order: 6 !important; } Link to post
0 tuanphan 8,978 Share Posted May 11, 2020 On 5/7/2020 at 9:51 PM, EmmaW said: In Custom CSS box, find this code and edit this number 4 to 3 .ProductItem-details .ProductItem-product-price { order: 4 !important; } and add this to Home > Design > Custom CSS @media screen and (max-width:767px) { .product-quantity-input { width: 50%; float: left !important; } } You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 EmmaW 2 Author Share Posted May 22, 2020 On 5/11/2020 at 9:16 AM, tuanphan said: In Custom CSS box, find this code and edit this number 4 to 3 .ProductItem-details .ProductItem-product-price { order: 4 !important; } and add this to Home > Design > Custom CSS @media screen and (max-width:767px) { .product-quantity-input { width: 50%; float: left !important; } } Hi Tuan! Thanks so much for this!! This code successfully switched the order of the price & quantity field, but didn't put it on one line... i.e. https://seabass-greyhound-r843.squarespace.com/editions-a-k/tomma-abts (pw: Zurich1984) Now I'm wondering, do you think it would be possible to display 'Price' followed by 'QTY' followed by 'Add to Cart' all on one line ?? Thanks again!!!!!!!!!!!!! Link to post
0 tuanphan 8,978 Share Posted May 27, 2020 On 5/22/2020 at 9:49 PM, EmmaW said: Hi Tuan! Thanks so much for this!! This code successfully switched the order of the price & quantity field, but didn't put it on one line... i.e. https://seabass-greyhound-r843.squarespace.com/editions-a-k/tomma-abts (pw: Zurich1984) Now I'm wondering, do you think it would be possible to display 'Price' followed by 'QTY' followed by 'Add to Cart' all on one line ?? Thanks again!!!!!!!!!!!!! You want Price - Quantity Add to Cart Is this right? You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 EmmaW 2 Author Share Posted May 27, 2020 5 hours ago, tuanphan said: You want Price - Quantity Add to Cart Is this right? Price - Quantity - Add to Cart (all on one line) Do you think its possible? Link to post
0 tuanphan 8,978 Share Posted May 28, 2020 19 hours ago, EmmaW said: Price - Quantity - Add to Cart (all on one line) Do you think its possible? Tested. IT seems imposssible You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 tuanphan 8,978 Share Posted June 28, 2020 6 hours ago, IDC said: Tuan - can one get Quantity and Price on one line? Can you share link? I can take a look You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 IDC 1 Share Posted June 28, 2020 (edited) https://www.lamasqueria.com/shop/pink-zari I would like the Price, Quantity-Label and Number-Picker on one line. The next line after this I would like to have "Add to Cart". In the custom cc you will see how I am controlling padding and margins for the Product Details elements. Hope this is an acceptable way to do it. Further can one change the number picker so that it has "-" on side and "+" on the other ? If all works out it would be something like the attached image. In case the -/+ picker is not possible but putting it on one like is possible that would be amazing too. Also would like to have this not change when in mobile mode. Thanks so much for your help! Edited June 28, 2020 by IDC Update new image and clarified point about mobile view. Link to post
0 WilsonB 0 Share Posted June 29, 2020 I have a similar question. I'm hoping to get the Quantity and Add to Cart Button on the same line rather than stacked. Can't seem to get it... Link to post
0 joe_AT 1 Share Posted June 30, 2020 So after messing around a bit, I found that just adjusting the margins will work. I was trying to do something similar with the Quantity and Variants dropdown. The Quantity button was initially below the Variant "select amount" button. So I used this code with a negative top margin to move the Quantity button up and then a right margin to move it over: .product-quantity-input { margin-right: 450px !important; margin-top: -130px !important; } Here is what it looks like: Link to post
0 IDC 1 Share Posted July 1, 2020 18 hours ago, joe_AT said: So after messing around a bit, I found that just adjusting the margins will work. I was trying to do something similar with the Quantity and Variants dropdown. The Quantity button was initially below the Variant "select amount" button. So I used this code with a negative top margin to move the Quantity button up and then a right margin to move it over: .product-quantity-input { margin-right: 450px !important; margin-top: -130px !important; } Here is what it looks like: Sorry this not really work in putting the label Quantity and the Number picker on the same line. Link to post
0 tuanphan 8,978 Share Posted July 1, 2020 On 6/28/2020 at 6:08 PM, IDC said: https://www.lamasqueria.com/shop/pink-zari I would like the Price, Quantity-Label and Number-Picker on one line. The next line after this I would like to have "Add to Cart". Add to Home > Settings > Advanced > Code Injection > Header <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.ProductItem-details .product-quantity-input').insertAfter('.ProductItem-product-price .product-price'); }); </script> <style> @media screen and (min-width:768px) { .ProductItem-details .ProductItem-product-price { display: flex !important; align-items: center; } .ProductItem-details .ProductItem-product-price .product-price { margin-right: 20px; } } </style> You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 joe_AT 1 Share Posted July 1, 2020 7 hours ago, IDC said: Sorry this not really work in putting the label Quantity and the Number picker on the same line. Ah apologies I misunderstood: my mistake. Link to post
0 IDC 1 Share Posted July 1, 2020 5 hours ago, tuanphan said: Add to Home > Settings > Advanced > Code Injection > Header <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.ProductItem-details .product-quantity-input').insertAfter('.ProductItem-product-price .product-price'); }); </script> <style> @media screen and (min-width:768px) { .ProductItem-details .ProductItem-product-price { display: flex !important; align-items: center; } .ProductItem-details .ProductItem-product-price .product-price { margin-right: 20px; } } </style> Thanks! The above code puts the Price and Quantity picker (label and number picker stacked vertically) in the same line. Is it possible to get the label "Quantity" and the number picker on the same line instead of being stacked on top of each other as per the image I had in my original email? Link to post
0 IDC 1 Share Posted July 2, 2020 11 hours ago, tuanphan said: Edit style code <style> @media screen and (min-width:768px) { .ProductItem-details .ProductItem-product-price { display: flex !important; align-items: center; } .ProductItem-details .ProductItem-product-price .product-price { margin-right: 20px; } .product-quantity-input>* { float: left; } .product-quantity-input { width: 50%; display: flex !important; align-items: center !important; } .quantity-label, .product-quantity-input { margin-bottom: 0 !important; } } </style> Thank yo so much. This has helped me create the look and feel I wanted! Link to post
0 IDC 1 Share Posted July 10, 2020 (edited) Hi Tauphan Thanks for you help earlier with the formatting. My site is lamasqueria.com The quantity-input field is not working from the shopping details page (https://www.lamasqueria.com/shop/stripe-mask) I can change the number that am I buying to anything - when I add the mask to the cart then only one mask gets added. In debugging I ran the code without injecting the code needed for formatting. Removing the code injection in the header made the quantity-input field work well. Can you please help? We are trying to go live early next week and am panicking a little 🙂 JC Edited July 10, 2020 by IDC Link to post
0 tuanphan 8,978 Share Posted July 10, 2020 8 minutes ago, IDC said: Hi Tauphan Thanks for you help earlier with the formatting. My site is lamasqueria.com The quantity-input field is not working from the shopping details page (https://www.lamasqueria.com/shop/stripe-mask) I can change the number that I buying to anything - when I add only one mask gets added. Can you please help? We are trying to go live early next week and am panicking a little :) JC I see it works here> https://www.lamasqueria.com/shop/stripe-mask You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 IDC 1 Share Posted July 10, 2020 (edited) I am sorry I was debugging. I had removed the injected code to achieve the formatting. I have now included injected code and it is not working again. Here is injected code: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.ProductItem-details .product-quantity-input').insertAfter('.ProductItem-product-price .product-price'); }); </script> <style> @media screen and (min-width:168px) { .ProductItem-details .ProductItem-product-price { display: flex !important; align-items: center; } .ProductItem-details .ProductItem-product-price .product-price { margin-right: 5rem; } .product-quantity-input>* { float: left; } .product-quantity-input { width: 70%; display: flex !important; align-items: center !important; margin-bottom: 0.6rem !important; } .quantity-label { margin-bottom: -0.2rem !important; margin-right: -4rem !important; } } </style> Edited July 10, 2020 by IDC Link to post
0 IDC 1 Share Posted July 12, 2020 Hi Tauphan I have another situation now. Here is the background. I am offering 3 options for shipping 1) 1st Class Mail 2) Priority Mail 3) Priority Mail Express I am also offering a discount - Free 1st Class Mail for orders at or above $45 (suppose that is $4 value) If for an order at or above $45 the customer choose Priority Mail (costing lets say $8.25) then the customer has to pay the full $8.25. The $4 value of free 1st Class Mail is not applied to the cost of Priority Mail. Similarly the cost saving does not carry over if the customer chooses Priority Mail Express. Can this be fixed? Link to post
0 alexamargs 2 Share Posted August 12, 2020 On 7/1/2020 at 8:23 PM, tuanphan said: Edit style code <style> @media screen and (min-width:768px) { .ProductItem-details .ProductItem-product-price { display: flex !important; align-items: center; } .ProductItem-details .ProductItem-product-price .product-price { margin-right: 20px; } .product-quantity-input>* { float: left; } .product-quantity-input { width: 50%; display: flex !important; align-items: center !important; } .quantity-label, .product-quantity-input { margin-bottom: 0 !important; } } </style> @tuanphan Is there a way to do this with the variant picker and the quantity? I'd like the variant picker and the quantity on the same line above Add to Cart. Thank you! Link to post
0 tuanphan 8,978 Share Posted August 24, 2020 On 8/13/2020 at 5:16 AM, alexamargs said: @tuanphan Is there a way to do this with the variant picker and the quantity? I'd like the variant picker and the quantity on the same line above Add to Cart. Thank you! Have you solved yet> You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
Question
EmmaW 2
Site URL: https://seabass-greyhound-r843.squarespace.com/home
Does any one happen to have code that would change the display on individual products so that the price and quantity are on one single line?
I'd like the order to be:
'price' followed by 'quantity'
Followed by 'add to cart'
Link to post
Top Posters For This Question
10
9
4
2
Popular Days
Jul 10
4
Jul 1
4
May 7
3
Jun 28
3
Top Posters For This Question
tuanphan 10 posts
IDC 9 posts
EmmaW 4 posts
joe_AT 2 posts
Popular Days
Jul 10 2020
4 posts
Jul 1 2020
4 posts
May 7 2020
3 posts
Jun 28 2020
3 posts
Popular Posts
tuanphan
Edit style code <style> @media screen and (min-width:768px) { .ProductItem-details .ProductItem-product-price { display: flex !important; align-items: center; } .ProductItem-de
IDC
I found a solution! Thanks !!
Posted Images
27 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment