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

23 answers to this question

Recommended Posts

  • 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

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

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

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

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
Posted (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 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

Share this post


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

Share this post


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?

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