Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Displaying Quantity & Price on single line on products?


EmmaW

Question

  • Answers 25
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Edit style code <style> @media screen and (min-width:768px) { .ProductItem-details .ProductItem-product-price { display: flex !important; align-items: center; } .ProductItem-de

I found a solution! Thanks !!

Posted Images

25 answers to this question

Recommended Posts

  • 1
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>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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
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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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
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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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
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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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!

 

 

 

 

 

Price-Q-Picker.jpg

Edited by IDC
Update new image and clarified point about mobile view.
Link to post
  • 0

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

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: image.png.06333845892f02558a8f9abbd05d3924.png 

Link to post
  • 0
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: image.png.06333845892f02558a8f9abbd05d3924.png 

Sorry this not really work in putting the label Quantity and the Number picker on the same line.

Link to post
  • 0
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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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
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
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

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 by IDC
Link to post
  • 0
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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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 by IDC
Link to post
  • 0

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
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
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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...