quantity input and Add to cart on the same line

Hey @tommaso99

You can do some this with a little bit of custom CSS code.

Go into your site’s admin Dashboard and select Appearance → Customize →?Additional CSS. In the CSS textbox on the left, add the following code:

.single-product form {
    display: flex;
    flex-direction: column;
}

.single-product form .quantity {
    order: 1;
}

.single-product form #wc-stripe-payment-request-wrapper{
    order: 4;
}

.single-product form button.single_add_to_cart_button {
    order: 2;
}

.single-product form #wc-stripe-payment-request-button-separator {
    order: 3;
}

Select “Save Changes” from the top, and your changes will be applied to your site.

This will rearrange the items in the right order. To place the input field and “Add to cart” button next to eachother will require a bit more advanced code, but I’ll leave this thread open so that others may be able to look into that.

• This reply was modified 4 years, 3 months ago by Senff - a11n.

@senff Okay great, it works, thank you!
However now the add to cart button is not on the same line of the quantity selector. Is it possible to have them on the same line?

To place the input field and “Add to cart” button next to eachother will require a bit more advanced code, but I’ll leave this thread open so that others may be able to look into that.

okay I understand. Last question!
I was trying to apply a border to the quantity selector but a weird thing happens.
this is my css code:

.woocommerce .quantity input.qty {
 border-color: black;
 border-width: 2px;
 
}

.woocommerce .quantity a.plus, .woocommerce .quantity a.minus {
border-color: black;
 border-width: 2px
 
}

And this is what happens
https://ibb.co/jbRHpmP

This may help:

.woocommerce .quantity input.qty {
 border: solid 2px black;
  min-height: 38px;
  margin-bottom: 20px;
}

.woocommerce .quantity a.minus {
 border: solid 2px black;
 border-right: 0;
}

.woocommerce .quantity a.plus {
 border: solid 2px black;
 border-left: 0;
 }

@senff thank you! It works! Awesome ??

I also increased quantity selector height, the the only problem now, is that the quantity counter is centered, but the + and – are not.
I tried some CSS like vertical-align: middle; but it doesnt work :C

Try adding this as well:

.quantity .minus, .quantity .plus {
  line-height: 45px;
}

@senff Awesome!! Thank you!

I also thought I could remove the “OR” separator with display: none;
in the code:

.single-product form #wc-stripe-payment-request-button-separator {
    order: 3;
    display: none;
}

but it doesn’t seem to work

I fixed it by myself!
Thank you again, super helpful??

By editing the quantity selector style, now on the top bar it is not styled correctly anymore.
https://ibb.co/MBk1B3T