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

Displaying Quantity & Price on single line on products?

Question

22 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  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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; 
}

Share this post


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  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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

Share this post


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  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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?

Share this post


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

 

 

 

 

 

Price-Q-Picker.jpg

Edited by IDC
Update new image and clarified point about mobile view.

Share this post


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

Share this post


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 

Share this post


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.

Share this post


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  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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.

Share this post


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?

 

Share this post


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!

Share this post


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

Share this post


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  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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

Share this post


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