css Moving Add to Cart next to Quantity Input Squarespace 7.1

Site URL: https://www.anothercomb.com/comb/p/cesibon-20

Hi there

Is there a way to move the add to cart button next to the quantity input field via CSS or Code Injection? 

I have added a screenshot. Ideally the add to art + quantity field should be the same width as the product variant. 

Also, I have looked at several forums already and haven't been able to find a working solution for this. 

Thanks in advance!

Add to Home > Design > Custom CSS

/* add to cart next to quantity */
@media screen and (min-width:768px) {
.sqs-add-to-cart-button-wrapper {
    width: 70% !important;
    float: left;
    margin-bottom: 0 !important;
    position: relative;
    bottom: -25px;
}
.product-quantity-input {
    width: 30% !important;
    float: left !important;
}
}

WOW thank you that worked like a charm. Wonderful.

Is there a way to increase the height of the Add to Cart button as well without affecting the alignment? So that the height is the same as the quantity input field and they look aligned?

Thanks again. 

On 1/8/2021 at 5:19 PM, savannahjanssen said:

WOW thank you that worked like a charm. Wonderful.

Is there a way to increase the height of the Add to Cart button as well without affecting the alignment? So that the height is the same as the quantity input field and they look aligned?

Thanks again. 

New code

/* add to cart next to quantity */
@media screen and (min-width:768px) {
.sqs-add-to-cart-button-wrapper {
    width: 70% !important;
    float: left;
    margin-bottom: 0 !important;
    position: relative;
    bottom: -23px;
}
.product-quantity-input {
    width: 30% !important;
    float: left !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
}

THANK you SO MUCH! That worked perfectly. 

On 1/10/2021 at 5:01 PM, tuanphan said:

New code

/* add to cart next to quantity */
@media screen and (min-width:768px) {
.sqs-add-to-cart-button-wrapper {
    width: 70% !important;
    float: left;
    margin-bottom: 0 !important;
    position: relative;
    bottom: -23px;
}
.product-quantity-input {
    width: 30% !important;
    float: left !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
}

 

How can I apply to my mobile version as well? Thanks

On 8/6/2021 at 8:14 PM, Botbot said:

How can I apply to my mobile version as well? Thanks

Hi. Can you share link to product page on your site? WE can check easier

On 8/6/2021 at 9:14 AM, Botbot said:

How can I apply to my mobile version as well? Thanks

It looks like it sets the section to have a flex direction of column which is why they are all stacking. I would use different code here altogether to help combat the flexbox code. Try this...
 

.ProductItem-details .ProductItem-details-checkout {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.ProductItem-product-price, .ProductItem-details-excerpt {
flex-basis:100%;
}
.sqs-add-to-cart-button-wrapper {
margin-bottom: 0 !important;
position: relative;
bottom: -28px;
}
.product-quantity-input {
flex-basis:30%;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
padding-top: 1.5em;
padding-bottom: 1.5em;
}
@media screen and (min-width:767px) {
.sqs-add-to-cart-button-wrapper {
flex-basis:70%;
}
}
@media screen and (max-width:767px) {
.sqs-add-to-cart-button-wrapper {
flex-basis:60%;
margin-left: 5vw;
}
}

Is there a way to apply this solution to both desktop and mobile without having it impact the accordion table within my Product Details section?

my url: https://www.glassworkpixie.com/shop/p/fused-glass-ice-cream-statement-earrings

I'm using the below code to move the buttons to the correct placement, but now my accordion table below them is squished horizontally. 

.ProductItem-details .ProductItem-details-checkout {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.ProductItem-product-price, .ProductItem-details-excerpt {
flex-basis:100%;
}
.sqs-add-to-cart-button-wrapper {
margin-bottom: 0 !important;
position: relative;
bottom: -28px;
}
.product-quantity-input {
flex-basis:30%;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
padding-top: 1.5em;
padding-bottom: 1.5em;
}
@media screen and (min-width:767px) {
.sqs-add-to-cart-button-wrapper {
flex-basis:70%;
}
}
@media screen and (max-width:767px) {
.sqs-add-to-cart-button-wrapper {
flex-basis:60%;
margin-left: 5vw;
}
}

FYI I'm using the Store Page Header Code Injection referenced within this thread to move my accordion block, in case that has any impact.

On 1/6/2021 at 3:33 PM, savannahjanssen said:

Is there a way to move the add to cart button next to the quantity input field

After this question was posted, Squarespace launched several new Product Details Page (PDP) Layouts on Squarespace 7.1 and these newer layouts show the Add to Cart button beside the Quantity selector. No CSS or code is required. 

To choose a different Product Details Page:

1. Open the product details page you want to edit.
2. Click Edit design in the top-left corner. On some sites, you may need to hover over Edit, click Edit design, then click the Pencil icon.
3. Choose from one of the following layout options:

Full - Product images display in a full-bleed carousel above the description.

Half - The product image splits the page with the description. The image is always aligned left.

Wrap - The product images wrap around the description. Images are always aligned left.

Simple - This is the default option where the product image and description display side by side, surrounded by whitespace. 

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

On 1/10/2021 at 10:01 AM, tuanphan said:

New code

/* add to cart next to quantity */
@media screen and (min-width:768px) {
.sqs-add-to-cart-button-wrapper {
    width: 70% !important;
    float: left;
    margin-bottom: 0 !important;
    position: relative;
    bottom: -23px;
}
.product-quantity-input {
    width: 30% !important;
    float: left !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
}

 

I've modified some value of the code:

/* add to cart next to quantity */
@media screen and (min-width:768px) {
.sqs-add-to-cart-button-wrapper {
    width: 50% !important;
    float: left;
    margin-bottom: 0 !important;
    position: relative;
    bottom: -29px;
}
.product-quantity-input {
    width: 40% !important;
    float: left !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
}

The add to cart button now aligns perfectly with the quantity on tablet and browsers.

How to implement the code to make it work also on mobile? Thanks!

(website: https://watermelon-sponge-6pkp.squarespace.com/ )

On 5/8/2022 at 12:39 PM, Sitar said:

I've modified some value of the code:

/* add to cart next to quantity */
@media screen and (min-width:768px) {
.sqs-add-to-cart-button-wrapper {
    width: 50% !important;
    float: left;
    margin-bottom: 0 !important;
    position: relative;
    bottom: -29px;
}
.product-quantity-input {
    width: 40% !important;
    float: left !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
}

The add to cart button now aligns perfectly with the quantity on tablet and browsers.

How to implement the code to make it work also on mobile? Thanks!

(website: https://watermelon-sponge-6pkp.squarespace.com/ )

edit 768px to 1px

2 hours ago, tuanphan said:

edit 768px to 1px

that's what I get

On 5/9/2022 at 5:23 PM, Sitar said:

that's what I get

Can you share link to product in screenshot? We will test code again

On 5/11/2022 at 11:12 AM, tuanphan said:

Can you share link to product in screenshot? We will test code again

https://jolin.tech/shop/p/vactrols-are-illegal-unisex-tee

On 5/19/2022 at 1:26 AM, Sitar said:

https://jolin.tech/shop/p/vactrols-are-illegal-unisex-tee

That weird. Just tried the code & it looks fine

Try adding this to Code Injection > Header

<style>
  /* add to cart next to quantity */
@media screen and (min-width:768px) {
.sqs-add-to-cart-button-wrapper {
    width: 50% !important;
    float: left;
    margin-bottom: 0 !important;
    position: relative;
    bottom: -29px;
}
.product-quantity-input {
    width: 40% !important;
    float: left !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
}
</style>

tried the new code but still no progress. I'll keep it as it is, it's not that bad at the end.

Thank you for the help!

On 5/24/2022 at 11:22 PM, Sitar said:

tried the new code but still no progress. I'll keep it as it is, it's not that bad at the end.

Thank you for the help!

Screenshot looks fine. What is problem?