Displaying Quantity & Price on single line on products?

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:  

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>

What is access password?

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

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

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

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?

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?

19 hours ago, EmmaW said:

Price - Quantity - Add to Cart 

(all on one line) Do you think its possible?

Tested. IT seems imposssible

Tuan - can one get Quantity and Price on one line?

6 hours ago, IDC said:

Tuan - can one get Quantity and Price on one line?

 

Can you share link? I can take a look

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!

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

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.

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>

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.

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?

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!

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

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

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>

I found a solution! Thanks !!

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?

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!

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>