Displaying Quantity & Price on single line on products?

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>

Hi @tuanphan - I am on Squarespace 7.1 now and the Code Injection doesn't seem to work, can you take a look? Attached is a photoshop version how I want it to look. Quantity and Size on the same line with "Add to cart" the same width of those two. I'd also like to change the "Quantity" to a dropdown, is that possible? 

https://www.penroseoutfitters.com/shop/p/penrose-outfitters-core-t-shirt

On 11/19/2020 at 1:18 AM, DCVII said:

Hi @tuanphan - I am on Squarespace 7.1 now and the Code Injection doesn't seem to work, can you take a look? Attached is a photoshop version how I want it to look. Quantity and Size on the same line with "Add to cart" the same width of those two. I'd also like to change the "Quantity" to a dropdown, is that possible? 

https://www.penroseoutfitters.com/shop/p/penrose-outfitters-core-t-shirt

 

Where is quantity?

@tuanphan I am looking for something similar, and have had trouble when trying to alter your code.

I would like to have the Price after the quantity picker, on the same line as the quantity input, above the Add to card button

Something like this:

QUANTITY:

[   1   ]    $19.95

[    ADD TO CART   ]

Is that possible?

My product page is (for example) https://www.supernatlparks.com/shop/p/bigfoot-unisex-t-shirt

On 11/21/2021 at 4:18 AM, Struckhoff said:

@tuanphan I am looking for something similar, and have had trouble when trying to alter your code.

I would like to have the Price after the quantity picker, on the same line as the quantity input, above the Add to card button

Something like this:

QUANTITY:

[   1   ]    $19.95

[    ADD TO CART   ]

 

Is that possible?

My product page is (for example) https://www.supernatlparks.com/shop/p/bigfoot-unisex-t-shirt

Try adding this code to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('.ProductItem-product-price').appendTo('div.product-quantity-input');
	});
</script>
<style>
  div.product-quantity-input {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 70%;
}
</style>

When I tried this code, the result was close to what I wanted, but alignments are not quite right, as shown in the screenshot on the left.

The "Quantity" label shifts down to the left of the input field, instead of staying above the input. I'd like it to stay above if possible,  to matching the formatting of the other variant fields.

I'd also like to align the .product-price so that it's vertically centered relative to the input and as close as possible to aligning to the quantity input type. The layout on the right is what I'd like to achieve.

5 hours ago, JoeGrossmann said:

When I tried this code

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

When I try the code above, suggested on 11/23/21, the result is close to what I want, but alignments are not quite right, as shown in the screenshot on the left.

The "Quantity" label shifts down to the left of the input field, instead of staying above the input. I'd like it to stay above if possible,  to matching the formatting of the other variant fields.

I'd also like to align the .product-price so that it's vertically centered relative to the input and as close as possible to aligning to the quantity input type. The layout shown on the right is what I'd like to achieve.

You can view a typical PDP here at https://frog-bagpipe-mrr2.squarespace.com/art-for-sale/p/gratitude-2024-acrylic-painting-on-16x20-canvas-board pw testing

This version has the footer code injection suggested on 11/23/21. If you'd like to see that page with the code removed, just let me know. I appreciate the help!

Hey @JoeGrossmann, happy to help out here. Try this bit of Custom CSS:
 

/*Input Container*/ 
#page .ProductItem-details-checkout .product-quantity-input {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  column-gap: 17px;
}
/*Quantity Text*/ 
.ProductItem-details .quantity-label{
  grid-column: span 2;
}
/*Price Text Container*/ 
#page .ProductItem-details-checkout .ProductItem-product-price {
  margin: 0;
}
/*Price Text*/ 
#page .ProductItem .ProductItem-details .product-price {
  margin: 0;
}

Here's a quick video going over how I got to this if you or anyone else is curious:

https://www.loom.com/share/6e6bcb18bd3a459cbe49068caafe6548?sid=6f5ec74b-c9c5-413c-8cc4-9fb3dc2c171c

This is fantastic — it works perfectly, and the video explanation is extremely helpful! Thanks @WillMyers!!!